Introduction

The SAP UI5 Planning Calendar is a powerful, feature-rich tool that aids in visualizing, scheduling, and managing appointments or tasks efficiently. Designed to be user-friendly and intuitive, the Planning Calendar offers an overview of appointments or tasks over various views, including hours, days, 1 week, 1 month, or even a custom-defined timeline.

Key features of the Planning Calendar include the ability to display appointments over different intervals, support for both single and multiple row layouts, various appointment types, and built-in controls for navigating between different intervals. It is designed with flexibility in mind and can be adapted to handle a variety of use cases. Appointments can be selected, resized, or moved according to your needs, and the overall look and feel of the calendar can be customized as well.

In addition to these, the Planning Calendar also offers built-in support for handling different time zones, special dates like holidays or non-working days, and it even supports screen readers for accessibility.

Whether you’re developing an employee scheduling app, a project management tool, a room booking system, or any other application where time-bound events need to be visualized and managed, the SAP UI5 Planning Calendar can be a great asset. It simplifies complex scheduling tasks, improves productivity, and delivers a superior user experience, aligning perfectly with SAP’s philosophy of helping the world run better.

In the next sections, we will delve deeper into how to use and customize the SAP UI5 Planning Calendar, enriching it with our application-specific data and functionality.

Why we need Planning Calendar in SAP UI5

In any organization or business application, managing time and events efficiently is crucial to achieving goals and maintaining order. This is where the SAP UI5 Planning Calendar comes into play. Here are a few reasons why it’s needed:

1. Ease of use: With its user-friendly interface, the SAP UI5 Planning Calendar simplifies the task of creating, viewing, and managing appointments. It provides an intuitive visualization of events, which allows users to grasp their schedules quickly.

2. Flexibility: The SAP UI5 Planning Calendar is flexible and can be adapted to a variety of use cases. Whether it’s managing employee schedules, tracking project timelines, or scheduling room bookings, the Planning Calendar can be customized to fit your needs.

3. Rich Feature Set: The SAP UI5 Planning Calendar comes packed with features such as support for different intervals (hours, days, 1 week, 1 month), different appointment types, and multiple row layouts. This allows the calendar to cater to a wide range of scheduling requirements.

4. Efficiency: It improves efficiency by reducing the time and effort needed to schedule and reschedule appointments or tasks. Users can easily select, resize, or move appointments according to their needs.

5. Consistency: By using the Planning Calendar in SAP UI5, you maintain consistency with other SAP applications. This allows for a seamless user experience across all your business applications.

6. Accessibility: The Planning Calendar in SAP UI5 is designed with accessibility in mind, with built-in support for screen readers. This ensures that the tool can be used by people with diverse abilities, adhering to inclusivity standards.

7. Customization: The look and feel of the calendar can be tailored according to your needs, enabling you to maintain the branding and aesthetics of your application.

8. Integration: It seamlessly integrates with other SAP UI5 controls and services, making it a robust choice for applications built on the SAP platform.

In summary, the SAP UI5 Planning Calendar provides a robust, user-friendly, and efficient way to handle scheduling tasks in your applications.

How to develop Planning Calendar in SAP UI5

View

<mvc:View controllerName="PlanningCalendar.PlanningCalendar.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
    xmlns:unified="sap.ui.unified">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="My Project Ideas: Planning Calendar in SAP UI5">
                    <content>
                        <Button text="Block for Next Meeting" press="onPressBlock"/>
                        <PlanningCalendar id="planningCalendar" startDate="{path: '/startDate'}" rows="{path: '/rows'}" appointmentsVisualization="Filled"
                            appointmentSelect="handleAppointmentSelect" showEmptyIntervalHeaders="false" showWeekNumbers="true">
                            <rows>
                                <PlanningCalendarRow startDate="{startDate}" appointments="{appointments}">
                                    <appointments>
                                        <unified:CalendarAppointment resizable="true" startDate="{startDate}" endDate="{endDate}" title="{title}" text="{text}" type="{type}"
                                            resize="handleAppointmentResize"/>
                                    </appointments>
                                </PlanningCalendarRow>
                            </rows>
                        </PlanningCalendar>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

Controller

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    'sap/m/MessageBox',
    'sap/ui/core/date/UI5Date'
], function (Controller, JSONModel, MessageBox, UI5Date) {
    "use strict";

    return Controller.extend("PlanningCalendar.PlanningCalendar.controller.Main", {
        onInit: function () {
            var currentDate = new Date();
            var oData = {
                startDate: new Date(),
                rows: [{
                    startDate: new Date(),
                    appointments: [{
                        startDate: new Date(),
                        endDate: new Date(currentDate.getTime() + (3 * 60 * 60 * 1000)),
                        title: "Meeting with SAP",
                        text: "Discuss project status",
                        type: "Type01",
                        pic: "sap-icon://sap-ui5",
                    }]
                }]
            };

            var oModel = new JSONModel(oData);
            this.getView().setModel(oModel);
        },

        handleAppointmentSelect: function (oEvent) {
            var oAppointment = oEvent.getParameter("appointment"),
                sSelected;
            if (oAppointment) {
                sSelected = oAppointment.getSelected() ? "selected" : "deselected";
                MessageBox.show("'" + oAppointment.getTitle() + "' " + sSelected);
            } else {
                var aAppointments = oEvent.getParameter("appointments");
                var sValue = aAppointments.length + " Appointments selected";
                MessageBox.show(sValue);
            }
        },

        onPressBlock: function (oEvent) {
            var currentDate = new Date();
            var oData = {
                startDate: new Date(),
                rows: [{
                    startDate: new Date(),
                    appointments: [{
                        startDate: new Date(),
                        endDate: new Date(currentDate.getTime() + (3 * 60 * 60 * 1000)),
                        title: "Meeting with SAP",
                        text: "Discuss project status",
                        type: "Type01",
                        pic: "sap-icon://sap-ui5",
                    }, {
                        startDate: new Date(currentDate.getTime() + (3 * 60 * 60 * 1000)),
                        endDate: new Date(currentDate.getTime() + (6 * 60 * 60 * 1000)),
                        title: "Next Meeting with SAP",
                        text: "Discuss Next Meeting",
                        type: "Type02",
                        pic: "sap-icon://sap-ui5",
                        tentative: false
                    }]
                }]
            };

            var oModel = new JSONModel(oData);
            this.getView().setModel(oModel);
        }
    });
});

Output