# Mini-Calendar Component of the SBB design system Lyne. - Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`) - Structure: main element with parts; use parts only within the element they belong to - Categories: Form - Status: Design guidelines complete ## Links - Page on digital.sbb.ch: https://digital.sbb.ch/en/design-system/lyne/components/mini-calendar/ - Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-mini-calendar--docs - Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/mini-calendar/overview (API: https://lyne-angular.app.sbb.ch/angular/components/mini-calendar/api) - Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-69 - GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/mini-calendar ## Elements - `sbb-mini-calendar`: It displays a minimal calendar, together with the `sbb-mini-calendar-month` and `sbb-mini-calendar-day`. - `sbb-mini-calendar-month`, only within `sbb-mini-calendar`: It displays a month in the `sbb-mini-calendar`. - `sbb-mini-calendar-day`, only within `sbb-mini-calendar-month`: It displays a day in the `sbb-mini-calendar-month`. ## Related components - Similar: [Calendar](https://digital.sbb.ch/en/design-system/lyne/components/calendar/index.md), [Datepicker](https://digital.sbb.ch/en/design-system/lyne/components/datepicker/index.md) ## Overview ### What does the component do? The mini calendar displays date information very compactly. Each day is a small dot that can be coloured or marked. Days can optionally be selected. ### When should the component be used? * To show many days, several months or entire years in little space. * To make recurring events and patterns visible, e.g. days of operation. ### Rules. * The mini calendar is not a replacement for the [calendar](https://digital.sbb.ch/en/design-system/lyne/components/calendar/) or [datepicker](https://digital.sbb.ch/en/design-system/lyne/components/datepicker/). Use those to pick a specific date. * Colours and markers need a legend. Meaning must not be conveyed by colour alone. * The component is only partially accessible (small days, grid structure). If accessibility is required, provide the information in an additional way, or use the component only in internal applications. ## Implementation (web components) The ``, together with `` and ``, are components used to display a minimal calendar. The `` requires usage of the `date` property/attribute in ISO string format (YYYY-MM). The `` requires usage of the `date` property/attribute in ISO string format (YYYY-MM-DD). ```html ... ... ... ``` Consumers should check the accuracy of the slotted data, since there's no check on missing or wrongly formatted data. It's also possible to display a tooltip on hover using the `sbb-tooltip` attribute (when using the `tooltip` module), passing the date with the desired format. For better usability, it's suggested to set the `sbb-tooltip-open-delay` attribute too. ```html ``` ### Style The orientation of the days in each month can be set using the `orientation` property, which default value is `horizontal`. ```html ... ``` For the `` 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 ``. The `orientation` value of the `` parent controls the component's orientation via CSS rules. The `` component has a `color` property, which is used to change the dot color. Default colors are provided for `charcoal`, `cloud`, `orange`, `red` and `sky` values; moreover, consumers can write their own CSS rules for custom values. ```css sbb-mini-calendar-day[color='my-custom-color'] { color: lightskyblue; } ``` ```html ``` Similarly, a property named `marker` determines the shape of the dot. Default styles are provided for `target`, `circle`, `slash` and `cross` values. Consumers can write their own CSS rules for different values. ### 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-label`s on ``s, keyboard navigation, visible focus indicator, correct contrast...), the component may not be fully accessible due to the small dimensions of ``s and the usage of a grid implementation for the `` (differently from the ``, which has a table implementation). ## API (web components) Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/mini-calendar/api.md