FullCalendar v5 listWeek视图下如何为每个事件添加自定义按钮

代码不生效是几个问题叠加导致的：

• 直接改写info.el.innerHTML会覆盖FullCalendar原生渲染的事件DOM，后续日历重绘、视图切换时追加的内容会直接丢失
• listWeek/listDay这类列表视图的事件DOM有固定嵌套层级，直接往根节点info.el塞元素会被原生样式挤错位，甚至直接不可见
• 原代码的资源引入标签有语法错误：引入JS的script标签多写了一个</script>闭合，引入CSS的link标签错用</script>当闭合标签
• 拼接按钮属性时直接传info.start拿到的是Date对象，最终data-date属性值会变成[object Object]，根本拿不到正确时间

别用eventRender拼HTML，换成eventDidMount钩子：等日历把事件原生DOM渲染完成，找到事件标题的容器节点，再往里面追加按钮，完全不会破坏原有交互和样式。
修正后的完整代码如下：

<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css">
  <style>
    /* 可自行调整按钮样式 */
    .dayButton {
      padding: 2px 8px;
      margin-left: 12px;
      cursor: pointer;
    }
  </style>
 </head>
 <body>
  <div id="calendar"></div>
  <script>
    let calendarEl = document.getElementById('calendar');
    let calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'listDay',
      views: {
        listDay: {
          type:'listWeek',
          dayCount:1
        }
      },
      events : [
        // 保留你原有的后端模板渲染逻辑即可
        {% for appointment in appointments %}
        {
          title : '{{ appointment[2] }}',
          start : '{{ appointment[1] }}',
        },
        {% endfor %}
      ],
      eventDidMount: function(info) {
        // 定位到列表视图的事件标题容器，不要直接修改info.el根节点
        const titleWrap = info.el.querySelector('.fc-list-event-title');
        if (!titleWrap) return;
        // 用createElement创建按钮比innerHTML拼接更安全，避免XSS问题
        const btn = document.createElement('button');
        btn.className = 'dayButton';
        btn.dataset.date = info.event.startStr; // 用官方提供的格式化时间字符串，不要直接传Date对象
        btn.innerText = 'Click me';
        // 绑定按钮点击事件
        btn.addEventListener('click', function(e) {
          e.stopPropagation(); // 阻止冒泡，避免触发日历默认的事件点击回调
          const targetDate = this.dataset.date;
          // 在此处编写按钮点击后的业务逻辑即可
          console.log('按钮对应事件时间：', targetDate);
        })
        titleWrap.appendChild(btn);
      }
    });
    calendar.render();
  </script>
 </body>
</html>

• 最终按钮会显示在每个事件标题的右侧，和你手动在审查元素里添加的效果完全一致
• 不会影响FullCalendar原生的事件悬浮、点击、视图切换等所有默认交互
• 如果需要调整按钮位置、样式，直接修改.dayButton的CSS规则即可

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