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-Month Info

What does the component do?

It is part of the mini-calendar component.

When should the component be used?

  • Only within the mini-calendar component.
Mini-Calendar-Day Mini-Calendar
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
Copy HTML to clipboard. Implementation

The sbb-mini-calendar-month is a component used to group
many sbb-mini-calendar-day.

The component needs to be wrapped in a sbb-mini-calendar,
and it requires a date property in ISOString format (YYYY-MM).

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

Slots

The sbb-mini-calendar-day 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 month name is always displayed at the component's bottom;
the year is displayed on top only for January and for the first slotted month in the sbb-mini-calendar.

The orientation value of the sbb-mini-calendar parent controls the component's orientation via CSS rules.

Properties

Name Attribute Privacy Type Default Description
date date public string '' Date as ISO string (YYYY-MM-DD)

Slots

Name Description
Use the unnamed slot to add sbb-mini-calendar-day 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