Calendar

Visitors pick a day or search within the calendar view. Content authors connect event sources and labels; visual designers should leave room for the grid and search on small screens. Pair this pattern with list views when users only need a simple chronological feed without a calendar.

• Search and date work together: searching can keep the current month context where the implementation allows.
• Empty states should explain when there are no events, not show a blank region with no explanation.
• The calendar script loads event data for the view; behaviour should stay usable when JavaScript is limited (follow template-level fallbacks where provided).

1. Search region with a text field and a clear way to submit the search.
2. Month grid showing days and any event indicators.
3. Supporting content or list beside or below the grid, depending on the template.

Replace with a screenshot of the calendar grid and search strip.

• Event content should use consistent titles and dates so the calendar and any list view match.
• Keep search placeholder and helper text short and plain language.

Do

• Keep search and date behaviour predictable when back and forward navigation is used.
• Test time zones and daylight saving with real content.

Don't

• Don't rely on colour alone for “has events” days; provide text in the day detail view.

• Events landing pages that need month navigation with listings below or beside the calendar.

• Simple chronological lists without a calendar grid; use List events or Featured events.