Integrating Google Calendar data with D3.js based Calendar
up vote
1
down vote
favorite
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.
javascript d3.js google-calendar-api cal-heatmap
add a comment |
up vote
1
down vote
favorite
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.
javascript d3.js google-calendar-api cal-heatmap
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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.
javascript d3.js google-calendar-api cal-heatmap
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.
javascript d3.js google-calendar-api cal-heatmap
javascript d3.js google-calendar-api cal-heatmap
edited Nov 25 at 8:44
asked Nov 21 at 16:30
tijanicharles
76214
76214
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
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.
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
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.
add a comment |
up vote
1
down vote
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.
add a comment |
up vote
1
down vote
up vote
1
down vote
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.
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.
answered Nov 22 at 7:42
Jacque
1915
1915
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416565%2fintegrating-google-calendar-data-with-d3-js-based-calendar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown