Last Update: Jan 29, 2023

Platform: Web, Mobile

Designer: Anton Fischer, Amelie Fidric

Intro

The planning calendar allows users to see different appointments at the same time and to create new appointments. It allows the user to display appointments for several objects, such as a team calendar, and compare them to each other.

In SuccessFactors we have the use case to display two types of calendar in a dual view. The extension was requested by a feature request to the UI5 develoment team and was delivered with release 1.108.

Usage

• You want to compare calendar objects of the same type with each other over a period of time.
• You require responsive behavior.
• You have less than 100 lines in the calendar.
• You want to show a calendar for one object and a detailed overview of appointments over a long time interval.
• You want to show a complex or graphical representation. In this case, please use the Gantt chart.
• You have more than 100 lines in the calendar. In this case, please use the Gantt chart.

Types

In UI5 there are 2 types of Planning Calendar:

• Planning Calendar
• Single Planning Calendar

Structure & Components

The dual view is displayed in 2 positions in the Planning Calendar: calendar header and in the calendar timeline

Behavior & Interaction

For the Planning Calendar 5 views are offered: day, week, months, months (quarterly), and year.

Responsiveness & Adaptiveness

The planning calendar is based on a UI5 control and thus follows the requirements of responsiveness. In UI5, the Planning Calendar is offered in 3 different sizes: S, M and L. More information can be found in the Fiori Guideline in the respective chapter: https://experience.sap.com/internal/fiori-design-web/planning-calendar/#responsiveness

Application-specific examples

The Planning Calendar is used as a standard component in several SuccessFactors modules without variations.

Accessibility

The Planning Calenadar is a UI5 composite component. It is based on several UI5 controls and thus follows the requirements of the A11y standards.

Resources

Regarding to the standard component of the Planning Calendar there is more information in the Fiori Guideline that is worth paying attention to:

• Planning Calendar - sap.m.PlanningCalendar: https://experience.sap.com/internal/fiori-design-web/planning-calendar/
• Single Planning Calendar - sap.m.SinglePlanningCalendar: https://experience.sap.com/internal/fiori-design-web/single-planning-calendar/

In the UI5 demo kit a version of the dual view of the Planning Calendar is for testing available:

• UI5Samples: https://openui5nightly.hana.ondemand.com/entity/sap.m.PlanningCalendar/sample/sap.m.sample.PlanningCalendar

Link to the feature request: https://jira.tools.sap/browse/FIORITECHP1-24518

sap.m.PlanningCalendar – Dual calendar view – Figma