Events Calendar Widget
Display events from your data source in an interactive calendar with month, week, day, and schedule views.
Calendar Views
Enable or disable views in the Layouts section. Set a default view — visitors see this first.
- Month — Traditional monthly grid. Multi-day events span across cells.
- Week — Hourly time-grid for the current week.
- Day — Hourly time-grid for a single day.
- Schedule — Card or list-based agenda grouped by time period. Most customisable view.
Schedule view settings
| Setting | Options |
|---|---|
| Display as | List or Cards |
| Group events by | Day, Week, Month, Quarter, or None |
| Cards per row | 1 to 6 (cards only) |
| Card alignment | Left, Centre, or Right |
On mobile, the schedule list view automatically switches to single-column cards.
Event Data
Map your data source columns in the Event Data section.
| Field | Required | Description |
|---|---|---|
| Title | Yes | Event name shown on the calendar and in the detail modal |
| Start date | Yes | When the event begins (date or date/time) |
| End date | No | When it ends. All-day events span the full range on the grid |
| Location | No | Venue or address. Shown on schedule badges and in the detail modal |
Changing the Title field updates both the calendar grid events and schedule view item titles.
Schedule Fields
Only visible when the Schedule layout is selected.
Cover Image — Add images from a column containing URLs. Style in Calendar Styles & Settings.
Buttons — Add action buttons to schedule items: link to field, external link, open details, or add to calendar.
Event Details Modal — Toggle to let visitors click any event to open a detail modal showing cover image, title, date/time, location with directions, and additional fields.
Event Detail Styles (paintbrush icon)
| Setting | Description |
|---|---|
| Add to calendar | Show/hide the calendar provider dropdown |
| Get directions | Show/hide the Google Maps link |
| Cover image | Aspect ratio and fit |
| Title | Size, weight, and colour |
| Badge background | Background of date and location icon squares |
| Text & icon colour | Date text, location text, and icon colour |
| Link colour | ”Add to calendar” and “Get directions” link colour |
Calendar Styles & Settings
All visual styling is in one popup. Click the Calendar Styles & Settings button or any paintbrush icon — they open the same popup, focused on the relevant section.
Day Headers
Text size (2XS–3XL) and colour for column headers (Mon, Tue, etc.)
Calendar Colours
| Setting | Description |
|---|---|
| Background | Inside the calendar grid (month/week/day only) |
| Grid lines | Cell border colour |
| Text | Day number and header text |
| Today indicator | Current-time line colour |
| Today highlight | Today’s cell background |
Toolbar
Background and text colour for navigation buttons, Today button, and filter buttons.
Event Colours
Choose how events are coloured on the month/week/day grid:
- Single — One colour for all events
- Source — Use colours from your data source (Airtable/Notion field colours)
- Multi — Auto-assign from a palette
- Named — Map specific column values to specific colours
Event Title
Month/Week/Day: Font size (2XS–2XL)
Schedule: Font size, weight, colour, and spacing
Cover Image (Schedule)
Links to, aspect ratio, image fit, corners, and alt text column.
Schedule Badges
Date badge — The month/day square (e.g., MAY 3). Toggle visibility, set colour and size.
Date/Time & Location badges — Toggle time and end date visibility. Set background, text colour, and shape (pill or rounded).
Settings
| Setting | Description |
|---|---|
| Show Today button | Toggle the Today navigation button |
| Show time on events | Show/hide time on month/week/day events |
| Show past events | Toggle past events in schedule view |
| Visitor timezone | Convert times to visitor’s local timezone |
| Date format | Override DD/MM vs MM/DD auto-detection |
Filtering
Add filters in the Filters & Search tab. Filter buttons appear in the calendar toolbar, matching the toolbar’s background and text colours.
Date Format
Dates are auto-detected (DD/MM vs MM/DD) by scanning your data for unambiguous values. If all dates are ambiguous (both day and month under 12), use the Date format override in Settings to specify your format.