Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Calendar
A full-featured calendar grid for selecting dates with keyboard navigation, month/year dropdowns, date constraints, and configurable first day of week. Ideal for date pickers, scheduling interfaces, and any form that requires date selection.
Default
The default
Calendar renders a single-month grid with clickable day buttons. Bind to a DateTime? with @bind-Selected for two-way data binding. The selected date is highlighted with a primary background, and today's date is indicated with a subtle accent ring.
Loading example…
Date Formatting
The
Calendar binds to a standard DateTime?, so you can format the selected date using any .NET date format string. This example demonstrates several common formats including short date, long date, ISO, and day-of-week representations.
Loading example…
Date Constraints
Use
MinDate and MaxDate to restrict selection to a specific date window. Dates outside the range are automatically disabled with reduced opacity and cannot be clicked. This example limits selection to the next three months from today.
Loading example…
Disabled Dates
Use the
DisabledDates function to programmatically disable specific dates based on custom logic. This example disables weekends, making it suitable for business date selection where only weekdays are valid choices. The function receives each DateTime and returns true to disable it.
Loading example…
Month/Year Navigation
Click the month or year text in the header to access dropdown grids for quick navigation. The month grid shows all 12 months, and the year grid shows a range of years. This allows users to jump to distant dates without repeatedly clicking the previous/next arrows.
Loading example…
Outside Days
Set
ShowOutsideDays to true to display days from adjacent months in muted styling. This provides visual context and prevents the grid from shifting size between months. Outside days are selectable and will navigate to the adjacent month when clicked.
Loading example…
Simple Header
Set
ShowMonthYearDropdowns to false to display a simple text header instead of clickable dropdown selectors. In this mode, users navigate exclusively with the previous/next arrow buttons. This is useful for compact interfaces where the dropdown grids would feel excessive.
Loading example…
Custom Variant
Use the
Class, DayClass, and CellClass parameters to apply custom Tailwind CSS classes. This example demonstrates a calendar with a custom border accent and rounded corners, useful for branding-specific layouts or embedded calendar widgets.
Loading example…
Custom Day Content
Use
DayTemplate to render custom content inside each day button. The template receives a CalendarDayContext exposing Date, IsSelected, IsDisabled, IsOutsideMonth, IsToday, and IsInRange. This example marks days with scheduled team events with a dot below the day number.
Loading example…
Per-Day Styling
Use
DayClassFunc to return additional CSS classes for individual day buttons, composed with the built-in day classes and DayClass. This example tints weekends with the destructive color to visually separate them from working days.
Loading example…
Event Calendar
A real-world composition showing the
Calendar inside a card layout with a header and selected-date detail panel. This pattern is common in booking and scheduling interfaces where the calendar is part of a larger workflow, displaying event information alongside the date selection.
Loading example…
Public Methods
Use a component reference (@ref) to access these methods programmatically.
| Method | Returns | Description |
|---|---|---|
| FocusActiveDayAsync() | Task | Moves keyboard focus to the currently active day so arrow-key navigation works immediately. Call this after the calendar becomes visible — for example from a popover's content-ready callback when embedding the calendar in your own overlay. Pairs with AutoFocus, which does this automatically on first render for calendars revealed inline. |