Update fullcalendarIO and remove jQuery dependency

lochmueller · Mar 18, 2024 · 8324e36 · 8324e36
1 parent 562bc83
commit 8324e36
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 36 deletions.
diff --git a/Configuration/TypoScript/setup.typoscript b/Configuration/TypoScript/setup.typoscript
@@ -80,30 +80,22 @@ plugin {
 ["{$plugin.tx_calendarize.settings.useMomentFullCalendarIo}" == "1"]
   page {
     includeCSS {
-      fullCalendar = https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css
+      fullCalendar = https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.5/main.min.css
       fullCalendar {
         external = 1
         disableCompression = 1
         forceOnTop = 1
       }
-
-      fullCalendarPrint = https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.print.min.css
-      fullCalendarPrint {
-        external = 1
-        media = print
-        disableCompression = 1
-        forceOnTop = 1
-      }
     }
 
     includeJSFooter {
-      fullCalendar = https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js
+      fullCalendar = https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.5/main.min.js
       fullCalendar {
         external = 1
         disableCompression = 1
         excludeFromConcatenation = 1
       }
-      fullCalendarLanguage = https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/locale-all.js
+      fullCalendarLanguage = https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.5/locales-all.min.js
       fullCalendarLanguage {
         external = 1
         disableCompression = 1

diff --git a/Resources/Private/Partials/Month.html b/Resources/Private/Partials/Month.html
@@ -67,7 +67,7 @@
 </table>
 
 <f:if condition="{settings.useMomentFullCalendarIo}">
-	<div class="fullCalendarIo" data-language="{c:language()}">&nbsp;</div>
+	<div id="fullCalendarIo" class="fullCalendarIo" data-language="{c:language()}">&nbsp;</div>
 
 	<script type="text/javascript">
 		let monthEvents = [];

diff --git a/Resources/Public/JavaScript/FullCalendar.js b/Resources/Public/JavaScript/FullCalendar.js
@@ -1,25 +1,22 @@
-if (window.jQuery) {
-	jQuery(function () {
-		let $monthCalendar = jQuery('.fullCalendarIo');
-		if ($monthCalendar.length && typeof monthEvents != 'undefined') {
-			monthFirstDay = parseInt(monthFirstDay, 10);
-			if (monthFirstDay == 7) {
-				monthFirstDay = 0;
-			}
+document.addEventListener('DOMContentLoaded', function () {
+  let calendarEl = document.getElementById('fullCalendarIo');
+  if (calendarEl && typeof monthEvents != 'undefined') {
+    let divsToHide = document.getElementsByClassName("regularMonthView");
+    for (let i = 0; i < divsToHide.length; i++) {
+      divsToHide[i].style.visibility = "hidden"; // or
+      divsToHide[i].style.display = "none"; // depending on what you're doing
+    }
 
-			let language = $monthCalendar.first().attr('data-language');
-			if (typeof language == typeof undefined || language == false) {
-				language = "en";
-			}
-			jQuery('.regularMonthView').hide();
-			$monthCalendar.fullCalendar({
-				locale: language, firstDay: monthFirstDay, header: {
-					left: '', center: '', right: ''
-				}, defaultDate: monthEventsCurrentDate, events: monthEvents
-			});
-		}
-
-	});
-} else {
-	alert('The Moment.js function of the calendarize need jQuery!');
-}
+    let language = calendarEl.getAttribute('data-language');
+    if (typeof language === typeof undefined || language === false) {
+      let language = "en";
+    }
+    let calendar = new FullCalendar.Calendar(calendarEl, {
+      initialView: 'dayGridMonth',
+      locale: language,
+      firstDay: monthFirstDay,
+      events: monthEvents
+    });
+    calendar.render();
+  }
+});