1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00

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

This commit is contained in:
Paweł Kuna
2025-05-16 22:27:48 +02:00
committed by GitHub
parent 3a02ef9c55
commit f769abd70b
8 changed files with 285 additions and 43 deletions

View File

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

55
core/scss/vendor/_fullcalendar.scss vendored Normal file
View File

@@ -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;
}

162
pnpm-lock.yaml generated
View File

@@ -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/runtime@1.4.3':
resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
'@fullcalendar/core@6.1.17':
resolution: {integrity: sha512-0W7lnIrv18ruJ5zeWBeNZXO8qCWlzxDdp9COFEsZnyNjiEhUVnrW/dPbjRKYpL0edGG0/Lhs0ghp1z/5ekt8ZA==}
'@fullcalendar/daygrid@6.1.17':
resolution: {integrity: sha512-K7m+pd7oVJ9fW4h7CLDdDGJbc9szJ1xDU1DZ2ag+7oOo1aCNLv44CehzkkknM6r8EYlOOhgaelxQpKAI4glj7A==}
peerDependencies:
'@fullcalendar/core': ~6.1.17
'@fullcalendar/interaction@6.1.17':
resolution: {integrity: sha512-AudvQvgmJP2FU89wpSulUUjeWv24SuyCx8FzH2WIPVaYg+vDGGYarI7K6PcM3TH7B/CyaBjm5Rqw9lXgnwt5YA==}
peerDependencies:
'@fullcalendar/core': ~6.1.17
'@fullcalendar/list@6.1.17':
resolution: {integrity: sha512-fkyK49F9IxwlGUBVhJGsFpd/LTi/vRVERLIAe1HmBaGkjwpxnynm8TMLb9mZip97wvDk3CmZWduMe6PxscAlow==}
peerDependencies:
'@fullcalendar/core': ~6.1.17
'@fullcalendar/multimonth@6.1.17':
resolution: {integrity: sha512-ZxA9mkTzKayCdxR5je9P9++qqhSeSbuvXmvZ6doZw6omv8K52cD7XJii+P7gvxATXxtI6hg4i+DuMyOHxP1E2g==}
peerDependencies:
'@fullcalendar/core': ~6.1.17
'@fullcalendar/timegrid@6.1.17':
resolution: {integrity: sha512-K4PlA3L3lclLOs3IX8cvddeiJI9ZVMD7RA9IqaWwbvac771971foc9tFze9YY+Pqesf6S+vhS2dWtEVlERaGlQ==}
peerDependencies:
'@fullcalendar/core': ~6.1.17
'@hotwired/turbo@8.0.13':
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/vscode-textmate@10.0.2':
resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
@@ -1407,6 +1438,9 @@ packages:
electron-to-chromium@1.5.149:
resolution: {integrity: sha512-UyiO82eb9dVOx8YO3ajDf9jz2kKyt98DEITRdeLPstOEuTlLzDA4Gyq5K9he71TQziU5jUVu2OAu5N48HmQiyQ==}
emoji-regex-xs@1.0.0:
resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -1626,6 +1660,9 @@ packages:
fslightbox@3.5.1:
resolution: {integrity: sha512-HFADNFHjo26XGiGpIZeoJZ3RE3RaZItc2jmqim63zlu3GTmnd5TUkj6ZpMrdU1S4g5pbbKG2cpG2ekqtaM1Spg==}
fullcalendar@6.1.17:
resolution: {integrity: sha512-5pq3jYo9cJnVn8TrnukJdP3uNZWk2V1uiTqVXIaSbO5qIXeF3H1jE11PAB5fBOacnZ9HLI/98IT82Y1rz/2VIw==}
function-bind@1.1.2:
resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
@@ -2229,11 +2266,11 @@ packages:
resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
engines: {node: '>=6'}
oniguruma-parser@0.12.1:
resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
oniguruma-parser@0.11.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==}
openapi-fetch@0.13.5:
resolution: {integrity: sha512-AQK8T9GSKFREFlN1DBXTYsLjs7YV2tZcJ7zUWxbjMoQmj8dDSFRrzhLCbHPZWA1TMV3vACqfCxLEZcwf2wxV6Q==}
@@ -2416,6 +2453,9 @@ packages:
resolution: {integrity: sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==}
engines: {node: '>=12.0.0'}
preact@10.12.1:
resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
preact@10.26.5:
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==}
shx@0.4.0:
resolution: {integrity: sha512-Z0KixSIlGPpijKgcH6oCMCbltPImvaKy0sGH8AkLRXw1KyzpKtaCTizP2xen+hNDqVF4xxgvA0KXSb9o4Q6hnA==}
@@ -3607,6 +3647,32 @@ snapshots:
tslib: 2.8.1
optional: true
'@fullcalendar/core@6.1.17':
dependencies:
preact: 10.12.1
'@fullcalendar/daygrid@6.1.17(@fullcalendar/core@6.1.17)':
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/interaction@6.1.17(@fullcalendar/core@6.1.17)':
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/list@6.1.17(@fullcalendar/core@6.1.17)':
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/multimonth@6.1.17(@fullcalendar/core@6.1.17)':
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/daygrid': 6.1.17(@fullcalendar/core@6.1.17)
'@fullcalendar/timegrid@6.1.17(@fullcalendar/core@6.1.17)':
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/daygrid': 6.1.17(@fullcalendar/core@6.1.17)
'@hotwired/turbo@8.0.13': {}
'@img/sharp-darwin-arm64@0.33.5':
@@ -3880,33 +3946,33 @@ snapshots:
'@rollup/rollup-win32-x64-msvc@4.40.2':
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:
electron-to-chromium@1.5.149: {}
emoji-regex-xs@1.0.0: {}
emoji-regex@8.0.0: {}
emoji-regex@9.2.2: {}
@@ -4605,6 +4673,15 @@ snapshots:
fslightbox@3.5.1: {}
fullcalendar@6.1.17:
dependencies:
'@fullcalendar/core': 6.1.17
'@fullcalendar/daygrid': 6.1.17(@fullcalendar/core@6.1.17)
'@fullcalendar/interaction': 6.1.17(@fullcalendar/core@6.1.17)
'@fullcalendar/list': 6.1.17(@fullcalendar/core@6.1.17)
'@fullcalendar/multimonth': 6.1.17(@fullcalendar/core@6.1.17)
'@fullcalendar/timegrid': 6.1.17(@fullcalendar/core@6.1.17)
function-bind@1.1.2: {}
fuse.js@7.1.0: {}
@@ -5174,11 +5251,12 @@ snapshots:
dependencies:
mimic-fn: 2.1.0
oniguruma-parser@0.12.1: {}
oniguruma-parser@0.11.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
preact@10.12.1: {}
preact@10.26.5: {}
prettier@2.8.8: {}
@@ -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

View File

@@ -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",

View File

@@ -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>

View File

@@ -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"

View File

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

View File

@@ -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 %}