VanillaCalendar切换月份后事件数据消失问题求助

问题根源 #

切换月份时VanillaCalendar会重新渲染整个日历DOM，你之前在DOM加载时添加的活动元素会被新的DOM替换。而clickArrow事件加setTimeout的方式不可靠——延迟时间无法精准匹配日历渲染完成的时机，导致函数执行时新DOM还未生成，或者旧DOM还未被替换。

正确解决方案 #

使用VanillaCalendar官方提供的renderEnd钩子（每次日历渲染完成后触发，包括初始化、切换月份、切换年份等场景），并在分配活动前先清理旧的活动元素，避免重复添加。

步骤1：封装活动分配函数（优化版）

function assignEventsToCalendar() {
  // 先清除所有已存在的活动容器，避免重复渲染
  document.querySelectorAll('.event-wrapper').forEach(el => el.remove());

  for (const { month, days } of eventData) {
    for (const { day, events } of days) {
      // 格式化日期匹配日历的data-calendar-day属性格式
      const key = day.split('-').map(p => p.padStart(2, '0')).join('-');
      const dayElement = document.querySelector(`[data-calendar-day="${key}"]`);
      
      // 只在找到对应日期元素时执行后续操作
      if (!dayElement) continue;

      const eventWrapper = document.createElement("div");
      eventWrapper.classList.add("event-wrapper");
      
      for (const { title, category } of events) {
        const singleEvent = document.createElement("div");
        singleEvent.classList.add("event", category);
        singleEvent.textContent = title; // 可选：显示活动标题
        eventWrapper.append(singleEvent);
      }

      dayElement.append(eventWrapper);
    }
  }
}

步骤2：修改日历初始化配置

把原来的clickArrow事件替换为renderEnd钩子，不需要延迟，直接调用函数：

const calendar = new VanillaCalendar('#calendar', {
  // 你的其他日历配置项...
  renderEnd: function() {
    assignEventsToCalendar();
  }
});

关键优化点 #

• renderEnd钩子：替代不可靠的clickArrow+延迟，确保每次日历DOM渲染完成后再执行活动分配逻辑。
• 清除旧活动：每次执行函数前先移除所有.event-wrapper，避免切换月份后旧活动残留或重复添加。
• 空值判断：添加if (!dayElement) continue，防止找不到日期元素时抛出错误。

内容的提问来源于stack exchange，提问作者cece.dev