The calendar view provides a visual overview of a week, a month, or multiple months.

Usage

• Use calendar view to display a visual overview of a week, a month, multiple months, or a range of selected dates.
• Use calendar view to visually present correlations between two dates, for example, consecutive holidays, flight ticket prices in peak season versus off season, hotel room availabilities.

Don’t use calendar view when text-based / list-based components, such as pickers, can fulfill your primary requirement.

Anatomy

The structure is composed of four parts: calendar view container, week label container, date cell container, and month label.

The space below the calendar view container is available for different configurations. for instance, using object cells as an agenda or timeline as a timesheet.

A.  Calendar View Container

B.  Week Label Container

C.  Date Cell Container

D.  Month Label (as Navigation Bar Title or Large Title)

Variations

Each container has its own attributes:

Calendar View Container

There are four types of calendar views. Select the one that best suits the purpose of your app and start designing from there.

1. Month View (Default)
2. Week View
3. Expandable View
4. Date Selection View

Week Label Container

The week label container provides the following types of start day of the week:

1. Sunday (Default) – US Standard
2. Monday – Europe, Asia, Oceania Standard
3. Saturday – Middle East Standard

Date Cell Container

1. Number Only
2. Number with Dot Indicator (Default)
3. Number with Icon Indicator & Legend 

*Two types cannot be mixed. For instance, if your app is currently configured with the “Number Only” type and you want it to display Dot Indicator of the day, please reconfigure your app with the “Number with Indicator” type.

*Also for “Icon Indicator” the icon legend does not come out of the box with the SDK, app teams should try to re-configure/customize the existing chart legend component.

Month Label

The following types of month labels are available: single-line, double-line, and large title. These labels use three-letter, title-case abbreviation. For instance: Jan, Feb, Mar.

1. Single-Line Title (Default)
2. Double-Line Title
3. Large Title – with a large title, the label should be fixed and not be scrollable with the rest of the content

Alternate Calendars

The following types of alternate calendars are available aside from the default Gregorian calendar: Chinese, Hebrew, and Islamic.

1. Chinese 
2. Hebrew
3. Islamic

Resources

Development: FUICalendarView, Calendar

SAP Fiori for Android: Calendar

Related Components/Patterns: Pickers, Object Cell, Timeline, KPI Label, Cell Button