Intro

The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.

The calendar card is an integration card that uses the generic structure of the sap.f.card control.

When to Use

You can use the calendar card to show a calendar for one person, based on the single planning calendar.

Do not use it to show multiple appointments/calendars. Use the planning calendar instead.

Components

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

2. Calendar title: Title set by the application team. Use a title that reflects the use of the calendar in your application context.

3. Calendar subtitle: Subtitle set by the application team to further qualify the focus of the calendar.

4. Counter: Indicates how many appointments are displayed on the card and how many exist for the selected day overall.

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

6. Calendar with interactive days: Interactive calendar, showing the selected day, current day, and special days.

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

8. Appointment list: Shows appointments for the selected day. You can define the number of visible appointments.

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

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

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

Appointment List

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.

Responsiveness

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.

Width

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.

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.

Height

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.

Top Tips

• Keep the legend as simple as possible.
• Consider the height of the card when you define the number of visible appointments.

Related Links