如何刷新Google Calendar事件列表且不追加内容？

嗨，这个问题我之前做类似功能时也踩过坑！核心原因就是每次刷新时没有先清除容器里的旧内容，导致新事件一直往后面加。给你几个具体的解决思路和代码示例：

核心思路：先清空，再渲染 #

不管你用的脚本本身的渲染逻辑是怎样的，只要在每次获取新事件之前，把存放事件的容器清空，再重新插入新内容，就能解决追加的问题。

具体实现步骤 #

1. 定位事件容器：找到你页面中用来展示谷歌日历事件的DOM元素（比如一个带id的div）。
2. 封装刷新函数：把“清空容器 + 获取并渲染新事件”的逻辑封装成一个函数。
3. 定时调用函数：用setInterval每30秒执行一次这个函数，同时页面初始化时先执行一次。

代码示例 #

假设你的事件容器id是calendar-events，参考代码如下：

// 获取存放日历事件的容器
const eventsContainer = document.getElementById('calendar-events');

// 封装获取并渲染事件的核心函数
function refreshCalendarEvents() {
  // 第一步：清空容器里的旧内容
  eventsContainer.innerHTML = '';

  // 第二步：调用Milan Lund的脚本获取事件并渲染
  // 这里替换成你实际使用该脚本的代码逻辑，比如原脚本可能返回事件列表
  getGoogleCalendarEvents().then(events => {
    // 遍历事件，创建DOM元素并添加到容器
    events.forEach(event => {
      const eventItem = document.createElement('div');
      eventItem.className = 'calendar-event-item';
      eventItem.innerHTML = `
        <h3>${event.title}</h3>
        <p>开始时间：${new Date(event.start).toLocaleString()}</p>
      `;
      eventsContainer.appendChild(eventItem);
    });
  }).catch(err => {
    // 处理加载失败的情况，给用户提示
    eventsContainer.innerHTML = `<p>日历事件加载失败：${err.message}</p>`;
  });
}

// 页面加载完成后先执行一次，避免用户等待
document.addEventListener('DOMContentLoaded', refreshCalendarEvents);

// 设置每30秒刷新一次（30000毫秒）
setInterval(refreshCalendarEvents, 30000);

优化体验：添加加载状态 #

为了让用户知道页面正在刷新，可以在清空容器后先显示加载提示，加载完成后再替换成事件内容：

function refreshCalendarEvents() {
  // 显示加载提示
  eventsContainer.innerHTML = '<div class="loading">正在刷新日历事件...</div>';

  getGoogleCalendarEvents().then(events => {
    eventsContainer.innerHTML = ''; // 清空加载提示
    // 渲染事件逻辑...
  }).catch(err => {
    eventsContainer.innerHTML = `<p class="error">加载失败，请稍后重试</p>`;
  });
}

注意事项 #

• 如果原脚本本身有自带的渲染函数，你可以直接修改那个函数，让它在渲染前先清空容器；
• 确保容器选择器是正确的，别误选了其他DOM元素；
• 考虑给setInterval加个清理逻辑，比如页面卸载时清除定时器，避免不必要的请求：

const refreshInterval = setInterval(refreshCalendarEvents, 30000);
// 页面卸载时清除定时器
window.addEventListener('beforeunload', () => {
  clearInterval(refreshInterval);
});

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