Event Calendar

The EventCalendar is generic over your own event type — pass any collection via Items and map it with the EventStart, EventEnd, and EventTitle delegates instead of adapting your model. The month view shows up to MaxEventsPerDay chips per day; a localized "+x more" button jumps to that day in the agenda view. Multi-day events render a chip on each spanned day, and events starting (and ending) at midnight are treated as all-day.

Bind the active view with @bind-View and the visible period with @bind-CurrentDate to control the calendar from outside — for example from your own toolbar or a saved user preference. The built-in header stays in sync: navigating with the previous/next/today buttons or the view switcher updates your bound fields. Previous/next moves by one week in the week view and one month in the month and agenda views.

Use EventClass to return additional CSS classes for each event's chip — the classes are merged with the built-in chip styling. A common pattern is coloring events by category so meetings, releases, travel, and personal appointments are distinguishable at a glance.

EventTemplate fully replaces the built-in chip content — only minimal layout and focus classes remain on the chip button, so combine it with EventClass for chip-level styling. In the agenda view the template replaces the title only; the time label is always rendered. This example adds a category icon in front of each event title.

OnEventClick receives the clicked event — your own model, not a wrapper — so you can open a details panel, a dialog, or navigate. OnDateClick fires when a day number (month view) or day header (week view) is clicked, which is a natural hook for a "create event on this day" flow. Click an event chip or a day number below to see both callbacks in action.

OnViewRangeChanged reports the visible date range whenever the view or period changes — including the initial range — so you can fetch only the events the user can actually see. EventCalendarRange exposes inclusive Start and End dates. This example simulates a backend by generating recurring company events for whatever range is visible; navigate between months to see new data load.