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 addizionali 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 Releases Design Tokens Componenti Introduzione Base Informations Introduzione Base Componenti Introduzione Power-Apps Banner pubblicitari digitali SAP IA Design : Base. Icone delle app Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili: Deutsch English Mini-Calendar Info

Was macht die Komponente?

Ein Mini-Calendar ist eine Komponente, die Datumsinformationen möglichst kompakt und platzsparend anzeigt und optional auswählen lässt.

Wann soll die Komponente eingesetzt werden?

  • Um Nutzenden eine Möglichkeit zu geben viele Datumsinformationen zu konsumieren.
  • Um wiederkehrende Ereignisse und deren Muster darzustellen.

Regeln

  • Es können mehrere Monate oder ganze Jahre dargestellt werden.
  • Die Komponente ist nicht barrierefrei und soll nur in Kontexten (z.B. interne Applikationen) genutzt werden, bei der Barrierefreiheit nicht vorgeschrieben ist.
Datepicker Calendar Mini-Calendar-Month
Demo

Spielwiese

Orientierung Horizontal Vertikal Mode (System-Einstellung) Light Dark Hintergrund White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
Default
Auf Storybook ausprobieren HTML einblenden
Vertical
Auf Storybook ausprobieren HTML einblenden
Offset
Auf Storybook ausprobieren HTML einblenden
With Tooltip
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

The sbb-mini-calendar is a component used to display a minimal calendar.

It must be used in combination with one or more sbb-mini-calendar-month,
each one slotting the requested sbb-mini-calendar-day.

<sbb-mini-calendar>
  <sbb-mini-calendar-month date="2025-01">
    <sbb-mini-calendar-day date="2025-01-01"></sbb-mini-calendar-day>
    ...
  </sbb-mini-calendar-month>
  <sbb-mini-calendar-month date="2025-02">
    <sbb-mini-calendar-day date="2025-02-01"></sbb-mini-calendar-day>
    ...
  </sbb-mini-calendar-month>
  ...
</sbb-mini-calendar>

Slots

The sbb-mini-calendar-month are provided via an unnamed slot.
Consumers should check the accuracy of the slotted data, since there's no check on missing or wrongly formatted data.

Style

The orientation of the days in each month can be set using the orientation property, which default value is horizontal.

<sbb-mini-calendar orientation="vertical"> ... </sbb-mini-calendar>

Keyboard interaction

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

Horizontal orientation

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 (eg. from Monday to previous Monday).
Allows movement between different months.
Down Arrow Go to the same day in the next week (eg. from Monday to next Monday).
Allows movement between different months.
Home Go to the first day of the month.
End Go to the last day of the month.
Page Up Go to the same day in the first week (eg. from Monday to the first Monday of the month).
Page Down Go to the same day in the last week (eg. from Monday to the last Monday of the month).

Vertical orientation

Keyboard Action
Left Arrow Go to the same day in the next week (eg. from Monday to next Monday).
Allows movement between different months.
Right Arrow Go to the same day in the next week (eg. from Monday to next Monday).
Allows movement between different months.
Up Arrow Go to previous day.
Down Arrow Go to next day.
Home Go to the first day of the month.
End Go to the last day of the month.
Page Up Go to the first day of the week (eg. from any day to Monday of the same week).
Page Down Go to the last day of the week (eg. from any day to Sunday of the same week).

Accessibility

Even though some WCAG rules have been followed
(e.g., aria-labels on sbb-mini-calendar-days, keyboard navigation, visible focus indicator, correct contrast...),
the component may not be fully accessible due to the small dimensions of sbb-mini-calendar-days and
the usage of a grid implementation for the sbb-mini-calendar-month
(differently from the sbb-calendar, which has a table implementation).

Properties

Name Attribute Privacy Type Default Description
orientation orientation public SbbOrientation 'horizontal' The orientation of days in the calendar.

Slots

Name Description
Use the unnamed slot to add sbb-mini-calendar-month elements.
Contatto

Avete domande? Forse le nostre FAQ o la nostra guida vi saranno d'aiuto, altrimenti potete inserire la vostra domanda nella board corrispondente su Github.

Impressum Contatto Protezione dei dati Impostazioni dei cookie