Add FullCalendar integration with sample events and styling (#2363)

core/scss/tabler-vendors.scss

@@ -13,4 +13,4 @@
 @import "vendor/coloris";
 @import "vendor/typed";
 @import "vendor/turbo";
-
+@import "vendor/fullcalendar";

core/scss/vendor/_fullcalendar.scss

@@ -0,0 +1,55 @@
+:root {
+  --fc-border-color: var(--#{$prefix}border-color);
+  --fc-daygrid-event-dot-width: 5px;
+
+  --fc-event-bg-color: var(--#{$prefix}primary-lt);
+  --fc-event-border-color: var(--#{$prefix}primary-200);
+  --fc-event-text-color: var(--#{$prefix}body-color);
+}
+
+.fc-toolbar-title {
+  font-size: var(--#{$prefix}font-size-h3) !important;
+  font-weight: var(--#{$prefix}font-weight-medium);
+}
+
+.fc-daygrid-dot-event {
+  background-color: var(--fc-event-bg-color);
+  border: 1px solid var(--fc-event-border-color);
+  color: var(--fc-event-text-color);
+  padding-top: 1px;
+  padding-bottom: 1px;
+
+  .fc-event-title {
+    font-weight: inherit;
+  }
+}
+
+.fc-col-header-cell {
+  background-color: var(--#{$prefix}bg-surface-secondary);
+  color: var(--#{$prefix}secondary);
+  text-transform: uppercase;
+  font-weight: var(--#{$prefix}font-weight-medium);
+  font-size: var(--#{$prefix}font-size-h5);
+  padding-top: .5rem !important;
+  padding-bottom: .5rem !important;
+  line-height: 1;
+}
+
+.fc-event-time {
+  font-weight: var(--#{$prefix}font-weight-bold) !important;
+}
+
+.fc-col-header-cell-cushion {
+  color: inherit;
+}
+
+.fc-daygrid-day-number {
+  color: var(--#{$prefix}secondary);
+}
+
+.fc-button {
+  color: var(--#{$prefix}body-color) !important;
+  background-color: transparent !important;
+  border-color: var(--#{$prefix}border-color) !important;
+  font-weight: var(--#{$prefix}font-weight-medium) !important;
+}

pnpm-lock.yaml

@@ -191,7 +191,7 @@ importers:
         version: 6.1.8
       shiki:
         specifier: ^3.2.2
-        version: 3.3.0
+        version: 3.2.2
 
   preview:
     dependencies:
@@ -228,6 +228,9 @@ importers:
       fslightbox:
         specifier: ^3.5.1
         version: 3.5.1
+      fullcalendar:
+        specifier: ^6.1.17
+        version: 6.1.17
       hugerte:
         specifier: ^1.0.9
         version: 1.0.9
@@ -570,6 +573,34 @@ packages:
   '@emnapi/[email protected]':
     resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
 
+  '@fullcalendar/[email protected]':
+    resolution: {integrity: sha512-0W7lnIrv18ruJ5zeWBeNZXO8qCWlzxDdp9COFEsZnyNjiEhUVnrW/dPbjRKYpL0edGG0/Lhs0ghp1z/5ekt8ZA==}
+
+  '@fullcalendar/[email protected]':
+    resolution: {integrity: sha512-K7m+pd7oVJ9fW4h7CLDdDGJbc9szJ1xDU1DZ2ag+7oOo1aCNLv44CehzkkknM6r8EYlOOhgaelxQpKAI4glj7A==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.17
+
+  '@fullcalendar/[email protected]':
+    resolution: {integrity: sha512-AudvQvgmJP2FU89wpSulUUjeWv24SuyCx8FzH2WIPVaYg+vDGGYarI7K6PcM3TH7B/CyaBjm5Rqw9lXgnwt5YA==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.17
+
+  '@fullcalendar/[email protected]':
+    resolution: {integrity: sha512-fkyK49F9IxwlGUBVhJGsFpd/LTi/vRVERLIAe1HmBaGkjwpxnynm8TMLb9mZip97wvDk3CmZWduMe6PxscAlow==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.17
+
+  '@fullcalendar/[email protected]':
+    resolution: {integrity: sha512-ZxA9mkTzKayCdxR5je9P9++qqhSeSbuvXmvZ6doZw6omv8K52cD7XJii+P7gvxATXxtI6hg4i+DuMyOHxP1E2g==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.17
+
+  '@fullcalendar/[email protected]':
+    resolution: {integrity: sha512-K4PlA3L3lclLOs3IX8cvddeiJI9ZVMD7RA9IqaWwbvac771971foc9tFze9YY+Pqesf6S+vhS2dWtEVlERaGlQ==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.17
+
   '@hotwired/[email protected]':
     resolution: {integrity: sha512-M7qXUqcGab6G5PKOiwhgbByTtrPgKPFCTMNQ52QhzUEXEqmp0/ApEguUesh/FPiUjrmFec+3lq98KsWnYY2C7g==}
     engines: {node: '>= 14'}
@@ -907,23 +938,23 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@shikijs/core@3.3.0':
-    resolution: {integrity: sha512-CovkFL2WVaHk6PCrwv6ctlmD4SS1qtIfN8yEyDXDYWh4ONvomdM9MaFw20qHuqJOcb8/xrkqoWQRJ//X10phOQ==}
+  '@shikijs/core@3.2.2':
+    resolution: {integrity: sha512-yvlSKVMLjddAGBa2Yu+vUZxuu3sClOWW1AG+UtJkvejYuGM5BVL35s6Ijiwb75O9QdEx6IkMxinHZSi8ZyrBaA==}
 
-  '@shikijs/engine-javascript@3.3.0':
-    resolution: {integrity: sha512-XlhnFGv0glq7pfsoN0KyBCz9FJU678LZdQ2LqlIdAj6JKsg5xpYKay3DkazXWExp3DTJJK9rMOuGzU2911pg7Q==}
+  '@shikijs/engine-javascript@3.2.2':
+    resolution: {integrity: sha512-tlDKfhWpF4jKLUyVAnmL+ggIC+0VyteNsUpBzh1iwWLZu4i+PelIRr0TNur6pRRo5UZIv3ss/PLMuwahg9S2hg==}
 
-  '@shikijs/engine-oniguruma@3.3.0':
-    resolution: {integrity: sha512-l0vIw+GxeNU7uGnsu6B+Crpeqf+WTQ2Va71cHb5ZYWEVEPdfYwY5kXwYqRJwHrxz9WH+pjSpXQz+TJgAsrkA5A==}
+  '@shikijs/engine-oniguruma@3.2.2':
+    resolution: {integrity: sha512-vyXRnWVCSvokwbaUD/8uPn6Gqsf5Hv7XwcW4AgiU4Z2qwy19sdr6VGzMdheKKN58tJOOe5MIKiNb901bgcUXYQ==}
 
-  '@shikijs/langs@3.3.0':
-    resolution: {integrity: sha512-zt6Kf/7XpBQKSI9eqku+arLkAcDQ3NHJO6zFjiChI8w0Oz6Jjjay7pToottjQGjSDCFk++R85643WbyINcuL+g==}
+  '@shikijs/langs@3.2.2':
+    resolution: {integrity: sha512-NY0Urg2dV9ETt3JIOWoMPuoDNwte3geLZ4M1nrPHbkDS8dWMpKcEwlqiEIGqtwZNmt5gKyWpR26ln2Bg2ecPgw==}
 
-  '@shikijs/themes@3.3.0':
-    resolution: {integrity: sha512-tXeCvLXBnqq34B0YZUEaAD1lD4lmN6TOHAhnHacj4Owh7Ptb/rf5XCDeROZt2rEOk5yuka3OOW2zLqClV7/SOg==}
+  '@shikijs/themes@3.2.2':
+    resolution: {integrity: sha512-Zuq4lgAxVKkb0FFdhHSdDkALuRpsj1so1JdihjKNQfgM78EHxV2JhO10qPsMrm01FkE3mDRTdF68wfmsqjt6HA==}
 
-  '@shikijs/types@3.3.0':
-    resolution: {integrity: sha512-KPCGnHG6k06QG/2pnYGbFtFvpVJmC3uIpXrAiPrawETifujPBv0Se2oUxm5qYgjCvGJS9InKvjytOdN+bGuX+Q==}
+  '@shikijs/types@3.2.2':
+    resolution: {integrity: sha512-a5TiHk7EH5Lso8sHcLHbVNNhWKP0Wi3yVnXnu73g86n3WoDgEra7n3KszyeCGuyoagspQ2fzvy4cpSc8pKhb0A==}
 
   '@shikijs/[email protected]':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
@@ -1407,6 +1438,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-UyiO82eb9dVOx8YO3ajDf9jz2kKyt98DEITRdeLPstOEuTlLzDA4Gyq5K9he71TQziU5jUVu2OAu5N48HmQiyQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
+
   [email protected]:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -1626,6 +1660,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-HFADNFHjo26XGiGpIZeoJZ3RE3RaZItc2jmqim63zlu3GTmnd5TUkj6ZpMrdU1S4g5pbbKG2cpG2ekqtaM1Spg==}
 
+  [email protected]:
+    resolution: {integrity: sha512-5pq3jYo9cJnVn8TrnukJdP3uNZWk2V1uiTqVXIaSbO5qIXeF3H1jE11PAB5fBOacnZ9HLI/98IT82Y1rz/2VIw==}
+
   [email protected]:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
@@ -2229,11 +2266,11 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
-  [email protected]2.1:
-    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+  [email protected].2:
+    resolution: {integrity: sha512-F7Ld4oDZJCI5/wCZ8AOffQbqjSzIRpKH7I/iuSs1SkhZeCj0wS6PMZ4W6VA16TWHrAo0Y9bBKEJOe7tvwcTXnw==}
 
-  oniguruma-to-es@4.3.3:
-    resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==}
+  oniguruma-to-es@4.2.0:
+    resolution: {integrity: sha512-MDPs6KSOLS0tKQ7joqg44dRIRZUyotfTy0r+7oEEs6VwWWP0+E2PPDYWMFN0aqOjRyWHBYq7RfKw9GQk2S2z5g==}
 
   [email protected]:
     resolution: {integrity: sha512-AQK8T9GSKFREFlN1DBXTYsLjs7YV2tZcJ7zUWxbjMoQmj8dDSFRrzhLCbHPZWA1TMV3vACqfCxLEZcwf2wxV6Q==}
@@ -2416,6 +2453,9 @@ packages:
     resolution: {integrity: sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==}
     engines: {node: '>=12.0.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
+
   [email protected]:
     resolution: {integrity: sha512-fmpDkgfGU6JYux9teDWLhj9mKN55tyepwYbxHgQuIxbWQzgFg5vk7Mrrtfx7xRxq798ynkY4DDDxZr235Kk+4w==}
 
@@ -2640,8 +2680,8 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  shiki@3.3.0:
-    resolution: {integrity: sha512-j0Z1tG5vlOFGW8JVj0Cpuatzvshes7VJy5ncDmmMaYcmnGW0Js1N81TOW98ivTFNZfKRn9uwEg/aIm638o368g==}
+  shiki@3.2.2:
+    resolution: {integrity: sha512-0qWBkM2t/0NXPRcVgtLhtHv6Ak3Q5yI4K/ggMqcgLRKm4+pCs3namgZlhlat/7u2CuqNtlShNs9lENOG6n7UaQ==}
 
   [email protected]:
     resolution: {integrity: sha512-Z0KixSIlGPpijKgcH6oCMCbltPImvaKy0sGH8AkLRXw1KyzpKtaCTizP2xen+hNDqVF4xxgvA0KXSb9o4Q6hnA==}
@@ -3607,6 +3647,32 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@fullcalendar/[email protected]':
+    dependencies:
+      preact: 10.12.1
+
+  '@fullcalendar/[email protected](@fullcalendar/[email protected])':
+    dependencies:
+      '@fullcalendar/core': 6.1.17
+
+  '@fullcalendar/[email protected](@fullcalendar/[email protected])':
+    dependencies:
+      '@fullcalendar/core': 6.1.17
+
+  '@fullcalendar/[email protected](@fullcalendar/[email protected])':
+    dependencies:
+      '@fullcalendar/core': 6.1.17
+
+  '@fullcalendar/[email protected](@fullcalendar/[email protected])':
+    dependencies:
+      '@fullcalendar/core': 6.1.17
+      '@fullcalendar/daygrid': 6.1.17(@fullcalendar/[email protected])
+
+  '@fullcalendar/[email protected](@fullcalendar/[email protected])':
+    dependencies:
+      '@fullcalendar/core': 6.1.17
+      '@fullcalendar/daygrid': 6.1.17(@fullcalendar/[email protected])
+
   '@hotwired/[email protected]': {}
 
   '@img/[email protected]':
@@ -3880,33 +3946,33 @@ snapshots:
   '@rollup/[email protected]':
     optional: true
 
-  '@shikijs/core@3.3.0':
+  '@shikijs/core@3.2.2':
     dependencies:
-      '@shikijs/types': 3.3.0
+      '@shikijs/types': 3.2.2
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
-  '@shikijs/engine-javascript@3.3.0':
+  '@shikijs/engine-javascript@3.2.2':
     dependencies:
-      '@shikijs/types': 3.3.0
+      '@shikijs/types': 3.2.2
       '@shikijs/vscode-textmate': 10.0.2
-      oniguruma-to-es: 4.3.3
+      oniguruma-to-es: 4.2.0
 
-  '@shikijs/engine-oniguruma@3.3.0':
+  '@shikijs/engine-oniguruma@3.2.2':
     dependencies:
-      '@shikijs/types': 3.3.0
+      '@shikijs/types': 3.2.2
       '@shikijs/vscode-textmate': 10.0.2
 
-  '@shikijs/langs@3.3.0':
+  '@shikijs/langs@3.2.2':
     dependencies:
-      '@shikijs/types': 3.3.0
+      '@shikijs/types': 3.2.2
 
-  '@shikijs/themes@3.3.0':
+  '@shikijs/themes@3.2.2':
     dependencies:
-      '@shikijs/types': 3.3.0
+      '@shikijs/types': 3.2.2
 
-  '@shikijs/types@3.3.0':
+  '@shikijs/types@3.2.2':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
@@ -4392,6 +4458,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -4605,6 +4673,15 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      '@fullcalendar/core': 6.1.17
+      '@fullcalendar/daygrid': 6.1.17(@fullcalendar/[email protected])
+      '@fullcalendar/interaction': 6.1.17(@fullcalendar/[email protected])
+      '@fullcalendar/list': 6.1.17(@fullcalendar/[email protected])
+      '@fullcalendar/multimonth': 6.1.17(@fullcalendar/[email protected])
+      '@fullcalendar/timegrid': 6.1.17(@fullcalendar/[email protected])
+
   [email protected]: {}
 
   [email protected]: {}
@@ -5174,11 +5251,12 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
-  [email protected]2.1: {}
+  [email protected].2: {}
 
-  oniguruma-to-es@4.3.3:
+  oniguruma-to-es@4.2.0:
     dependencies:
-      oniguruma-parser: 0.12.1
+      emoji-regex-xs: 1.0.0
+      oniguruma-parser: 0.11.2
       regex: 6.0.1
       regex-recursion: 6.0.2
 
@@ -5339,6 +5417,8 @@ snapshots:
       posthtml-parser: 0.11.0
       posthtml-render: 3.0.0
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -5609,14 +5689,14 @@ snapshots:
       interpret: 1.4.0
       rechoir: 0.6.2
 
-  shiki@3.3.0:
+  shiki@3.2.2:
     dependencies:
-      '@shikijs/core': 3.3.0
-      '@shikijs/engine-javascript': 3.3.0
-      '@shikijs/engine-oniguruma': 3.3.0
-      '@shikijs/langs': 3.3.0
-      '@shikijs/themes': 3.3.0
-      '@shikijs/types': 3.3.0
+      '@shikijs/core': 3.2.2
+      '@shikijs/engine-javascript': 3.2.2
+      '@shikijs/engine-oniguruma': 3.2.2
+      '@shikijs/langs': 3.2.2
+      '@shikijs/themes': 3.2.2
+      '@shikijs/types': 3.2.2
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 

preview/package.json

@@ -42,6 +42,7 @@
     "dropzone": "^6.0.0-beta.2",
     "flatpickr": "^4.6.13",
     "fslightbox": "^3.5.1",
+    "fullcalendar": "^6.1.17",
     "hugerte": "^1.0.9",
     "imask": "^7.6.1",
     "jsvectormap": "^1.6.0",

preview/pages/fullcalendar.html

@@ -0,0 +1,14 @@
+---
+title: Fullcalendar
+page-header: Fullcalendar
+page-menu: plugins.fullcalendar
+layout: default
+permalink: fullcalendar.html
+page-libs: [fullcalendar]
+---
+
+<div class="card">
+	<div class="card-body">
+		{% include "ui/fullcalendar.html" sample-events %}
+	</div>
+</div>

shared/data/libs.json

@@ -21,7 +21,8 @@
     "star-rating.js": "star-rating.js/dist/star-rating.min.js",
     "coloris.js": "@melloware/coloris/dist/umd/coloris.min.js",
     "typed.js": "typed.js/dist/typed.umd.js",
-    "signature_pad": "signature_pad/dist/signature_pad.umd.min.js"
+    "signature_pad": "signature_pad/dist/signature_pad.umd.min.js",
+    "fullcalendar": "fullcalendar/index.global.min.js"
   },
   "js-head": {
     "turbo": "@hotwired/turbo/dist/turbo.es2017-umd.js"

shared/data/menu.json

@@ -410,6 +410,10 @@
         "title": "Dropzone",
         "url": "dropzone.html"
       },
+      "fullcalendar": {
+        "url": "fullcalendar.html",
+        "title": "Fullcalendar"
+      },
       "plyr": {
         "title": "Inline player",
         "url": "inline-player.html"

shared/includes/ui/fullcalendar.html

@@ -0,0 +1,87 @@
+{% removeemptylines %}
+{% assign id = include.id | default: 'default' -%}
+
+<div id="calendar-{{ id }}"></div>
+
+{% capture script %}
+<script>
+	document.addEventListener('DOMContentLoaded', function () {
+		var calendarEl = document.getElementById('calendar-{{ id }}');
+		var currentYear = new Date().getFullYear();
+		var currentMonth = new Date().getMonth();
+
+		var calendar = new FullCalendar.Calendar(calendarEl, {
+			initialView: 'dayGridMonth',
+			
+			{% if include.sample-events %}
+			events: [
+				{
+					title: "Offsite Retreat",
+					start: new Date(currentYear, currentMonth, 2, 9, 0),
+					end: new Date(currentYear, currentMonth, 4, 17, 0),
+					color: 'var(--tblr-red)',
+					backgroundColor: 'var(--tblr-red-lt)',
+					borderColor: 'var(--tblr-red-200)',
+				}, 
+				{
+					title: "Monthly Planning",
+					start: new Date(currentYear, currentMonth, 1, 10, 0),
+					end: new Date(currentYear, currentMonth, 1, 11, 30),
+				},
+				{
+					title: "Marketing Strategy Call",
+					start: new Date(currentYear, currentMonth, 4, 14, 0),
+					end: new Date(currentYear, currentMonth, 4, 15, 0)
+				},
+				{
+					title: "Design Sprint",
+					start: new Date(currentYear, currentMonth, 7, 9, 0),
+					end: new Date(currentYear, currentMonth, 7, 12, 0)
+				},
+				{
+					title: "Dev Team Check-in",
+					start: new Date(currentYear, currentMonth, 10, 11, 0),
+					end: new Date(currentYear, currentMonth, 10, 11, 30)
+				},
+				{
+					title: "Customer Feedback Review",
+					start: new Date(currentYear, currentMonth, 13, 13, 0),
+					end: new Date(currentYear, currentMonth, 13, 14, 0)
+				},
+				{
+					title: "Mid-Month Review",
+					start: new Date(currentYear, currentMonth, 15, 10, 30),
+					end: new Date(currentYear, currentMonth, 15, 11, 30)
+				},
+				{
+					title: "Webinar: Product Update",
+					start: new Date(currentYear, currentMonth, 18, 16, 0),
+					end: new Date(currentYear, currentMonth, 18, 17, 0)
+				},
+				{
+					title: "Sales Training",
+					start: new Date(currentYear, currentMonth, 21, 9, 30),
+					end: new Date(currentYear, currentMonth, 21, 11, 0)
+				},
+				{
+					title: "Company All-Hands",
+					start: new Date(currentYear, currentMonth, 25, 15, 0),
+					end: new Date(currentYear, currentMonth, 25, 16, 0)
+				},
+				{
+					title: "End-of-Month Wrap-up",
+					start: new Date(currentYear, currentMonth, 31, 10, 0),
+					end: new Date(currentYear, currentMonth, 31, 11, 0)
+				}
+			],
+			{% endif %}
+		});
+		calendar.render();
+	});
+</script>
+{% endcapture %}
+
+{% capture_script %}
+{{ script }}
+{% endcapture_script %}
+{% endremoveemptylines %}