Calendar

The RzCalendar component is a powerful, highly configurable date picker built on top of Vanilla Calendar Pro. Designed for RizzyUI's SSR-first architecture, it renders the initial state on the server and provides a rich set of DOM events for client-side interactivity via Alpine.js or HTMX.

Example

A basic calendar showing the current date in Single selection mode.

Source

<RzCalendar Mode="SelectionDatesMode.Single"
            Value="_selectedDate" />

@code {
    private DateOnly? _selectedDate = DateOnly.FromDateTime(DateTime.Now);
}

Range Calendar

A calendar displaying a pre-selected date range.

Source

<RzCalendar Mode="SelectionDatesMode.MultipleRanged"
            Range="_selectedRange" />

@code {
    private CalendarDateRange? _selectedRange = new CalendarDateRange
    {
        From = DateTime.Now,
        To = DateTime.Now.AddDays(7)
    };
}

Multi-Month Calendar

A calendar displaying multiple months at once.

Source

<RzCalendar Mode="SelectionDatesMode.Single"
            Type="CalendarType.Multiple"
            Options="@(new VanillaCalendarOptions { DisplayMonthsCount = 2 })"
            Value="_selectedDate" />

Disabled Dates

A calendar with specific dates disabled using MinDate.

Source

<RzCalendar Mode="SelectionDatesMode.Single"
            Value="_selectedDate"
            MinDate="@DateOnly.FromDateTime(DateTime.Now.AddDays(-5))" />

Multiple Selection

A calendar allowing selection of multiple individual dates.

Source

<RzCalendar Mode="SelectionDatesMode.Multiple"
            Values="_selectedDates" />

@code {
    private List<DateOnly> _selectedDates = new() { 
        DateOnly.FromDateTime(DateTime.Now),
        DateOnly.FromDateTime(DateTime.Now.AddDays(2)),
        DateOnly.FromDateTime(DateTime.Now.AddDays(5))
    };
}

Component Parameters

Parameter	Type	Default	Description
Mode	SelectionDatesMode	Single	Determines if the user selects a Single date, Multiple dates, or a Range.
Value	DateOnly?	null	The initial selected date when Mode is `Single`.
Values	List<DateOnly>?	null	The initial list of selected dates when Mode is `Multiple`.
Range	CalendarDateRange?	null	The initial date range when Mode is `MultipleRanged`.
MinDate	DateOnly?	null	Minimum selectable date. Dates before this are disabled.
MaxDate	DateOnly?	null	Maximum selectable date. Dates after this are disabled.
Type	CalendarType	Default	View type: `Default` (Month), `Multiple` (Multi-Month), `Month`, or `Year`.
Options	VanillaCalendarOptions	null	Advanced configuration object for locale, disabled weekdays, week numbers, and more.

Client-Side Events

The calendar dispatches custom DOM events that can be listened to via Alpine.js or vanilla JavaScript. All events bubble.

Event Name	Detail Property	Description
rz:calendar:init	{ instance }	Fired when the calendar is fully initialized.
rz:calendar:click-day	{ dates, event }	Fired when a day is clicked. `dates` contains the array of selected ISO date strings.
rz:calendar:change-time	{ time, hours, minutes... }	Fired when the time picker value changes.
rz:calendar:click-month	{ month, event }	Fired when a month is selected in the header.
rz:calendar:click-year	{ year, event }	Fired when a year is selected in the header.