Components Calendar

Calendar

Overview API Examples Style Tokens

Basic usage

Negative mode

The Calendar component supports a negative mode, suitable for areas with dark background.

Preselected date

The Calendar component can be initialized with a preselected date.

Precision: month

If you need your users to only select a month in a specific year, you can set the precision to “month”.

Precision: year

If you need your users to only select a year, you can set the precision to “year”.

Date range

You can define the earliest and latest selectable dates. This setting automatically applies to all views (day, month, year).

Unavailable dates

Sometimes you just want to mark some specific dates as unavailable, rather than enabling a generic date range. The Calendar component supports this functionality, and allows you to asynchronously determine what dates, months or years should be disabled.