From 209bb44eec28e3ff77dc1d15bda3f6023b3269e4 Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Fri, 10 May 2024 14:08:07 +0200
Subject: [PATCH 1/2] fix: navigation when clicking on the grid on a custom
 week/month

I converted the FullCalendar options to a computed prop again. It still
works in private and public widgets. I assume this was just an oversight.
This also means that we can get rid of some reactivity hacks again as
the computed prop is now properly reactive again.

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 src/components/CalendarGrid.vue | 27 ++++-----------------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/src/components/CalendarGrid.vue b/src/components/CalendarGrid.vue
index b98802730..7b739b7fb 100644
--- a/src/components/CalendarGrid.vue
+++ b/src/components/CalendarGrid.vue
@@ -22,10 +22,10 @@
   -->
 
 <template>
-	<FullCalendar v-if="calendarOptions"
+	<FullCalendar v-if="options"
 		ref="fullCalendar"
 		:class="isWidget? 'fullcalendar-widget': ''"
-		:options="calendarOptions" />
+		:options="options" />
 </template>
 
 <script>
@@ -94,7 +94,6 @@ export default {
 		return {
 			updateTodayJob: null,
 			updateTodayJobPreviousDate: null,
-			calendarOptions: null,
 			fullCalendarReady: false,
 		}
 	},
@@ -208,28 +207,12 @@ export default {
 			const calendarApi = this.$refs.fullCalendar.getApi()
 			calendarApi.gotoDate(getYYYYMMDDFromFirstdayParam(newDate))
 		},
-		eventSources(sources, oldSources) {
-			const newSources = sources.filter(source => !oldSources.map(oldSource => oldSource.id).includes(source.id))
-			const removedSources = oldSources.filter(oldSource => !sources.map(source => source.id).includes(oldSource.id))
-
-			// Hackity hack! Unfortunately, calendarOptions.eventSources is not reactive ...
-			// Ref https://fullcalendar.io/docs/Calendar-addEventSource
-			// TODO: Find a better/safer way to prevent duplicated event sources
-			const calendarApi = this.$refs.fullCalendar.getApi()
-			for (const source of newSources) {
-				calendarApi.addEventSource(source)
-			}
-			const eventSources = calendarApi.getEventSources()
-			for (const source of removedSources) {
-				eventSources.find(x => x.id === source.id)?.remove()
-			}
-		},
 		modificationCount: debounce(function() {
 			const calendarApi = this.$refs.fullCalendar.getApi()
 			calendarApi.refetchEvents()
 		}, 50),
-		async calendarOptions(newOptions, oldOptions) {
-			if (!this.fullCalendarReady && newOptions && !oldOptions) {
+		async options(newOptions) {
+			if (!this.fullCalendarReady && newOptions) {
 				this.fullCalendarReady = true
 				// Wait until the component is mounted and the ref is available
 				await this.$nextTick()
@@ -238,8 +221,6 @@ export default {
 		},
 	},
 	async created() {
-		this.calendarOptions = await this.options
-
 		this.updateTodayJob = setInterval(() => {
 			const newDate = getYYYYMMDDFromFirstdayParam('now')
 

From a633a5a0ad440a83db7706ae3634faa53c277c17 Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Fri, 10 May 2024 14:24:44 +0200
Subject: [PATCH 2/2] Revert "fix: delay initializing the resize observer until
 FC is ready"

This reverts commit a40a20006302649140fb952a827a3095646fc521.

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 src/components/CalendarGrid.vue | 67 +++++++++++++--------------------
 1 file changed, 26 insertions(+), 41 deletions(-)

diff --git a/src/components/CalendarGrid.vue b/src/components/CalendarGrid.vue
index 7b739b7fb..2e5403d1d 100644
--- a/src/components/CalendarGrid.vue
+++ b/src/components/CalendarGrid.vue
@@ -22,8 +22,7 @@
   -->
 
 <template>
-	<FullCalendar v-if="options"
-		ref="fullCalendar"
+	<FullCalendar ref="fullCalendar"
 		:class="isWidget? 'fullcalendar-widget': ''"
 		:options="options" />
 </template>
@@ -94,7 +93,6 @@ export default {
 		return {
 			updateTodayJob: null,
 			updateTodayJobPreviousDate: null,
-			fullCalendarReady: false,
 		}
 	},
 	computed: {
@@ -211,14 +209,31 @@ export default {
 			const calendarApi = this.$refs.fullCalendar.getApi()
 			calendarApi.refetchEvents()
 		}, 50),
-		async options(newOptions) {
-			if (!this.fullCalendarReady && newOptions) {
-				this.fullCalendarReady = true
-				// Wait until the component is mounted and the ref is available
-				await this.$nextTick()
-				this.onFullCalendarReady()
-			}
-		},
+	},
+	/**
+	 * FullCalendar 5 is using calculated px values for the width
+	 * of its views.
+	 * Hence a simple `width: 100%` won't assure that the calendar-grid
+	 * is always using the full available width.
+	 *
+	 * Toggling the AppNavigation or AppSidebar will change the amount
+	 * of available space, but it will not be covered by the window
+	 * resize event, because the actual window size did not change.
+	 *
+	 * To make sure, that the calendar-grid is always using all space,
+	 * we have to register a resize-observer here, that will automatically
+	 * update the fullCalendar size, when the available space changes.
+	 */
+	 mounted() {
+		if (window.ResizeObserver) {
+			const resizeObserver = new ResizeObserver(debounce(() => {
+				this.$refs.fullCalendar
+					.getApi()
+					.updateSize()
+			}, 100))
+
+			resizeObserver.observe(this.$refs.fullCalendar.$el)
+		}
 	},
 	async created() {
 		this.updateTodayJob = setInterval(() => {
@@ -290,36 +305,6 @@ export default {
 				this.$store.dispatch('setInitialView', { initialView })
 			}
 		}, 5000),
-
-		/**
-		 * Called once when FullCalendar is ready. This event is delayed until the component is
-		 * mounted and its ref is available.
-		 */
-		onFullCalendarReady() {
-			/**
-			 * FullCalendar 5 is using calculated px values for the width
-			 * of its views.
-			 * Hence a simple `width: 100%` won't assure that the calendar-grid
-			 * is always using the full available width.
-			 *
-			 * Toggling the AppNavigation or AppSidebar will change the amount
-			 * of available space, but it will not be covered by the window
-			 * resize event, because the actual window size did not change.
-			 *
-			 * To make sure, that the calendar-grid is always using all space,
-			 * we have to register a resize-observer here, that will automatically
-			 * update the fullCalendar size, when the available space changes.
-			 */
-			if (window.ResizeObserver) {
-				const resizeObserver = new ResizeObserver(debounce(() => {
-					this.$refs.fullCalendar
-						.getApi()
-						.updateSize()
-				}, 100))
-
-				resizeObserver.observe(this.$refs.fullCalendar.$el)
-			}
-		},
 	},
 }
 </script>