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 |
| Buttons vertical align | Top, Middle, or Bottom (list only, desktop widths; via the Display as paintbrush, under Buttons) |
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.
Item Link — Make the whole schedule card clickable. In the Buttons section click Add Item Link and choose Link to Field with the column that holds each event’s URL. Events whose link column is empty still open the Event Details Modal when clicked. See Buttons & Item Links for the other link actions.
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:
- 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
Schedule view — Decide how the event colour appears on schedule cards:
| Option | Result |
|---|---|
| Off | Schedule cards are not coloured (default) |
| Accent only | A coloured bar down the left edge of each card |
| Entire card | The card background takes the event colour, and the mapping’s text colour is applied to the card title and fields |
Use Named mode with a column such as a Featured checkbox or a Category select to highlight specific events. Badges and buttons keep their own colours in every option.
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).
Date format (Date & Time badge) — Click Edit on the Date & Time badge, open Badge Styling and pick a date format: the default short form (3 Oct 2026), Oct 3, 2026, October 3, 2026, 3 October 2026, 10/03/2026, 03/10/2026 or 2026-10-03. Multi-day events show the end date too when Show end date is on. The default format drops the year on timed events (3 Oct · 7:00 PM); every other format always includes it, and on multi-day events the year sits on the end date (October 5 – October 7, 2026).
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.