Zur Navigation Zum Inhalt Kontakt Menu Trova un componente Descrizione generale Lyne Principi Base Accessibilité Sistema di design Guidelines Deutsch Français Italiano English I nostri principi di design Soluzioni focalizzate sull’utente Riconoscibilità Inclusione Riduzione Olistico Autoesplicativo Orientamento all’attività Adeguatezza Portale della marca FFS Logo Orologio digitale Diritti di utilizzazione Colori die base Colori funzionali Colori Off Brand Icone Icone dell'orario Pittogrammi Informazioni sull’accessibilità Über diesen Guide Contatti Letture consigliate Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Aiuto Processo Contribution Contatto Introduzione Base Componenti Introduzione Base Componenti Introduzione Base Componenti Overview Releases Design Tokens Komponenten Introduzione Base Informazioni Senso & scopo Community Assets Istruzioni Power-Apps Banner pubblicitari digitali SAP Icone delle app Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili Deutsch English Calendar Implementation

The 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.

<sbb-calendar></sbb-calendar>

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 min and 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="1650000000"></sbb-calendar>

Style

The component displays one month by default; two months can be displayed setting the wide property to true.

<sbb-calendar wide="true" selected="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 min and max properties will most likely result in a significant loss of performance.

Events

Consumers can listen to the dateSelected event on the sbb-calendar component to intercept the selected date
which can be read from event.detail.

Keyboard interaction

It's possible to move within the component using the keyboard.

Keyboard Action
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.

Accessibility

For accessibility purposes, the component is rendered as a native table element and each day is a button.

Testing

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.

Properties

Name Attribute Privacy Type Default Description
wide wide public boolean false If set to true, two months are displayed
min min public T | null The minimum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).
max max public T | null The maximum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).
selected selected public T | null The selected date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).
dateFilter date-filter public (date: T | null) => boolean | undefined A function used to filter out dates.

Methods

Name Privacy Description Parameters Return Inherited From
resetPosition public Resets the active month according to the new state of the calendar. void

Events

Name Type Description Inherited From
dateSelected CustomEvent<T> Event emitted on date selection.
Beispiele
Calendar
Calendar With Min And Max
Calendar Wide
Calendar Filter Function
HTML-Markup kopiert.
Playground
Wide Nein Ja Hintergrund White Milk Iron Charcoal Black
Trova un componente

Lyne

Impressum Contatto Impostazioni dei cookie