sbb-calendar component displays a calendar that allows the user to select a date.
While being deeply linked to the implementation of the sbb-datepicker-toggle component,
it can be used on its own.
It's possible to set a date using the
dateSelected property. Also, it's possible to place limits on the selection
using the two properties named
max. For these three properties, the accepted formats are:
- Date objects
- ISO String
- Unix Timestamp (number of seconds since Jan 1, 1970)
It's recommended to set the time to 00:00:00.
<sbb-calendar min="1600000000" max="1700000000" selected-date="1650000000"></sbb-calendar>
The component displays one month by default; two months can be displayed setting the
wide property to
<sbb-calendar wide="true" selected-date="1650000000"></sbb-calendar>
It's also possible to filter out unwanted date using the
dateFilter function property.
Note that using the
dateFilter function as a replacement for the
max properties will most likely result in a significant loss of performance.
Consumers can listen to the
dateSelected event on the
sbb-calendar component to intercept the selected date
which can be read from
It's possible to move within the component using the keyboard.
|Left Arrow||Go to previous day.|
|Right Arrow||Go to next day.|
|Up Arrow||Go to the same day in the previous week.|
|Down Arrow||Go to the same day in the next week.|
|Home||Go to the first day of the month.|
|End||Go to the last day of the month.|
|Page Up||Go to the top of the column of the currently selected day.|
|Page Down||Go to the bottom of the column of the currently selected day.|
For accessibility purposes, the component is rendered as a native table element and each day is a button.
To specify a specific date for the current datetime, you can use the
data-now attribute (timestamp in milliseconds).
This is helpful if you need a specific state of the component.
| || ||public|| || ||If set to true, two months are displayed|
| || ||public|| ||The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).|
| || ||public|| ||The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).|
| || ||public|| ||A function used to filter out dates.|
| || ||public|| ||The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).|
| ||public||Resets the active month according to the new state of the calendar.|| |
| || ||Event emitted on date selection.|