Class Calendars

How to Add or Edit Calendars

This viewer pulls from public Google Calendars. To add a new class, edit js/config.js.

Step 1: Get the Calendar ID

1. Go to Google Calendar
2. Click the three dots next to your calendar → Settings
3. Scroll to "Integrate calendar" and copy the Calendar ID

Step 2: Make Calendar Public

1. In the same settings, find "Access permissions for events"
2. Check "Make available to public"
3. Choose "See all event details"

Step 3: Add to config.js

{
  id: 'unique-id',
  name: 'Display Name',
  calendarId: 'abc123...@group.calendar.google.com',
  colorClass: 'cal-1170-primary'
}

Color Classes

• Purples: cal-1170-primary, cal-1170-secondary
• Greens: cal-1181-primary, cal-1181-secondary
• Cyan/Teal: cal-1181-tertiary
• Blues: cal-1190-primary, cal-1190-secondary
• Reds: cal-2740-primary, cal-2740-secondary

Troubleshooting

• Calendar greyed out: No events found. Check that the calendar is public and has events in the date range.
• Not loading: Open browser console (F12) to see error messages.
• Wrong calendar ID: Make sure you copied the full ID ending in @group.calendar.google.com

Use the standalone calendar-helper.html tool to generate config code.