基于VanillaCalendar的JSON事件日历标记渲染问题求助

1. 遍历JSON数据的错误修正 #

原代码遍历层级冗余，且未正确匹配日历节点的选择器：

• 日历的data-calendar-day属性挂载在button元素上，原代码的选择逻辑未精准定位到该元素；
• JSON数据的遍历可以简化，无需多层嵌套循环。

修正后的遍历代码：

function renderEvents() {
  // 清空已有事件标记，避免重复添加
  document.querySelectorAll('.event-wrapper').forEach(el => el.remove());

  eventData.forEach(entry => {
    Object.entries(entry).forEach(([month, days]) => {
      days.forEach(dayObj => {
        Object.entries(dayObj).forEach(([date, events]) => {
          // 精准定位对应日期的按钮元素
          const dayBtn = document.querySelector(`button[data-calendar-day="${date}"]`);
          if (!dayBtn) return; // 找不到则跳过当前日期

          // 创建事件容器
          const eventWrapper = document.createElement('div');
          eventWrapper.classList.add('event-wrapper');
          
          // 遍历当前日期的所有事件
          events.forEach(eventItem => {
            Object.values(eventItem).forEach(details => {
              details.forEach(event => {
                const singleEvent = document.createElement('div');
                singleEvent.classList.add('event', event.category);
                eventWrapper.appendChild(singleEvent);
              });
            });
          });

          // 将事件容器插入到日期按钮内
          dayBtn.appendChild(eventWrapper);
        });
      });
    });
  });
}

2. 解决切换月份事件消失的问题 #

VanillaCalendar切换月份时会重新渲染DOM，因此需要借助日历的回调函数，在初始化和月份切换后重新渲染事件：

const calendar = new VanillaCalendar({
  // 保留你的原有配置项
  onInit: function() {
    // 日历初始化完成后渲染事件
    renderEvents();
  },
  onMonthChange: function() {
    // 月份切换后重新渲染事件
    renderEvents();
  }
});

3. 样式适配（可选） #

为确保事件标记正常显示，添加基础样式：

.vanilla-calendar-day__btn {
  position: relative;
  padding-top: 22px; /* 为事件标记预留顶部空间 */
}

.event-wrapper {
  display: flex;
  gap: 3px;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.event {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* 不同类别事件的颜色示例 */
.event.meeting { background-color: #2196F3; }
.event.task { background-color: #4CAF50; }
.event.holiday { background-color: #FF9800; }

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