Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Additional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Components Overview Base Informations Overview Base Components Overview App Icons Power-Apps Digital banner ads SAP Design Guidelines AI Design: Basics Mini-Calendar Info

What does the component do?

A mini calendar is a component that displays date information as compactly and space-savingly as possible and allows it to be selected optionally.

When should the component be used?

  • To give users the opportunity to consume a lot of date information.
  • To display recurring events and their patterns.

Rules

  • Several months or entire years can be displayed.
  • The component is not accessible and should only be used in contexts (e.g., internal applications) where accessibility is not required.
Datepicker Calendar Mini-Calendar-Month
Demo

Playground

Orientation Horizontal Vertical Mode (System Setting) Light Dark Background White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
Default
Try it out on Storybook Show HTML
Vertical
Try it out on Storybook Show HTML
Offset
Try it out on Storybook Show HTML
With Tooltip
Try it out on Storybook Show HTML
Copy HTML to clipboard. 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

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint Contact Data privacy Cookie settings