Angular对接Google Calendar创建事件报错如何排查？

问题原因&修复方案 #

你代码里存在以下几个核心错误，按优先级排序修复即可：

1. 接口请求未实际发送
   你创建了insert请求对象，但没有调用execute()方法触发请求，Google gapi客户端要求必须调用该方法才会实际发起接口调用。
2. 请求参数格式不匹配Google接口要求
   你直接把Mobiscroll的事件对象传入接口，字段完全不符合Google Calendar API的规范：

• Google要求事件标题字段为summary，你传的是title
• 时间字段需要根据是否全天事件，分别传date（全天，格式为YYYY-MM-DD的字符串）或dateTime（非全天，格式为ISO字符串），不能直接传JS Date对象

3. 业务逻辑错误

• 编辑场景下不应该调用events.insert接口，应该调用events.update，且需要传入事件id
• 新增事件的分支里完全没有调用Google Calendar的创建接口，只修改了本地数组

4. 缺少授权逻辑
   读取公开日历仅需要API Key，但创建/修改事件属于写操作，必须走OAuth2.0用户授权流程，你当前代码没有处理未授权的情况，会直接报权限错误。
5. 缺少错误捕获和加载判断
   没有判断gapi是否加载完成就调用接口，也没有捕获接口报错，无法定位具体问题。

核心代码修复示例 #

修改saveEvent方法如下：

saveEvent(): void {
  // 先判断API是否加载完成
  if (!calApiLoaded) {
    this.notify.snackbar({ message: '日历API加载中，请稍后重试' });
    return;
  }

  this.tempEvent.title = this.popupEventTitle;
  this.tempEvent.description = this.popupEventDescription;
  this.tempEvent.start = this.popupEventDates[0];
  this.tempEvent.end = this.popupEventDates[1];
  this.tempEvent.allDay = this.popupEventAllDay;
  this.tempEvent.status = this.popupEventStatus;

  // 组装符合Google API要求的参数
  const googleEvent: any = {
    summary: this.tempEvent.title,
    description: this.tempEvent.description,
    start: {},
    end: {}
  };

  if (this.tempEvent.allDay) {
    // 全天事件格式处理
    googleEvent.start.date = this.tempEvent.start.toISOString().split('T')[0];
    // 全天事件的结束日期需要+1天，符合Google接口规范
    const endDate = new Date(this.tempEvent.end);
    endDate.setDate(endDate.getDate() + 1);
    googleEvent.end.date = endDate.toISOString().split('T')[0];
  } else {
    // 非全天事件格式处理
    googleEvent.start.dateTime = this.tempEvent.start.toISOString();
    googleEvent.end.dateTime = this.tempEvent.end.toISOString();
  }

  let request;
  if (this.isEdit) {
    // 编辑场景调用update接口
    request = win.gapi.client.calendar.events.update({
      'calendarId': CALENDAR_ID,
      'eventId': this.tempEvent.id,
      'resource': googleEvent
    });
    this.myEvents = [...this.myEvents];
  } else {
    // 新增场景调用insert接口
    request = win.gapi.client.calendar.events.insert({
      'calendarId': CALENDAR_ID,
      'resource': googleEvent
    });
    this.myEvents = [...this.myEvents, this.tempEvent];
  }

  // 执行请求并处理结果
  request.execute((resp: any) => {
    if (resp.error) {
      this.notify.snackbar({ message: `操作失败：${resp.error.message}` });
      // 操作失败回滚本地数据
      if (!this.isEdit) {
        this.myEvents = this.myEvents.filter(e => e !== this.tempEvent);
      }
      return;
    }
    this.notify.snackbar({ message: '操作成功' });
    // 同步Google返回的事件ID到本地
    this.tempEvent.id = resp.id;
  });

  this.calendarSelectedDate = this.popupEventDates[0];
  this.popup.close();
}

另外需要在initClient方法中补充授权校验逻辑，未授权时触发Google登录授权弹窗：

initClient = () => {
  win.gapi.client.init({
    apiKey: API_KEY,
    clientId: CLIENT_ID,
    discoveryDocs: DISCOVERY_DOCS,
    scope: SCOPES
  }).then(() => {
    // 校验是否已授权
    const isSignedIn = win.gapi.auth2.getAuthInstance().isSignedIn.get();
    if (!isSignedIn) {
      // 未授权触发登录
      win.gapi.auth2.getAuthInstance().signIn();
      return;
    }
    calApiLoaded = true;
    this.loadEvents(this.firstDay, this.lastDay);
  }).catch(err => {
    console.error('API初始化失败：', err);
  });
}

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