Calendar Section

Method 1: Inline Configuration (Recommended)

Define the calendar configuration directly in your page YAML:

- sectionType: calendar
  containerTag: section
  calendars:
    apiKey: 'YOUR_GOOGLE_CALENDAR_API_KEY'
    calendars:
      - id: 'en.usa#holiday@group.v.calendar.google.com'
        name: 'US Holidays'
        category: 'holiday'
      - id: 'your-calendar@gmail.com'
        name: 'Personal Events'
        category: 'personal'
  text:
    title: 'Event Calendar'
    prose: 'View upcoming events'

Method 2: External Data File (Optional)

For reusable configurations across multiple pages, create a data file in lib/data/calendars/[name].json:

{
  "apiKey": "YOUR_GOOGLE_CALENDAR_API_KEY",
  "calendars": [
    {
      "id": "en.usa#holiday@group.v.calendar.google.com",
      "name": "US Holidays",
      "category": "holiday"
    },
    {
      "id": "your-calendar@gmail.com",
      "name": "Personal Events",
      "category": "personal"
    }
  ]
}

Then reference it in your page:

- sectionType: calendar
  calendars:
    source: 'holidays'  # Loads lib/data/calendars/holidays.json

Getting a Google Calendar API Key

1. Go to the Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Google Calendar API
4. Go to Credentials and create an API key
5. Restrict the API key to Google Calendar API only
6. Add the API key to your calendar configuration file

Finding Calendar IDs

For public calendars:

1. Open Google Calendar
2. Click the three dots next to the calendar name
3. Select "Settings and sharing"
4. Scroll down to "Integrate calendar"
5. Copy the Calendar ID

Common public calendars:

• US Holidays: en.usa#holiday@group.v.calendar.google.com
• UK Holidays: en.uk#holiday@group.v.calendar.google.com
• Canada Holidays: en.canadian#holiday@group.v.calendar.google.com

Event Categories and Styling

The component includes four built-in category styles:

• default: Blue theme for general events
• holiday: Red theme for holidays and special occasions
• personal: Green theme for personal events
• work: Indigo theme for work-related events

Custom categories can be added by extending the CSS with additional .calendar__event--{category} classes.

Calendar Features

• Monthly Grid View - Standard calendar layout with weekday headers
• Navigation - Previous/next month buttons with smooth transitions
• Event Display - Up to 3 events shown per day, "+X more" indicator for additional events
• Event Details Panel - Slides in from right with full event information
• Today Highlighting - Special styling for current date
• All-Day Events - Visual distinction from timed events
• Responsive Design - Mobile-friendly layout that adapts to screen size
• Keyboard Support - Escape key to close event details panel

Performance Features

• Three-Month Window - Initial fetch includes previous, current, and next month
• Dynamic Loading - Additional months loaded on-demand when navigating
• Client-Side Caching - Events cached to minimize API calls
• Graceful Errors - Shows user-friendly messages if calendar is unavailable

Calendar Configuration

*Either inline (apiKey + calendars) OR external (source) is required

Calendar Object Properties

Header Content