Revert "fix: delay initializing the resize observer until FC is ready"

This reverts commit a40a200.

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

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>