fix mod cal after fullcalendar update

4 files changed, 28 insertions, 66 deletions

diff --git a/Zotlabs/Module/Cal.php b/Zotlabs/Module/Cal.php
index 9049fe7d0..70d8aa755 100644
--- a/Zotlabs/Module/Cal.php
+++ b/Zotlabs/Module/Cal.php
@@ -65,13 +65,9 @@ class Cal extends Controller {
 
 		nav_set_selected('Calendar');
 
-		head_add_css('/library/fullcalendar/packages/core/main.min.css');
-		head_add_css('/library/fullcalendar/packages/daygrid/main.min.css');
+		head_add_js('/library/fullcalendar/dist/index.global.js');
 		head_add_css('cdav_calendar.css');
 
-		head_add_js('/library/fullcalendar/packages/core/main.min.js');
-		head_add_js('/library/fullcalendar/packages/daygrid/main.min.js');
-
 		$sql_extra = permissions_sql($channel['channel_id'], get_observer_hash(), 'event');
 
 		if(! perm_is_allowed($channel['channel_id'], get_observer_hash(), 'view_contacts') || App::$profile['hide_friends'])
diff --git a/view/css/mod_cal.css b/view/css/mod_cal.css
index f0b5c0166..702b18bff 100644
--- a/view/css/mod_cal.css
+++ b/view/css/mod_cal.css
@@ -1,51 +1,43 @@
 /* fix borders */
 
-.fc th:first-child,
-.fc td:first-child {
-    border-left-width: 0px;
+:root {
+	--fc-border-color: var(--bs-border-color) !important;
+	--fc-page-bg-color: var(--bs-tertiary-bg) !important;
+	--fc-list-event-hover-bg-color: var(--bs-tertiary-bg) !important;
+	--fc-daygrid-event-dot-width: 1em !important;
+	--fc-list-event-dot-width: 1em !important;
 }
 
-.fc th:last-child,
-.fc td:last-child {
-    border-right-width: 0px;
-    border-bottom-width: 0px;
+.fc .fc-cell-shaded, .fc .fc-day-disabled {
+	background: var(--bs-tertiary-bg) !important;
 }
 
-.fc-unthemed th,
-.fc-unthemed td,
-.fc-unthemed thead,
-.fc-unthemed tbody,
-.fc-unthemed .fc-divider,
-.fc-unthemed .fc-row,
-.fc-unthemed .fc-popover {
-	border-color: #ccc !important;
+.fc-theme-standard td:last-child,
+.fc-theme-standard th:last-child {
+	border-right: 0px !important;
 }
 
-#events-spinner .spinner {
-	margin-top: 9px;
-	margin-bottom: -9px;
+.fc-theme-standard td:last-child {
+	border-bottom: 0px !important;
 }
 
-.bootstrap-tagsinput {
-	width: 100%;
-	padding: 6px 12px;
+.fc-theme-standard .fc-scrollgrid {
+	border: 0px !important;
 }
 
-.event-wrapper,
-.vevent {
-	max-width: 700px;
+.fc-theme-standard .fc-list {
+	border: 0px !important;
 }
 
-.event-owner {
-	padding: 10px;
-}
+.bootstrap-tagsinput {
+	border: 1px solid var(--bs-border-color) !important;
+	margin-bottom: 0px !important;
+	border-radius: var(--bs-border-radius) !important;
+	background-color: var(--bs-body-bg) !important;
+	padding: 0 .75rem !important;
 
-.event-owner img {
-	margin-right: 5px;
 }
 
-.vevent,
-.event-buttons {
-	padding: 10px;
+.bootstrap-tagsinput input {
+	min-width: 30% !important;
 }
-
diff --git a/view/js/mod_cal.js b/view/js/mod_cal.js
deleted file mode 100644
index 5867f676e..000000000
--- a/view/js/mod_cal.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * JavaScript for mod/cal
- */
-
-$(document).ready( function() {
-	$(document).on('click','#fullscreen-btn', on_fullscreen);
-	$(document).on('click','#inline-btn', on_inline);
-});
-
-function on_fullscreen() {
-	var view = $('#events-calendar').fullCalendar('getView');
-	if(view.type === 'month') {
-		$('#events-calendar').fullCalendar('option', 'height', $(window).height() - $('.section-title-wrapper').outerHeight(true) - 2); // -2 is for border width (top and bottom) of .generic-content-wrapper
-	}
-}
-
-function on_inline() {
-	var view = $('#events-calendar').fullCalendar('getView');
-	if(view.type === 'month') {
-		$('#events-calendar').fullCalendar('option', 'height', '');
-	}
-}
diff --git a/view/tpl/cal_calendar.tpl b/view/tpl/cal_calendar.tpl
index a928e98f6..68ec318bd 100644
--- a/view/tpl/cal_calendar.tpl
+++ b/view/tpl/cal_calendar.tpl
@@ -4,7 +4,7 @@ var calendar;
 $(document).ready(function() {
 	var calendarEl = document.getElementById('calendar');
 	calendar = new FullCalendar.Calendar(calendarEl, {
-		plugins: [ 'dayGrid' ],
+
 		eventSources: [ {{$sources}} ],
 
 		timeZone: '{{$timezone}}',
@@ -12,16 +12,12 @@ $(document).ready(function() {
 		locale: '{{$lang}}',
 
 		eventTextColor: 'white',
-		header: false,
+		headerToolbar: false,
 
 		height: 'auto',
 
 		firstDay: {{$first_day}},
 
-		monthNames: aStr['monthNames'],
-		monthNamesShort: aStr['monthNamesShort'],
-		dayNames: aStr['dayNames'],
-		dayNamesShort: aStr['dayNamesShort'],
 		allDayText: aStr['allday'],
 
 		eventClick: function(info) {