#5938 -- Fix Fullcalendar render.

frontend/vue/components/Common/ScheduleView.vue

@@ -2,67 +2,63 @@
     <full-calendar ref="calendar" :options="calendarOptions"></full-calendar>
 </template>
 
-<script>
+<script setup>
 import '@fullcalendar/core/vdom';
 import FullCalendar from '@fullcalendar/vue3';
 import allLocales from '@fullcalendar/core/locales-all';
 import luxon2Plugin from '@fullcalendar/luxon2';
 import timeGridPlugin from '@fullcalendar/timegrid';
+import {shallowRef} from "vue";
 
-export default {
+const props = defineProps({
-    name: 'Schedule',
+    scheduleUrl: String,
-    components: {FullCalendar},
+    stationTimeZone: String
-    props: {
+});
-        scheduleUrl: String,
-        stationTimeZone: String
-    },
-    data() {
-        return {
-            calendarOptions: {
-                locale: App.locale_short,
-                locales: allLocales,
-                plugins: [luxon2Plugin, timeGridPlugin],
-                initialView: 'timeGridWeek',
-                timeZone: this.stationTimeZone,
-                themeSystem: 'bootstrap',
-                nowIndicator: true,
-                defaultTimedEventDuration: '00:20',
-                headerToolbar: false,
-                footerToolbar: false,
-                height: 'auto',
-                events: this.scheduleUrl,
-                eventClick: this.onEventClick,
-                eventDidMount: this.onEventDidMount,
-                views: {
-                    timeGridWeek: {
-                        slotLabelFormat: {
-                            ...App.time_config,
-                            hour: 'numeric',
-                            minute: '2-digit',
-                            omitZeroMinute: true,
-                            meridiem: 'short'
-                        }
-                    }
-                }
-            }
-        };
-    },
-    methods: {
-        refresh() {
 
-        },
+const emit = defineEmits(['click']);
-        onEventDidMount(info) {
+
-            $(info.el).tooltip({
+const onEventDidMount = (info) => {
-                title: info.event.extendedProps.description,
+    let desc = info?.event?.extendedProps?.description || null;
-                placement: 'top',
+    if (desc !== null) {
-                trigger: 'hover',
+        $(info.el).tooltip({
-                container: 'body',
+            title: desc,
-                offset: 0
+            placement: 'top',
-            });
+            trigger: 'hover',
-        },
+            container: 'body',
-        onEventClick(arg) {
+            offset: 0
-            this.$emit('click', arg.event);
+        });
-        }
     }
 };
+
+const onEventClick = (arg) => {
+    emit('click', arg.event);
+};
+
+const calendarOptions = shallowRef({
+    locale: App.locale_short,
+    locales: allLocales,
+    plugins: [luxon2Plugin, timeGridPlugin],
+    initialView: 'timeGridWeek',
+    timeZone: props.stationTimeZone,
+    themeSystem: 'bootstrap',
+    nowIndicator: true,
+    defaultTimedEventDuration: '00:20',
+    headerToolbar: false,
+    footerToolbar: false,
+    height: 'auto',
+    events: props.scheduleUrl,
+    eventClick: onEventClick,
+    eventDidMount: onEventDidMount,
+    views: {
+        timeGridWeek: {
+            slotLabelFormat: {
+                ...App.time_config,
+                hour: 'numeric',
+                minute: '2-digit',
+                omitZeroMinute: true,
+                meridiem: 'short'
+            }
+        }
+    }
+});
 </script>