如何在Electron应用中展示Google Calendar事件列表？

核心问题1：listEvents函数未返回事件数据 #

你的listEvents函数虽然成功获取到了日历事件，但没有将数据返回，导致main.js中const events = await listEvents(auth, win)得到的是undefined，最终发送给渲染进程的是无效数据。

修改listEvents函数：

async function listEvents(auth, win) {
  const calendar = google.calendar({version: 'v3', auth});
  const res = await calendar.events.list({
    calendarId: 'primary',
    timeMin: new Date().toISOString(),
    maxResults: 10,
    singleEvents: true,
    orderBy: 'startTime',
  });
  const events = res.data.items;
  if (!events || events.length === 0) {
    console.log('No upcoming events found.');
    return []; // 返回空数组，避免后续处理undefined
  }
  console.log('Upcoming 10 events:');
  events.map((event, i) => {
    const start = event.start.dateTime || event.start.date;
    console.log(`${start} - ${event.summary}`);
  });
  return events; // 关键：返回获取到的事件数组
}

核心问题2：IPC消息发送时机过早 #

win.loadFile('index.html')是异步操作，你在调用它之后立刻执行授权和事件获取逻辑，可能此时页面还未加载完成，渲染进程的ipcRenderer.on('events')监听还未注册，导致消息直接丢失。

修改main.js中的时机处理：
等待页面加载完成后再执行后续操作（Electron 14及以上版本支持await loadFile）：

async function createWindow () {
  win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  // 等待页面完全加载
  await win.loadFile('index.html');

  // 获取授权与事件数据
  const auth = await authorize();
  const events = await listEvents(auth, win);

  // 确认数据有效后发送
  if (events) {
    win.webContents.send('events', events);
  }
}

额外验证步骤 #

• 在main.js中添加console.log(events)，确认获取到的事件数据格式正确。
• 打开渲染进程开发者工具（win.webContents.openDevTools()），检查控制台是否有events相关的报错或日志。

内容的提问来源于stack exchange，提问作者Thijs de Vries