如何在自有HTML页面中实现向Google Calendar添加事件功能？

当然可以实现网页内添加Google Calendar事件的功能，单纯的iframe嵌入仅支持查看日历，要实现添加功能可以通过以下两种方案：

方案1：快速实现的链接跳转方式 #

这种方式无需复杂开发，通过构造Google Calendar的事件添加链接，用户点击后会打开Google Calendar的事件创建页面，还能预填事件信息。

示例代码：

<a href="https://calendar.google.com/calendar/r/eventedit?text=团队会议&dates=20240615T090000/20240615T100000&location=会议室A&details=讨论项目进度" target="_blank">添加团队会议到日历</a>

参数说明：

• text：事件标题
• dates：事件开始/结束时间，格式为YYYYMMDDTHHMMSS/YYYYMMDDTHHMMSS（注意时区匹配）
• location：事件地点
• details：事件详情

方案2：自定义程度更高的Google Calendar API方式 #

如果需要在页面内直接完成事件添加（无需跳转），可以使用Google Calendar API开发：

1. 准备工作

   • 在Google Cloud控制台创建项目，启用Google Calendar API
   • 创建OAuth 2.0客户端ID，配置允许的授权域名（需和你的网页域名一致）

2. 网页代码实现
   引入Google API客户端库，并编写JavaScript代码处理授权和事件添加：

<script src="https://apis.google.com/js/api.js"></script>
<script>
  function initClient() {
    gapi.client.init({
      clientId: '你的OAuth客户端ID',
      scope: 'https://www.googleapis.com/auth/calendar.events'
    }).then(() => {
      // 初始化完成，可绑定按钮事件
    });
  }

  function addCalendarEvent() {
    gapi.client.calendar.events.insert({
      'calendarId': 'primary', // 目标日历（primary代表用户主日历）
      'resource': {
        'summary': '团队会议',
        'location': '会议室A',
        'description': '讨论项目进度',
        'start': {
          'dateTime': '2024-06-15T09:00:00',
          'timeZone': 'Asia/Shanghai'
        },
        'end': {
          'dateTime': '2024-06-15T10:00:00',
          'timeZone': 'Asia/Shanghai'
        }
      }
    }).then(() => {
      alert('事件添加成功！');
    }, error => {
      console.error('添加失败:', error);
    });
  }

  // 加载API并初始化
  gapi.load('client:auth2', initClient);
</script>
<button onclick="addCalendarEvent()">添加团队会议</button>

注意事项 #

• 链接方式无需用户授权，但会跳转至Google Calendar页面；API方式支持页面内操作，但需要用户登录Google账号完成授权
• 使用API时，务必确保客户端ID的授权域名配置正确，否则会出现跨域错误

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