Calendar

Lab component

Calendar enables users to quickly navigate to and select a single date or range of dates.

Density
Mode

To use the Calendar component, compose it with the provided children

CalendarNavigation - provides year/month dropdowns and forward/back controls for the visible month. CalendarWeekHeader - provides a header for CalendarDateGrid indicating the day of the week. CalendarDateGrid - provides a grid of buttons that represent the days from a calendar month.

Density
Mode

calendar controls or add additional content.

Use the Calendar component when you need a versatile date selection tool that supports single, range, multiselect, or offset dates. This flexibility makes it ideal for financial applications, event scheduling, project timelines, and other scenarios where different date selection modes are necessary.

  • For tasks other than selecting a date, such as picking a time or displaying event information.
  • If the date or range is pre-determined and cannot be specified by the user. In such cases, consider showing date options in a dropdown instead.

To import Calendar from the Salt lab package, use:

To import CalendarNavigation from the Salt lab package, use:

To import CalendarWeekHeader from the Salt lab package, use:

To import CalendarDateGrid from the Salt lab package, use:

NameTypeDescriptionDefault
NameTypeDescriptionDefault
NameTypeDescriptionDefault