FullCalendar：如何修改Google Events的默认跳转链接？

从Google日历拉取的事件会自带默认跳转URL，直接设置url选项会被原有数据覆盖，这是你之前尝试无效的核心原因。以下是两种可行的解决方案：

方案1：通过eventRender覆盖事件URL #

在事件渲染阶段手动替换默认URL为页面内锚点，绑定到指定区域：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['googleCalendar'],
    googleCalendarApiKey: '你的API密钥',
    events: '你的Google日历ID',
    // 渲染时替换事件URL
    eventRender: function(info) {
      info.event.setProp('url', '#target-section');
    },
    // 可选：开启平滑滚动
    eventClick: function(info) {
      info.jsEvent.preventDefault();
      document.getElementById('target-section').scrollIntoView({
        behavior: 'smooth'
      });
    }
  });
  calendar.render();
});

替换代码中的#target-section为你页面下方指定区域的ID即可。

方案2：完全接管点击事件（更灵活） #

跳过URL设置，直接在点击事件里自定义跳转+详情展示逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['googleCalendar'],
    googleCalendarApiKey: '你的API密钥',
    events: '你的Google日历ID',
    eventClick: function(info) {
      // 强制阻止Google日历默认跳转
      info.jsEvent.preventDefault();
      
      // 跳转至指定区域
      const targetArea = document.getElementById('target-section');
      targetArea.scrollIntoView({ behavior: 'smooth' });
      
      // 可选：将事件详情插入到指定区域
      targetArea.innerHTML = `
        <h3>${info.event.title}</h3>
        <p>开始时间：${info.event.start.toLocaleString()}</p>
        ${info.event.end ? `<p>结束时间：${info.event.end.toLocaleString()}</p>` : ''}
        ${info.event.extendedProps.description ? `<p>描述：${info.event.extendedProps.description}</p>` : ''}
      `;
    }
  });
  calendar.render();
});

关键注意事项 #

• 必须调用info.jsEvent.preventDefault()，否则Google日历的默认跳转会覆盖你的自定义逻辑。
• 确保目标区域有唯一的id属性，否则无法准确定位。
• 多日历场景下，可通过info.event.extendedProps.calendarId判断事件所属日历，实现差异化处理。

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