Integrating Google Calendar data with D3.js based Calendar
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
asked Nov 21 '18 at 16:30
tijanicharlestijanicharles
76214
add a comment |
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
asked Nov 21 '18 at 16:30
tijanicharlestijanicharles
76214
add a comment |
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
asked Nov 21 '18 at 16:30
tijanicharlestijanicharles
76214
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
asked Nov 21 '18 at 16:30
tijanicharlestijanicharles
76214
asked Nov 21 '18 at 16:30
tijanicharlestijanicharles
76214
edited Nov 25 '18 at 8:44
tijanicharles
asked Nov 21 '18 at 16:30
tijanicharlestijanicharles
76214
asked Nov 21 '18 at 16:30
tijanicharlestijanicharles
76214
asked Nov 21 '18 at 16:30
tijanicharlestijanicharles
76214
76214
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 7:42
JacqueJacque
3486
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 7:42
JacqueJacque
3486
add a comment |
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 '18 at 7:42
JacqueJacque
3486
add a comment |
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 '18 at 7:42
JacqueJacque
3486
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 '18 at 7:42
JacqueJacque
3486
answered Nov 22 '18 at 7:42
JacqueJacque
3486
answered Nov 22 '18 at 7:42
JacqueJacque
3486
answered Nov 22 '18 at 7:42
JacqueJacque
3486
3486
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.
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
