Vue3结合FullCalendar实现日视图按钮渲染失败问题

我在VueJS项目中使用FullCalendar库开发界面，尝试通过dayCellContent钩子在日历单元格中渲染按钮，但未成功实现预期效果。

我的calendarOptions配置代码如下：

calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: "dayGridMonth",
        // dateClick: this.handleDateClick,
        headerToolbar: {
          start: "",
          center: "title",
          end: "today,prevYear,prev,next,nextYear",
        },
        locale: "tr",
        events: [
          { title: "event 1", date: "2023-01-01" },
          { title: "event 2", date: "2023-01-02" },
        ],
        dayCellContent: (date) => {
          return `
            <button class="my-button" onClick="console.log('Button 1 clicked on ${date.toString()}')">Button 1</button>
            <button class="my-button" onClick="console.log('Button 2 clicked on ${date.toString()}')">Button 2</button>
            <button class="my-button" onClick="console.log('Button 3 clicked on ${date.toString()}')">Button 3</button>
          `;
        },
      },

当前效果截图：

问题原因 #

1. HTML转义字符错误：返回的HTML字符串中使用了<和>转义字符，FullCalendar的dayCellContent钩子需要直接返回未转义的HTML标签，转义后的字符会被当作普通文本渲染，无法解析为按钮元素。
2. 事件绑定方式不适配Vue环境：直接在HTML字符串中写onClick属于原生DOM事件绑定，在Vue环境下无法正确关联Vue实例内的方法，还会因作用域问题导致逻辑失效。

修复步骤 #

1. 修正HTML字符串格式 #

去掉HTML标签的转义字符，直接使用<和>，同时用dateInfo.dateStr获取更友好的格式化日期字符串：

dayCellContent: (dateInfo) => {
  return `
    <button class="my-button" data-date="${dateInfo.dateStr}">Button 1</button>
    <button class="my-button" data-date="${dateInfo.dateStr}">Button 2</button>
    <button class="my-button" data-date="${dateInfo.dateStr}">Button 3</button>
  `;
}

2. 通过事件委托绑定点击逻辑 #

在Vue中通过事件委托处理按钮点击，避免直接在字符串中绑定事件：

• 给FullCalendar组件添加点击监听：

<FullCalendar 
  ref="calendar"
  :options="calendarOptions"
  @click="handleCalendarClick"
/>

• 在Vue方法中实现点击逻辑：

handleCalendarClick(event) {
  const target = event.target;
  if (target.classList.contains('my-button')) {
    const date = target.dataset.date;
    console.log(`Button clicked on ${date}`);
    // 根据按钮文本区分不同逻辑
    switch(target.textContent) {
      case 'Button 1':
        // Button 1的处理逻辑
        break;
      case 'Button 2':
        // Button 2的处理逻辑
        break;
      case 'Button 3':
        // Button 3的处理逻辑
        break;
    }
  }
}

3. 优化按钮样式（可选） #

添加基础样式避免单元格布局混乱：

.my-button {
  display: block;
  width: 100%;
  margin: 2px 0;
  padding: 2px;
  font-size: 12px;
  border: none;
  border-radius: 2px;
  background-color: #f0f0f0;
}

内容的提问来源于stack exchange，提问作者Busenur Adıbelli