From 68cbaf603d2d2f9a94238b958e86a9e4f2c04435 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torben=20B=C3=B6hnke?=
<torben.boehnke-makerspace@ruhr-uni-bochum.de>
Date: Thu, 7 Sep 2023 17:43:07 +0200
Subject: [PATCH] Kalender-Demo Update
---
docs/javascripts/colorswitchcalendar2.js | 2 +-
docs/javascripts/ics_calendar2.js | 144 ++++++++++++++++++-----
2 files changed, 115 insertions(+), 31 deletions(-)
diff --git a/docs/javascripts/colorswitchcalendar2.js b/docs/javascripts/colorswitchcalendar2.js
index 9866f72bb..9b24ac92c 100644
--- a/docs/javascripts/colorswitchcalendar2.js
+++ b/docs/javascripts/colorswitchcalendar2.js
@@ -7,7 +7,7 @@ window.addEventListener('load', function() {
if (palette && palette.index === 1) {
iframe.src = "../calendar_dark2.html";
} else {
- iframe.src = "../calendar.html2";
+ iframe.src = "../calendar2.html";
}
}, 100); // delay of 100 milliseconds
};
diff --git a/docs/javascripts/ics_calendar2.js b/docs/javascripts/ics_calendar2.js
index 9cba8521d..a1c49d40f 100644
--- a/docs/javascripts/ics_calendar2.js
+++ b/docs/javascripts/ics_calendar2.js
@@ -1,13 +1,6 @@
-let showPastEvents = false;
+var showPastEvents = false;
// Load iCalendar data
-function adjustHeight() {
- setTimeout(function() {
- var calendarHeight = document.getElementById('calendar').offsetHeight;
- window.parent.postMessage({ height: calendarHeight }, '*');
- }, 200); // wait for x milliseconds before measuring
-}
-
window.addEventListener('message', function(event) {
adjustHeight();
}, false);
@@ -57,35 +50,24 @@ fetchAndParseICS()
initialView: initialViewType,
customButtons: {
togglePastEvents: {
- text: 'Toggle Past Events',
- click: function() {
- showPastEvents = !showPastEvents;
- var view = calendar.view;
- var displayStyle = view.type.includes('list') ? 'table-row' : 'block';
- var pastEvents = document.querySelectorAll('.past-event');
- pastEvents.forEach(function(eventEl) {
- eventEl.style.display = showPastEvents ? displayStyle : 'none';
- });
- if (view.type.includes('list')) {
- var pastDays = document.querySelectorAll('.fc-day-past');
- pastDays.forEach(function(dayEl) {
- dayEl.style.display = showPastEvents ? 'table-row' : 'none';
- });
- }
- adjustHeight();
+ text: 'Zeige/Verstecke vergangene Termine',
+ click: function() {
+ showPastEvents = !showPastEvents;
+ handlePastEventsVisibility();
+ }
}
- }
},
headerToolbar: {
- start: 'prev,next,today,togglePastEvents',
+ start: 'prev,next,today',
center: 'title',
- end: 'dayGridMonth,timeGridWeek,timeGridDay,listYear'
+ end: 'dayGridMonth,listYear'
+ },
+ footerToolbar: {
+ start: 'togglePastEvents'
},
views: {
- dayGridMonth: { buttonText: 'Monat'},
+ dayGridMonth: { buttonText: 'Kalender'},
listYear: { buttonText: 'Liste' },
- timeGridDay: { buttonText: 'Tag' },
- timeGridWeek: { buttonText: 'Woche' },
},
contentHeight: "auto",
events: calendarEvents,
@@ -110,6 +92,7 @@ fetchAndParseICS()
eventDidMount: function(info) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(adjustHeight, 200);
+ handlePastEventsVisibility();
},
eventWillUnmount: function() {
@@ -132,5 +115,106 @@ fetchAndParseICS()
calendar.render();
+
+ function getWeekNumber(d) {
+ // Copy date so we don't modify the original
+ d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+ // Set to nearest Thursday: current date + 4 - current day number
+ d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+ // Get first day of the year
+ var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+ // Calculate full weeks to nearest Thursday
+ var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
+ return weekNo;
+ }
+
+ function weeks(startDate, endDate) {
+ var startWeek = getWeekNumber(startDate);
+ var endWeek = getWeekNumber(endDate);
+ return (endWeek - startWeek) + 1;
+ }
+
+ function getVisibleMultiDayEvents(calendarInstance, showPastEvents) {
+ var view = calendarInstance.view;
+ var visibleRangeStart = view.activeStart;
+ var visibleRangeEnd = view.activeEnd;
+ var currentDate = new Date(); // Current date
+
+ var allEvents = calendarInstance.getEvents();
+ var trulyVisibleEvents = allEvents.filter(function(event) {
+ // If showing past events, or the event end date is in the future
+ var isEventRelevant = showPastEvents || (event.end || event.start) >= currentDate;
+
+ // Check if the event is within the visible range and is relevant
+ return event.start < visibleRangeEnd && (event.end || event.start) > visibleRangeStart && isEventRelevant;
+ });
+
+ var multiDayEvents = trulyVisibleEvents.filter(function(event) {
+ var start = event.start;
+ var end = event.end || start;
+ return (end.getTime() - start.getTime()) > 86400000;
+ });
+
+ return multiDayEvents;
+ }
+
+ function getMultiDayEventsAdditionalHeight(calendarInstance) {
+ var additionalHeight = 0;
+ var multiDayEventHeight = 24.6; // As given by you
+
+ var multiDayEvents = getVisibleMultiDayEvents(calendar, showPastEvents); // You'll need to implement this function
+
+ for (var event of multiDayEvents) {
+ var startDate = event.start;
+ var endDate = event.end;
+
+ // Calculate the number of weeks this event spans
+ var weeksSpanned = weeks(startDate, endDate); // Convert difference to weeks
+
+ additionalHeight += weeksSpanned * multiDayEventHeight;
+ }
+ console.log("additionalHeight: ", additionalHeight);
+ return additionalHeight;
+ }
+
+ function adjustHeight() {
+ setTimeout(function() {
+ var calendarHeight = document.getElementById('calendar').offsetHeight;
+ var additionalHeight = getMultiDayEventsAdditionalHeight(calendar);
+
+ calendarHeight += additionalHeight;
+
+ window.parent.postMessage({ height: calendarHeight }, '*');
+ }, 200); // wait for x milliseconds before measuring
+ }
+
+ // Show/Hide past events
+ function handlePastEventsVisibility() {
+ var view = calendar.view;
+ var displayStyle = view.type.includes('list') ? 'table-row' : 'block';
+ var pastEvents = document.querySelectorAll('.past-event');
+ pastEvents.forEach(function(eventEl) {
+ eventEl.style.display = showPastEvents ? displayStyle : 'none';
+ });
+ if (view.type.includes('list')) {
+ var pastDays = document.querySelectorAll('.fc-day-past');
+ pastDays.forEach(function(dayEl) {
+ dayEl.style.display = showPastEvents ? 'table-row' : 'none';
+ });
+ }
+ adjustHeight();
+ var visibleEvents = calendar.getEvents();
+ console.log("All visible events:", visibleEvents);
+ var multiDayEvents = visibleEvents.filter(function(event) {
+ var start = event.start;
+ var end = event.end || start;
+ return (end.getTime() - start.getTime()) > 86400000;
+ });
+ console.log("Filtered multi-day events:", multiDayEvents);
+
+ }
+
adjustHeight();
});
+
+
--
GitLab