将 Google 日历数据与基于 D3.js 的日历集成

Integrating Google Calendar data with D3.js based Calendar

我最初是从 fullCalendar.js 的实现开始这项工作的,它按预期工作。然而,当我开始自定义 UI 时,问题出现了。经过一番努力,我决定放弃 fullcalendar 的实现,并在视觉方面寻求更灵活的东西。

我已经使用 javascript 多年,并且已经熟悉了基础知识。我不认为自己是专家(至少现在还不是)。 D3.js 在制作视觉效果方面提供了更大的灵活性,但就我的专业知识而言,我似乎遇到了瓶颈。集成 Google 的日历 API(在 d3 界面中呈现日历数据)对我来说是一个很大的问题。就我的理解而言,我觉得我有点碰壁了。

我正在使用 Cal-Heatmap(基于 d3 v3)来启动日历和 运行。我的问题在于整合谷歌日历数据。说实话,我不知道从哪里开始或如何最好地去做。我没有太多在 javascript 中使用 API 的经验,并且正在继续研究如何最好地做到这一点。

与此同时,我将此发布到社区以寻求一些指导。希望能从中吸取教训,提高自己的知识和专业水平。

对于初学者,您可以查看 quickstart projects provided in the documentation 以更好地理解 API。

想看看 API 能做什么,无需编写任何代码,请访问 APIs Explorer. Try using calendar.events.list, with your Google email as the calendar ID. (You'll need to enable OAuth 2.0 授权。)

当您已经熟悉 API 的使用时,您可以访问 Google Charts which has examples implementing Calendar Chart 受 D3 日历可视化启发。