Integrating Google Calendar data with D3.js based Calendar

Question

I initially began this endeavor with an implementation of fullCalendar.js which worked as intended. However, problems arose when I started to customize the UI. After much toil, I decided to scrap the implemention of fullcalendar and go for something more flexible in terms of visuals.

I have been working with javascript for a number of years and have become familiar with the basics. I do not consider myself an expert (at least not yet). D3.js offers more flexibility as far as crafting visuals is concerned but I seem to have hit a wall as far as my expertise is concerned. Integrating Google's Calendar API (to render calendar data in the d3 interface) is presenting quite the problem for me. I feel I have hit a bit of a wall as far as my understanding is concerned.

I'm using Cal-Heatmap (which is based on d3 v3) to get the calendar up and running. My problem lies in integrating googles calendar data. To be honest I do not know where to start or how best to go about it. I don't have much experience working with API's in javascript and am continuing to research how best to do it.

In the meantime, I'm posting this to the community for some guidance. I hope to learn from this and improve my knowledge and expertise.

Answer 1

For starters, you can check out the quickstart projects provided in the documentation to understand the API better.

To play around and see what the API can do, without writing any code, visit the APIs Explorer. Try using calendar.events.list, with your Google email as the calendar ID. (You'll need to enable OAuth 2.0 authorization.)

When you're already comfortable with the usage of the API, you can visit Google Charts which has examples implementing Calendar Chart inspired by the D3 calendar visualization.