microsite calendar

[benhalverson]

Summary

Create a new page that includes the nodejs calendar. The url should be something like nodejs.dev/sites/calendar

Tracking issue #275

Motivation

This page will replace https://nodejs.org/calendar

• [ ] Initial feature implementation https://github.com/nodejs/nodejs.dev/pull/1713
• [ ] Figure out why the calendar is displaying wrong time for an event. Only showing month view for now. Online searches show other people using moment-timezone, might be worth looking into
• [ ] Configure styles so the calendar looks prettier. We can either use custom components, or continue overriding the default react-big-calendar css. Docs
• [ ] Refactor tooltip component out of the calendar.tsx page
• [ ] Write tests for useGCalAPI hook
• [ ] Write tests for gcalUtils file
• [ ] Handle API failures better (for example, if api call to get Google events fails, an empty calendar is displayed. Probably want to display some sort of message to user indicating a failure)
• [ ] Make the tooltip accessible. See eslint-disable comment above component
• [ ] The processEvents and getRenderedEvents functions could probably be refactored to use array map function vs forEach and pushing to a new array. (OPTIONAL)
• [ ] I implemented a naive approach checking for a location link. Could use a better approach (OPTIONAL)

[Yogendra0Sharma]

@benhalverson Can i take this task ?

[benhalverson]

Yep it’s all yours.

[manishprivet]

For dark mode and some good looks unlike the original google embed, can we use this? I wanted to test it but it requires an API key and I don't have any idea from where I can get that.

[benhalverson]

For an API key for testing you would create an account on google cloud and under API's & services you would search for the calendar API and enable it, then you can generate an API key. https://developers.google.com/calendar/quickstart/js

We will also need to ask @MylesBorins about setting up a staging/production API key when we are ready.

[MylesBorins]

Hey all. If we want to start using api keys we'll want to ask the foundation to set up a new account or take over the current one as it is currently setup on my own billing account

[benhalverson]

Thanks Myles should we reach out to the build team or commcomm or admin? 🤔 🤷🏻‍♂️

[MylesBorins]

@benhalverson I don't think build has an account with credits... but would likely be good to talk to them about what account we should use. I would be more than happy to add more folks to the existing org we've been using if we switch the billing account

@brianwarner or @joryburson from the foundation can likely help us figure out how to get a different billing account setup if they are able to... unsure how a funding request like this should be handled (like if it needs to go to CPC or something).

[lancemccluskey]

@benhalverson Now that weve moved to a OpenJS Foundation billing account, can this be worked? If so Id like to try. Like Manish said, wed need an API key still

[benhalverson]

Ya if you want to work on this go for it. For the API key in production we should ask @joesepi or @brianwarner on how to get one from the OpenJS foundation. For local development I would use your own API key and lock it down in GCP You can see how I did it here. https://github.com/nodejs/nodejs.dev/pull/1165

[brianwarner]

Sounds good, I've found it in the GCP account. Let me know when you need the API key.