Nuxt3中FullCalendar动态事件不显示问题求助

你当前的问题是：calendarOptions是普通对象，初始化时events被赋值为upcomingEventData.value（空数组），后续upcomingEventData响应式更新时，calendarOptions.events不会同步变化，FullCalendar无法感知到数据更新，因此事件无法显示。

另外还有两个细节问题：

1. dateClick: handleDateClick()会在初始化时立即执行函数，而非点击日期时触发，应去掉括号
2. 自定义的type属性需要放在extendedProps对象中，否则无法通过arg.event.extendedProps.type获取

方案1：将calendarOptions转为响应式对象 #

把calendarOptions用ref包裹，使其成为响应式对象，并直接绑定upcomingEventData：

const upcomingEventData = ref([]);

// 用ref包裹calendarOptions，使其响应式
const calendarOptions = ref({
  ...FullCalendar.options,
  initialView: "dayGridMonth",
  dateClick: handleDateClick, // 修正：去掉括号，绑定函数引用
  dayHeaderContent: function (arg) {
    return arg.text.toUpperCase();
  },
  events: upcomingEventData, // 直接绑定响应式变量
  eventColor: "#FFFFFF",
  eventChange: function (arg) {
    console.log('Data--> ' , arg);
  },
  headerToolbar: {
    start: "today prev,next", 
    center: "title",
    end: "dayGridMonth,dayGridWeek,dayGridDay",
  },
  buttonText: {
    today: "Today",
    month: "Month",
    week: "Week",
    day: "Day",
    list: "List",
  },
  buttonIcons: {
    prev: "chevron-left",
    next: "chevron-right",
    prevYear: "chevrons-left",
    nextYear: "chevrons-right",
  },
});

// 数据请求逻辑不变，注意调整事件对象结构
const getEventData = async () => {
  const { data, error } = await useGetQuery("event/get");
  if (error.value) {
    useErrorHandling(error.value);
    return;
  }
  if (data.value) {
    let response = data.value.data;
    upcomingEventData.value = response.data.map(element => ({
      title: element.eventTitle,
      date: formatDate(new Date(element.eventDate), "YYYY-MM-DD"),
      extendedProps: { // 将type放入extendedProps
        type: "success"
      }
    }));
  }
};

onMounted(() => {
  getEventData();
});

方案2：通过日历实例手动更新事件 #

适合需要手动控制刷新时机的场景，步骤如下：

1. 给FullCalendar添加ref：

<FullCalendar ref="calendarRef" :options="calendarOptions">
   <template v-slot:eventContent="arg">
      <el-tag :type="arg.event.extendedProps.type" size="large">
       {{arg.event.title}}
      </el-tag>
   </template>
</FullCalendar>

2. 在JS中获取日历实例并更新事件：

const upcomingEventData = ref([]);
const calendarRef = ref(null); // 定义日历实例ref

const calendarOptions = {
  ...FullCalendar.options,
  initialView: "dayGridMonth",
  dateClick: handleDateClick, // 修正：去掉括号
  dayHeaderContent: function (arg) {
    return arg.text.toUpperCase();
  },
  events: [], // 初始为空数组
  eventColor: "#FFFFFF",
  eventChange: function (arg) {
    console.log('Data--> ' , arg);
  },
  // 其余配置保持不变
};

const getEventData = async () => {
  const { data, error } = await useGetQuery("event/get");
  if (error.value) {
    useErrorHandling(error.value);
    return;
  }
  if (data.value) {
    let response = data.value.data;
    const newEvents = response.data.map(element => ({
      title: element.eventTitle,
      date: formatDate(new Date(element.eventDate), "YYYY-MM-DD"),
      extendedProps: {
        type: "success"
      }
    }));
    upcomingEventData.value = newEvents;
    
    // 获取日历API实例并更新事件
    const calendarApi = calendarRef.value?.getApi();
    if (calendarApi) {
      calendarApi.removeAllEvents(); // 清除旧事件
      calendarApi.addEvents(newEvents); // 添加新事件
    }
  }
};

onMounted(() => {
  getEventData();
});

方案3：使用函数式事件源 #

将events配置为函数，让FullCalendar在需要数据时自动获取，结合手动刷新：

const upcomingEventData = ref([]);
const calendarRef = ref(null);

const calendarOptions = {
  ...FullCalendar.options,
  // 其余配置保持不变
  events: function(info, successCallback) {
    // 每次需要数据时返回最新的事件列表
    successCallback(upcomingEventData.value);
  },
};

const getEventData = async () => {
  // 数据处理逻辑同方案2
  const newEvents = response.data.map(element => ({
    title: element.eventTitle,
    date: formatDate(new Date(element.eventDate), "YYYY-MM-DD"),
    extendedProps: {
      type: "success"
    }
  }));
  upcomingEventData.value = newEvents;
  
  // 触发日历重新获取事件
  const calendarApi = calendarRef.value?.getApi();
  if (calendarApi) {
    calendarApi.refetchEvents();
  }
};

内容的提问来源于stack exchange，提问作者Kishan Bhensadadiya