如何用JavaScript调用Google Calendar API合并展示多日历事件

我完全理解你想把多个Google日历的事件合并成一个统一列表的需求——这和Google Calendar UI的展示逻辑一致，核心就是处理多日历ID的批量请求，然后合并排序结果。下面是具体的实现思路和代码片段：

第一步：获取你的所有日历ID #

要处理多个日历，首先得拿到每个日历的ID，方法很简单：

• 打开Google Calendar网页版
• 找到左侧要添加的日历，点击三个点（更多选项）→ 设置和共享
• 在「日历ID」部分复制对应的字符串（通常是邮箱格式或者一串字符）

你可以把这些ID整理成一个数组，主日历还能保留primary这个特殊值：

const calendarIds = [
  'primary', // 主日历专属标识
  'your-calendar-1@group.calendar.google.com',
  'your-calendar-2@group.calendar.google.com'
];

第二步：批量请求多日历的事件 #

Google Calendar API的events.list接口一次只能指定一个calendarId，所以我们需要对每个日历ID发起独立请求，再把结果合并。用Promise.all并行处理多个请求会更高效：

// 假设已经完成Google API的授权（比如使用gapi.client初始化）
async function getAllCalendarEvents() {
  try {
    // 并行请求所有日历的事件
    const eventResponses = await Promise.all(
      calendarIds.map(calendarId => 
        gapi.client.calendar.events.list({
          calendarId: calendarId,
          timeMin: new Date().toISOString(), // 只获取当前及以后的事件
          showDeleted: false,
          singleEvents: true, // 把重复事件展开成单个条目
          maxResults: 100,
          orderBy: 'startTime'
        })
      )
    );

    // 提取所有事件并合并成一个数组
    const allEvents = eventResponses.flatMap(response => response.result.items);
    
    // 跨日历统一按开始时间排序（单个日历的事件已排序，但跨日历需要重新整理）
    allEvents.sort((a, b) => {
      const startA = a.start.dateTime || a.start.date;
      const startB = b.start.dateTime || b.start.date;
      return new Date(startA) - new Date(startB);
    });

    return allEvents;
  } catch (error) {
    console.error('获取日历事件失败:', error);
    throw error;
  }
}

第三步：渲染成类似Google Calendar UI的列表 #

拿到合并排序后的事件数组后，就可以渲染到页面上了。这里给个简单的示例，模拟Google Calendar的基础样式：

<div id="events-list"></div>

function renderEvents(events) {
  const eventsList = document.getElementById('events-list');
  eventsList.innerHTML = '';

  events.forEach(event => {
    const eventElement = document.createElement('div');
    eventElement.className = 'calendar-event';
    
    // 区分处理全天事件和定时事件的时间展示
    const start = event.start.dateTime 
      ? new Date(event.start.dateTime).toLocaleString()
      : `全天: ${event.start.date}`;
    
    eventElement.innerHTML = `
      <h3 class="event-title">${event.summary}</h3>
      <p class="event-time">${start}</p>
      ${event.location ? `<p class="event-location">📍 ${event.location}</p>` : ''}
      <p class="event-calendar">来自日历: ${event.organizer.displayName}</p>
    `;
    
    eventsList.appendChild(eventElement);
  });
}

// 调用示例
getAllCalendarEvents().then(events => renderEvents(events));

额外注意事项 #

• 确保你的API密钥或OAuth权限已经包含了https://www.googleapis.com/auth/calendar.readonly权限（如果只是只读展示的话）
• 如果事件数量很多，记得处理分页逻辑（通过返回结果里的nextPageToken），上面的示例只取了前100条事件
• 可以给不同日历的事件加上专属颜色标记，和Google Calendar UI保持一致——你可以通过calendarList.get接口获取每个日历的colorId，再对应到样式里

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