Calendar (Dynamic)

Use this calendar if you want to integrate your class’s Google Calendar into the website.

Directions

1. Ensure there is a calendar for your course. You may reuse the previous semester’s calendar if it exists. We suggest that calendars belong to a course’s SPA. Directions for creating a new calendar here.
   1. In the calendar’s settings under “Access permissions for events,” ensure that “Make calendar available to public” is checked and the dropdown next to it is set to “See all event details,” otherwise your calendar events won’t show up.
2. In config.yml, set google_calendar_id to the calendar’s Calendar ID from the settings page.
3. If there is not a Google Cloud project associated with your course, create a new project. You should ensure that the project you create is associated with your course SPA, or at the very least a @berkeley.edu email. Doing so will ensure that you create the project under Berkeley/Learning and any associated billing will be taken care of by the university.
4. Enable the Google Calendar API. Instructions here
5. Create a Google API Key. You may be able to reuse the previous semester’s API key if one exists.
   1. Open the Google Cloud Console
   2. Access “APIs & Services” from the left side bar.
   3. Click “Create credentials” -> “API key.” Set google_api_key in config.yml to the key you obtain.
   4. Click on the newly created key to update the settings. Rename the key to something more useful like “COURSE NAME Calendar Key.” Under “Application restrictions” choose “Websites” and add a restriction for your course website (use the single domain, e.g. “https://data8.com”). You should also restrict the APIs that can be accessed with the key (only select the Google Calendar API). Don’t forget to click “Save.”
6. Create calendar events for your class using this new calendar.
   1. You may want to take advantage of the recurring event feature.
   2. View/edit event types in the event_types section of config.yml. Your Google Calendar titles should have the appropriate prefix or suffix matching these event types. For example, if your calendar event title is “[Data 101] Lecture”, _config.yml should have suffix: Lecture. If instead, your calendar event title is “Lecture - Pivots and Joins”, _config.yml should have prefix: Lecture. We recommend only changing suffix / prefix and none of the other fields.

As long as you have properly restricted your API key (see above), it is fine to publicly commit the API key (the key is also visible on client side even if your course website repo is private; this is unavoidable).

Google Cloud does not support localhost for allowed websites, so you will only be able to check if the dynamic calendar works by deploying your website with these changes.

The above directions are based loosely on this which is now out of date.

Properties of event_types in config.yml

• prefix / suffix: Looks at the prefix / suffix of an event and sets the styling if it finds a match (see above).
• background_color: Hex code for the background color.
• text_color: Hex code for the text color.
• class: Class ID of the event (e.g. cal-lecture for lecture events).
• icon: Fontawesome icon placed on the event (e.g. fa-school), more can be found in fontawesome/css or by visiting fontawesome.

Note: As you update the calendar, you’ll find that some files use the phrase “fullcalendar” and some use “calendar_dynamic”. Both refer to the dynamic calendar. fullcalendar is an open source JavaScript calendar we’re using to deliver the dynamic calendar.

Add to Google Calendar