- Header: Basic information about the calendar card, including the title, subtitle, and appointment counter.
You can define a navigation target for the header area (recommended). This is typically the underlying application containing the full calendar.
- Calendar title: Title set by the application team. Use a title that reflects the use of the calendar in your application context.
- Calendar subtitle: Subtitle set by the application team to further qualify the focus of the calendar.
- Counter: Indicates how many appointments are displayed on the card and how many exist for the selected day overall.
- Calendar navigation: Users can navigate to the previous/next period (for example previous/next month) or use the picker to select the month and year directly.
- Calendar with interactive days: Interactive calendar, showing the selected day, current day, and special days.
- Legend: In-place legend. You can specify the number of items that are shown. The More (x) text indicates how many legend items are hidden.
The different types of legend items are indicated by different shapes: Squares refer to highlighted days, circles refer to types of appointment.
Group titles from the planning calendar legend are not shown in the calendar card.
- Appointment list: Shows appointments for the selected day. You can define the number of visible appointments.
- Appointment duration: Indicates the duration using a dynamic combination of start date, duration, and end date. The format is determined automatically based on the user’s locale.
- Appointment: The appointment can have an icon, a title, and a subtitle.
The appointment title and subtitle do not wrap. If there is insufficient space on the card, the text is truncated.
- Indicator for more appointments: The More button indicates that additional appointments exist for the selected day.
You can define a navigation target for the button (recommended). This is typically the detail app containing all the appointments.
Behavior and Interaction
Calendar Card Header
When a day is selected, the counter adapts to show the number of appointments for that day (visible appointments/total appointments).
If a navigation target has been defined, clicking the navigation header opens the corresponding application.
Selecting a Date
Instead of offering a date picker in a popover, the calendar card changes views in place and allows the user to drill in.
At each level, the user can select the relevant period, navigate back and forth using the Previous and Next arrows, or drill down to the next level using the date picker.
|View||Selection||Previous/Next Arrows||Date Picker Display||View Opened by Date Picker Link|
|1||Days in the month||Day||Previous month, next month||Selected month and year||Months in the selected year|
|2||Months in the year||Month||Previous year, next year||Selected year||Years in a year interval|
|3||Years in a year interval||Year||Previous year interval, next year interval||Selected year interval||Set of year intervals|
|4||Set of year intervals||Year interval||Previous set of year intervals, next set of year intervals||n/a||n/a|
Calendar card - Picker views
When a day is selected, the appointment list adapts to show the appointments for that day.
If a navigation target has been set for the appointment, clicking the appointment navigates to the corresponding application (one click area).
If additional appointments exist, and a navigation target has been defined, clicking More opens the corresponding application.
The responsive behavior of the calendar card depends on the container control of the host environment (for example, SAP Fiori launchpad). The size of the card adapts dynamically to the size of the container.
Calendar cards adapt to the available width. If the width exceeds 589 px, the card switches automatically from a 1-column layout to a 2-column layout.
|295 px (minimum width)||1 column|
|295 – 589 px||1 column|
|> 589 px||2 columns|
You configure the width of the calendar card by specifying the number of grid columns. The width of the card (and thus the breakpoint for the 2-column layout) is then determined by the grid.
The height of the calendar card is determined by the content (no scrolling possible). It depends on the number of appointments that exist for the selected day and the maximum number of visible appointments you have defined.
When the width exceeds 589px and the card rearranges into two columns, and the height of the card shrinks. The minimum number of rows is determined by the number of visible appointments.
Note: If the calendar card snaps to the grid row (depending on overall card snapping behavior), this will sometimes result in blank space in the card.
- Keep the legend as simple as possible.
- Consider the height of the card when you define the number of visible appointments.