feat: enhance calendar functionality with dayGrid and timeGrid plugins

This commit is contained in:
2026-05-30 14:00:56 +02:00
parent ef2d1dfab0
commit 3fd00aec30
+8 -5
View File
@@ -172,6 +172,8 @@
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/daygrid/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/timegrid/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales/de.js"></script> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales/de.js"></script>
<script> <script>
@@ -252,6 +254,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Initialize calendar // Initialize calendar
calendar = new FullCalendar.Calendar(calendarEl, { calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [FullCalendar.dayGridPlugin, FullCalendar.timeGridPlugin],
initialView: 'timeGridDay', initialView: 'timeGridDay',
locale: 'de', locale: 'de',
headerToolbar: false, // We're using our custom header headerToolbar: false, // We're using our custom header
@@ -428,7 +431,10 @@ document.addEventListener('DOMContentLoaded', function() {
eventClick: function(info) { eventClick: function(info) {
showEventDetails(info.event); showEventDetails(info.event);
}, },
datesSet: function(dateInfo) { datesSet: function() {
updateCurrentDayDisplay();
}
});
function setCalendarView(viewName) { function setCalendarView(viewName) {
activeCalendarView = viewName; activeCalendarView = viewName;
@@ -442,15 +448,12 @@ document.addEventListener('DOMContentLoaded', function() {
button.addEventListener('click', function() { button.addEventListener('click', function() {
setCalendarView(this.dataset.calendarView); setCalendarView(this.dataset.calendarView);
}); });
});
updateCurrentDayDisplay();
}
setCalendarView(activeCalendarView);
}); });
// Render calendar // Render calendar
try { try {
calendar.render(); calendar.render();
setCalendarView(activeCalendarView);
setTimeout(() => { setTimeout(() => {
calendar.updateSize(); calendar.updateSize();