Vue3组合式API中Full Calendar在Quasar Dialog初始渲染异常求助

问题根源是Quasar Dialog初始处于隐藏状态，FullCalendar初始化时无法正确计算容器尺寸，导致布局错乱；切换月份会触发组件重绘，尺寸计算恢复正常。

解决方案：Dialog显示后触发FullCalendar重渲染 #

1. 给FullCalendar组件添加ref以获取实例
2. 监听Quasar Dialog的show事件，在事件回调中调用FullCalendar实例的render()方法强制重绘

修改后的代码示例：

<template>
  <!-- 外层Quasar Dialog组件 -->
  <q-dialog @show="handleDialogShow">
    <FullCalendar ref="calendarRef" :options="calendar" />
  </q-dialog>
</template>

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

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

const handleDialogShow = () => {
  // 等待Dialog完成DOM渲染后执行重绘
  nextTick(() => {
    const calendarInstance = calendarRef.value?.getApi();
    calendarInstance?.render();
  });
};
</script>

补充说明 #

• 使用nextTick是为了确保Dialog已经完成渲染、容器尺寸确定，此时调用render()才能正确计算布局
• 若通过Quasar的useDialog组合式API调用弹窗，可在onShow回调中执行同样的重绘逻辑

内容的提问来源于stack exchange，提问作者Samuel L.