Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs supplémentaires Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Releases Design Tokens Composants Aperçu Base Informations Aperçu Base Composants Aperçu Power-Apps Bandeaux publicitaires numériques SAP IA Design : Bases Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: 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.
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Protection des données Paramètres des cookies