Docs
πŸ—οΈ ⏐ Components
Form
Calendar

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)
      Show all

Learn more about how to customize in the Theme documentation.

API

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

PropDescriptionDefault
valueThe selected date(s) for the calendar.
Date | [Date, Date] | [Date, undefined] | [undefined, undefined]
minThe minimum selectable date for the calendar.
Date
maxThe maximum selectable date for the calendar. Can also be set to 'now' to use the current date.
Date | "now"
disabledWhether the calendar is disabled.
boolean
isRangeWhether the calendar is a range picker.
boolean
nextArrowThe text or icon to use for next.
ReactNode
β€Ί
previousArrowThe text or icon to use for previous.
ReactNode
β€Ή
showDayOfWeekWhether to display day of week labels
boolean
showTodayWhether to highlight the today.
boolean
animatedWhether to animate the calendar.
boolean
true
onChangeA callback function that is called when the selected date(s) change.
(value: Date | [Date, Date]) => void
onViewChangeA callback function that is called when the calendar view changes.
(view: CalendarViewType) => void
themeTheme 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.