如何在FullCalendar v5中向存在事件的单元格前置/追加按钮且保留原有事件内容？

根据你的需求，分两种场景给出对应的实现方式：

场景1：给有事件的日期单元格添加按钮（每个单元格仅一次） #

你之前用eventDidMount的问题在于每个事件都会触发该钩子，导致同一个单元格出现多个按钮。换成dayCellDidMount钩子就能解决——它每个日期单元格仅渲染一次，不管里面有多少事件。

代码示例：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
      // 这里填入你的事件数据
    ],
    dayCellDidMount: function(arg) {
      // 获取当前日期的所有事件，判断是否需要添加按钮
      const dayEvents = calendar.getEventsForDay(arg.date);
      if (dayEvents.length > 0) {
        const dayTopContainer = arg.el.querySelector('.fc-daygrid-day-top');
        if (dayTopContainer) {
          // 前置按钮
          const prependBtn = document.createElement('button');
          prependBtn.className = 'button button-secondary button-small';
          prependBtn.textContent = 'Add';
          dayTopContainer.prepend(prependBtn);

          // 追加按钮
          const appendBtn = document.createElement('button');
          appendBtn.className = 'button button-secondary button-small';
          appendBtn.textContent = 'Add';
          dayTopContainer.append(appendBtn);
        }
      }
    }
  });
  calendar.render();
});

关键说明： #

• dayCellDidMount在每个日期单元格渲染完成后触发一次，避免重复添加按钮
• 通过calendar.getEventsForDay(arg.date)判断当前日期是否有事件，只给有事件的单元格添加按钮
• 操作.fc-daygrid-day-top元素来放置按钮，和你之前的逻辑一致，但不会重复执行

场景2：给每个事件的内容前后添加按钮（每个事件带按钮） #

如果你的需求是给单个事件的内容前后加按钮（而非整个单元格），可以用eventContent钩子，但要记得调用renderDefaultContent()保留原有事件内容，而不是完全替换：

代码示例：

eventContent: function(arg) {
  // 创建前置按钮
  const prependBtn = document.createElement('button');
  prependBtn.className = 'button button-secondary button-small';
  prependBtn.textContent = 'Prepend';

  // 创建后置按钮
  const appendBtn = document.createElement('button');
  appendBtn.className = 'button button-secondary button-small';
  appendBtn.textContent = 'Append';

  // 获取FullCalendar默认渲染的事件内容
  const defaultEventContent = arg.renderDefaultContent();

  // 组合按钮和默认内容
  const contentContainer = document.createElement('div');
  contentContainer.appendChild(prependBtn);
  contentContainer.appendChild(defaultEventContent);
  contentContainer.appendChild(appendBtn);

  return { domNodes: [contentContainer] };
}

关键说明： #

• renderDefaultContent()方法会生成FullCalendar原本要渲染的事件DOM节点，这样你就能在保留原有样式和内容的基础上添加自定义元素
• 把按钮和默认内容放在同一个容器里返回，既不会替换原有内容，又能实现追加/前置按钮的需求

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