求助：在FullCalendar(v6)中显示Google Calendar事件描述

一、实现鼠标悬停弹窗显示描述 #

直接修改你现有的eventMouseEnter回调，从Google Calendar获取的事件描述会被FullCalendar映射到event.description属性，修改后可直接弹窗展示：

eventMouseEnter: function(info) {
  // 检查是否存在描述，避免空弹窗
  if (info.event.description) {
    alert('事件描述：' + info.event.description);
  } else {
    alert('该事件无描述');
  }
}

二、在列表视图（listMonth）的标题旁显示描述 #

使用eventRender钩子，针对列表视图的DOM结构，在事件标题后追加描述内容，同时判断视图类型避免影响月视图：

eventRender: function(info) {
  // 仅在列表视图中处理
  if (info.view.type === 'listMonth') {
    // 获取事件标题元素
    const titleEl = info.el.querySelector('.fc-list-event-title');
    if (titleEl && info.event.description) {
      // 在标题后添加描述，用灰色小字体区分
      titleEl.insertAdjacentHTML('afterend', `<div style="font-size:0.8em;color:#666;margin-top:4px;">${info.event.description}</div>`);
    }
  }
}

三、整合后的完整代码 #

将上述功能整合到你的现有脚本中，最终代码如下：

<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,listMonth'
      },
      // 鼠标悬停显示描述弹窗
      eventMouseEnter: function(info) {
        if (info.event.description) {
          alert('事件描述：' + info.event.description);
        } else {
          alert('该事件无描述');
        }
      },
      // 列表视图中追加描述
      eventRender: function(info) {
        if (info.view.type === 'listMonth') {
          const titleEl = info.el.querySelector('.fc-list-event-title');
          if (titleEl && info.event.description) {
            titleEl.insertAdjacentHTML('afterend', `<div style="font-size:0.8em;color:#666;margin-top:4px;">${info.event.description}</div>`);
          }
        }
      },
      googleCalendarApiKey: 'A*******************************o',
      eventSources: [
        {
          googleCalendarId: 'k**************************o@group.calendar.google.com',
          color: 'rgb(246, 191, 38)',
        }
      ],
      initialView: 'listMonth'
    });
    calendar.render();
  });
</script>

关键说明 #

• Google Calendar的事件描述会被FullCalendar直接映射到event.description属性，无需额外处理。
• 通过info.view.type判断视图类型，确保仅在列表视图中修改DOM，不干扰月视图的显示逻辑。
• 可根据需求自定义弹窗样式（替换原生alert）或调整列表中描述的CSS样式，优化显示效果。

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