Events Calendar: How to set up iCal Integration Guide

The Events Calendar section supports importing events from external iCal (.ics) calendar feeds. This allows you to automatically display events from popular calendar services like Google Calendar, Outlook, Apple Calendar, and others without manually entering each event.

How It Works

The calendar section fetches and parses iCal data from any publicly accessible .ics URL. Events are automatically parsed, expanded (including recurring events), and displayed alongside any manually created events in the calendar.

Setting Up iCal Integration

1. Get Your iCal URL: Obtain a public iCal URL from your calendar service

2. Add to Section: In the theme editor, paste the URL into the "iCal URL" field

3. Customize Appearance: Set colors for imported events using the design controls

Supported Calendar Services

Google Calendar

1. Open Google Calendar

2. Go to "Settings" → "Settings"

3. Select your calendar from the left sidebar

4. Scroll to "Integrate calendar"

5. Copy the "Public URL to this calendar" (ends with .ics)

Example URL format:

https://calendar.google.com/calendar/ical/[calendar-id]/public/basic.ics

Outlook/Office 365

1. Open Outlook on the web

2. Go to Calendar settings

3. Select "Shared calendars"

4. Publish your calendar and copy the ICS link

Apple iCloud Calendar

1. Open iCloud Calendar

2. Click the share icon next to your calendar

3. Enable "Public Calendar"

4. Copy the provided URL

Example iCal URLs

Here are some example public calendar feeds you can use for testing:

Canadian Holidays

https://calendar.google.com/calendar/ical/en.canadian%23holiday%40group.v.calendar.google.com/public/basic.ics

Formula 1 (F1) racing

https://files-f1.motorsportcalendars.com/f1-calendar_p1_p2_p3_qualifying_sprint_gp_alarm-30.ics?t=1648211044856

Canton Becker Astronomy Calendar

https://cantonbecker.com/astronomy-calendar/astrocal.ics

Features Supported

Event Types

• ✅ Single events

• ✅ All-day events

• ✅ Recurring events (daily, weekly, monthly, yearly)

• ✅ Multi-day events

• ✅ Events with descriptions

Timezone Handling

• Events are automatically converted to your selected timezone

• Original event times are preserved and displayed correctly

• Timezone abbreviations can be shown in event details

Event Display

• Events appear with custom colors (configurable)

• Time display respects all-day vs. timed events

• Event descriptions shown in modal popup

• Automatic truncation for long event titles

Customization Options

Visual Styling

• Event Background: Set the background color for iCal events

• Event Border: Customize the left border color

• Event Text: Choose text color for readability

Display Settings

• Timezone Display: Show/hide timezone in event details

• Calendar Timezone: Convert all events to your local timezone

Troubleshooting

Common Issues

Calendar not loading events:

• Ensure the iCal URL is publicly accessible (no authentication required)

• Check that the URL ends with .ics or .ical

• Verify the calendar is published/shared publicly

Events showing wrong times:

• Check the "Calendar Timezone" setting matches your location

• Ensure your source calendar has correct timezone information

Events not updating:

• iCal feeds are cached; changes may take a few minutes to appear

• Try refreshing the page or switching calendar months

Testing Your Setup

1. Use one of the example URLs above to verify functionality

2. Check browser developer console for any error messages

3. Ensure events appear with your chosen colors and formatting

Best Practices

• Use descriptive event titles (they may be truncated on mobile)

• Keep event descriptions concise for better modal display

• Test your iCal URL in a browser first to ensure it downloads an .ics file

• Consider creating a dedicated public calendar for website events