Vue.js集成FullCalendar页面刷新后渲染异常问题求助

问题分析 #

页面刷新或路由切换后，FullCalendar内容压缩在左上角、DOM元素宽高为0，本质是日历初始化时父容器尺寸未正确计算，导致FullCalendar基于错误的容器尺寸渲染。mounted钩子中调用updateSize无效，是因为此时父容器可能仍未完成渲染或尺寸尚未稳定。

解决方案 #

方案1：给父容器设置明确尺寸 #

给FullCalendar的父容器指定固定或最小宽高，确保日历初始化时能获取到有效尺寸：

<template>
  <!-- 给父容器设置明确的宽高 -->
  <div style="width: 100%; min-height: 600px;">
    <FullCalendar ref="fullCalendar" :options="calendarOptions" />
  </div>
</template>

方案2：延迟触发尺寸更新 #

通过setTimeout给DOM渲染留足时间，避免nextTick仍未完成父容器尺寸计算：
修改calendar.vue的mounted钩子：

mounted() {
  this.$nextTick(() => {
    // 延迟100ms触发，确保父容器尺寸稳定
    setTimeout(() => {
      this.updateCalendarSize();
    }, 100);
  });
}

如果是路由切换导致的问题，可新增路由监听：

watch: {
  '$route': {
    immediate: true,
    handler() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.updateCalendarSize();
        }, 100);
      });
    }
  }
}

方案3：监听父容器尺寸变化再初始化日历 #

使用ResizeObserver监听父容器尺寸，确保容器有有效尺寸后再渲染日历：

<template>
  <div ref="calendarContainer">
    <FullCalendar v-if="isContainerReady" ref="fullCalendar" :options="calendarOptions" />
  </div>
</template>

<script>
// ... 其他导入代码
export default {
  components: { FullCalendar },
  data() {
    return {
      isContainerReady: false,
      calendarOptions: { /* ... 你的配置 ... */ }
    }
  },
  mounted() {
    const container = this.$refs.calendarContainer;
    const observer = new ResizeObserver(() => {
      if (container.offsetWidth > 0 && container.offsetHeight > 0) {
        this.isContainerReady = true;
        this.$nextTick(() => {
          this.updateCalendarSize();
        });
        observer.disconnect(); // 监听一次后断开
      }
    });
    observer.observe(container);
  },
  // ... 其他methods代码
}
</script>

方案4：修改FullCalendar高度配置 #

将height: 'auto'改为固定值或百分比，同时确保父容器有对应尺寸：

data() {
  return {
    calendarOptions: {
      // ... 其他配置
      height: '100%', // 替换原有的auto
      // ... 其他配置
    }
  }
}

父容器同步设置高度：

<template>
  <div style="height: 600px; width: 100%;">
    <FullCalendar ref="fullCalendar" :options="calendarOptions" />
  </div>
</template>

内容的提问来源于stack exchange，提问作者dennis_10-33