Calendar

The Calendar component is a versatile UI tool designed for date selection within web applications. It can be utilized independently or integrated with other UI elements like search boxes to define time ranges for various actions. This component is pivotal in applications requiring date inputs, such as booking systems, event planners, and analytics dashboards.

Examples

Basic Usage

This example demonstrates a simple calendar allowing for a single date selection, updating a display with the selected date or indicating when no date is chosen:

Advanced Customization

Date Range Selection

Enable users to select a range of dates, useful for applications requiring start and end date inputs:

Restricted Date Range

Limit selection within a specific date range, enhancing usability by preventing invalid date choices:

Initialize with Default Date

Automatically set the calendar to a specific date upon initialization, such as one month from the current date, guiding users towards a default selection:

Day of week labels

Enhance usability by displaying day-of-week labels, offering users a clearer context for date selection. This variant is particularly useful for scheduling or planning applications where the day of the week is a critical factor:

Range Selection

Implement range selection functionality within the calendar for scenarios requiring a start and end date, such as booking periods or event planning. This feature enhances the component's flexibility, accommodating a broader range of use cases:

Multiview Calendar

Showcase a multiview calendar for comparing dates across multiple months simultaneously. This variant is exceptionally beneficial for long-term planning or date comparisons, providing a comprehensive overview of available dates:

Theme Customization

The Calendar component comes with a default theme designed for adaptability and ease of integration:

root{}(7 keys)

Learn more about how to customize in the Theme documentation.

API

Optimize the Calendar component with a comprehensive set of configurable properties:

Prop	Description	Default
`value`	The selected date(s) for the calendar. `Date \| [Date, Date] \| [Date, undefined] \| [undefined, undefined]`
`min`	The minimum selectable date for the calendar. `Date`
`max`	The maximum selectable date for the calendar. Can also be set to 'now' to use the current date. `Date \| "now"`
`disabled`	Whether the calendar is disabled. `boolean`
`isRange`	Whether the calendar is a range picker. `boolean`
`nextArrow`	The text or icon to use for next. `ReactNode`	`›`
`previousArrow`	The text or icon to use for previous. `ReactNode`	`‹`
`showDayOfWeek`	Whether to display day of week labels `boolean`
`showToday`	Whether to highlight the today. `boolean`
`animated`	Whether to animate the calendar. `boolean`	`true`
`onChange`	A callback function that is called when the selected date(s) change. `(value: Date \| [Date, Date]) => void`
`onViewChange`	A callback function that is called when the calendar view changes. `(view: CalendarViewType) => void`
`theme`	Theme for the Calendar. `CalendarTheme`

Design and Usability Tips

Efficient Navigation: Ensure the calendar supports comprehensive keyboard navigation, enabling users to select dates without mouse interaction, crucial for accessibility and power users.

Loader Checkbox