Full Calendar Component did not render properly on Dialog

Samuel L. 0
Viewed 32

Using Full Calendar in Vue3 Composition. When using the calendar component in quasar dialog, the initial rendering is incorrect, but after going to the prev/next month, the render turns out fine.

enter image description here

<template>
  <FullCalendar :options="calendar" />
</template>

<script setup lang="ts">
import '@fullcalendar/core/vdom'; // solves problem with Vite
import FullCalendar, { CalendarOptions } from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { ref } from 'vue';

const calendar = ref<CalendarOptions>({
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: 'dayGridMonth',
  buttonText: {
    today: 'Today',
  },
  events: currentEvents,
  displayEventTime: false,
});

Please assist me on this.

quasar-framework fullcalendar vue.js
1 Answers

Apparently you have use dispatchEvent to resize the window when onMounted, however this solution will have a certain delay once the calendar is loaded in.

onMounted(() => {
  setTimeout(function () {
    window.dispatchEvent(new Event('resize'));
  }, 1);
});
Samuel L.0
Related