JavaScript调用Google Calendar检查时段事件冲突无返回问题

需要实现用户选择指定日期与时间段，校验Google Calendar中是否存在与所选时段冲突日程的功能，现有代码点击check按钮后无任何返回结果，需排查修复。

• 代码环境混淆：浏览器端原生JS不识别服务端专属API，你直接在前端script标签中写了Google Apps Script（GAS）服务端才支持的CalendarApp对象，还混入了Java语法的SimpleDateFormat声明，JS运行时直接抛出未定义错误，中断函数执行，这是点击无反应的核心原因。
• 表单值获取方式错误：datetime-local类型的输入框，用户选择的值存在value属性中，你用innerHTML获取只能拿到空值，无法得到有效时间参数。
• 结果状态未重置：每次触发校验时没有先隐藏上一次的结果提示，多次点击会出现提示重叠问题。
• 运行方式错误：这类调用Google Calendar API的页面不能直接本地双击打开HTML运行，必须依托GAS的Web App环境部署，通过服务端代理调用日历接口。

1. GAS项目后端代码（Code.gs） #

// Web App访问入口，渲染前端页面
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

// 日历冲突校验逻辑，仅在服务端运行
function checkCalendarConflict(startTime, endTime) {
  const targetCal = CalendarApp.getCalendarById("aqsv50qhum57qbh7a581cft1o0@group.calendar.google.com");
  const eventList = targetCal.getEvents(new Date(startTime), new Date(endTime));
  return eventList.length > 0;
}

2. 前端页面代码（index.html） #

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<div>From<input class="w3-input w3-border" type="datetime-local" id="from"></div>
<div>To<input class="w3-input w3-border" type="datetime-local" id="to"></div>
<button style="width:100%" class="w3-button w3-black w3-section" onclick="check()">check</button>
<div style="display:none" id="no">Not Available</div>
<div style="display:none" id="yes">Available</div>

<script>
function check() {
  // 重置上一次的结果展示
  document.getElementById("no").style.display = "none";
  document.getElementById("yes").style.display = "none";

  // 正确获取输入框的时间值
  const startTime = document.getElementById("from").value;
  const endTime = document.getElementById("to").value;

  // 基础参数合法性校验
  if (!startTime || !endTime) {
    alert("请选择完整的开始和结束时间");
    return;
  }
  if (new Date(startTime) >= new Date(endTime)) {
    alert("结束时间必须晚于开始时间");
    return;
  }

  // 调用GAS后端接口查询日历冲突
  google.script.run
    .withSuccessHandler(function(hasConflict) {
      hasConflict 
        ? document.getElementById("no").style.display = "block"
        : document.getElementById("yes").style.display = "block";
    })
    .withFailureHandler(function(err) {
      alert("查询失败：" + err.message);
    })
    .checkCalendarConflict(startTime, endTime);
}
</script>
</body>
</html>

• 两个文件分别存到同一个GAS项目中，HTML文件命名为index，后端代码存为默认的Code.gs。
• 部署Web App时，执行身份选择你本人的账号，确保该账号对目标Google日历拥有读取权限。
• 访问权限按需配置：仅内部使用可选择仅同组织成员可访问，公开使用选择任何人可访问。

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