FullCalendar对接Google Calendar初始化故障排查

作为FullCalendar新手，遇到空日历的情况很常见，咱们一步步来排查可能的问题：

1. 修正脚本加载顺序 #

你当前的脚本加载顺序存在问题：gcal.js是FullCalendar的专属插件，必须在主库fullcalendar.js之后加载。现在的顺序会导致插件无法正确挂载到主库上，自然无法读取Google Calendar的数据。

修正后的脚本顺序应该是：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src='JS/moment.js'></script>
<script src='JS/fullcalendar.js'></script> <!-- 先加载FullCalendar主库 -->
<script src='JS/gcal.js'></script> <!-- 再加载Google Calendar插件 -->

2. 确认Google Cloud API密钥的权限 #

仅仅创建API密钥是不够的，你需要在Google Cloud控制台中启用Google Calendar API：

• 登录Google Cloud控制台，找到你的项目
• 进入「API和服务」>「库」，搜索「Google Calendar API」
• 点击「启用」按钮，确保API处于启用状态
• 同时检查密钥的限制规则（如果有设置），不要添加过于严格的HTTP限制，或者确保你的测试域名在允许列表内

3. 验证Google Calendar的公开设置 #

虽然你提到日历已设为公开，但要确认是完全开放的访问权限：

• 打开Google Calendar，找到目标日历的「设置和共享」
• 在「访问权限」部分，确认已勾选「让任何人都能查看此日历的所有事件」
• 同时检查「获取日历地址」里的「公开网址」是否能正常打开，确认日历ID和你代码里的完全一致（注意部分公开日历的ID不是邮箱格式，而是一串随机字符）

4. 查看浏览器控制台的错误提示 #

打开浏览器开发者工具（按F12），切换到「Console」标签页，刷新页面后查看报错信息：

• 如果是403 Forbidden：大概率是API密钥未启用Calendar API，或者密钥权限不足
• 如果是404 Not Found：检查Google Calendar ID是否正确
• 如果是FullCalendar is not defined类的脚本错误：那就是加载顺序的问题还没解决

5. 测试最小化可复现代码 #

把代码简化到最基础的形式，用CDN资源替换本地文件，排除本地文件损坏或路径错误的干扰：

<!doctype html>
<head>
<meta charset="UTF-8">
<title>Veda's Calendar</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css' />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/gcal.min.js'></script>
<script type="text/javascript">
$(function() {
  $('#calendar').fullCalendar({
    googleCalendarApiKey: '你的真实API密钥',
    events: {
      googleCalendarId: '你的真实公开日历ID'
    }
  });
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>

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