Skip to Content
Technical Articles

Planning Calendar in SAP UI5

Hi All,

In this blog post, I am going to explain a business scenario that I had gone through and how I gave a solution to it.

Business Scenario:

Develop a web application that shows a calendar showing which agent is assigned to jobs on which days at which location.

Solution:

I have designed and developed SAP UI5 Responsive Web Application using sap.m.planningcalendar which displays rows with appointments for different entities (such as persons or teams) for the selected time interval.

About Planning Calendar:

Planning Calendar containing multiple rows with appointments, where each row represents a different person.

We can configure different time-interval views that make us switch between, such as hours or days, and even a whole week/month. The available navigation allows us to select a specific interval using a picker, or move to the previous/next interval using arrows.

The PlanningCalendar uses parts of the sap.ui.unified library.

Logon to the Business Application Studio and follow the below steps.

Step 1:

Create a Sample Application named “Planning Calendar”.

Step 2:

Step 2.1: Open the View1.view.xml file and add the below libraries.

xmlns:core=”sap.ui.core”

xmlns:unified=”sap.ui.unified”

Step2.2: Add the below code.

<PlanningCalendar
			id="PC1"
			startDate="{path: '/startDate'}"
			rows="{path: '/people'}"
			appointmentsVisualization="Filled"
			appointmentSelect="handleAppointmentSelect"
			showEmptyIntervalHeaders="false"
			showWeekNumbers="true">	
			<rows>
				<PlanningCalendarRow				
					title="{name}"				
					appointments="{path : 'appointments', templateShareable: true}">				
					<appointments>
						<unified:CalendarAppointment
							startDate="{start}"
							endDate="{end}"							
							title="{title}"
							text="{info}"
							type="{type}"
							tentative="{tentative}">
						</unified:CalendarAppointment>
					</appointments>					
				</PlanningCalendarRow>
			</rows>
		</PlanningCalendar>	

Step3:

Open the View1.controller.js file and add the below code.

  onInit: function () {
                // create model
                var oModel = new JSONModel();
                oModel.setData({
                    startDate: new Date("2020", "11", "01", "8", "0"),
                    people: [{
                        name: "Sunil",
                        appointments: [
                            {
                                start: new Date("2020", "11", "1", "08", "30"),
                                end: new Date("2020", "11", "8", "09", "30"),
                                title: "Telangana",
                                info: "Manikonda,Hyderabad",                               
                                type: "Type02",
                                tentative: false
                            },
                            {
                                start: new Date("2020", "11", "11", "10", "0"),
                                end: new Date("2020", "11", "11", "12", "0"),
                                title: "Andhra Pradesh",
                                info: "Balaji Colony,Tirupathi",
                                type: "Type01",
                                tentative: false
                            },
                            {
                                start: new Date("2020", "11", "15", "10", "0"),
                                end: new Date("2020", "11", "15", "12", "0"),
                                title: "Andhra Pradesh",
                                info: "MVP Colony,Visakapatnam",
                                type: "Type01",
                                tentative: false
                            }


                        ]

                    },
                    {
                        name: "Anil",
                        appointments: [
                            {
                                start: new Date("2020", "11", "1", "18", "00"),
                                end: new Date("2020", "11", "2", "19", "10"),
                                title: "Telangana",
                                info: "Madhapur,Hyderabad",
                                type: "Type04",
                                tentative: false
                            },
                            {
                                start: new Date("2020", "11", "5", "18", "00"),
                                end: new Date("2020", "11", "8", "19", "10"),
                                title: "Telangana",
                                info: "Banjara Hills,Hyderabad",
                                type: "Type04",
                                tentative: false
                            },
                            {
                                start: new Date("2020", "11", "11", "18", "00"),
                                end: new Date("2020", "11", "15", "19", "10"),
                                title: "Andhra Pradesh",
                                info: "Rushikonda,Visakapatnam",
                                type: "Type04",
                                tentative: false
                            }
                        ]

                    },
                    {
                        name: "Chaithanya",
                        appointments: [
                            {
                                start: new Date("2020", "11", "15", "08", "30"),
                                end: new Date("2020", "11", "15", "09", "30"),
                                title: "Telangana",
                                info: "Jiblee Hills,Hyderabad",
                                type: "Type02",
                                tentative: false
                            },

                            {
                                start: new Date("2020", "11", "1", "11", "0"),
                                end: new Date("2020", "11", "31", "23", "59"),
                                title: "Telangana",
                                info: "Mothi Nagar,Hyderabad",
                                type: "Type10",
                                tentative: false
                            }
                        ]

                    }
                    ]
                });
                this.getView().setModel(oModel);

            }

Step4:

Run the Application. The Output screen would be like below. By default Hours view will be selected.

We can navigate to different Views by selecting options available in the dropdown like below.

We can see 1 month View in Ipad Mode like below:

Step5:

Sometimes in Month view, we can’t able to see the clear information (Location) of the appointment. For that, we are adding a message box to pops up while clicking on the selected appointment.

Add the below function in js file.

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

Reload the application and click on any of the appointments to show detailed info.

Conclusion: By the following, we have successfully visualized the Agent details clearly in different Views.

 

I hope it helps.

Thank you.

1 Comment
You must be Logged on to comment or reply to a post.
  • Hello Sai,

    nice example, this was exactly I was looking for.

    I'm trying to map fields of type date from ODataSource into the single Instance unified:CalendarAppointment but can't see any appointments in the calendar controll.

    <SinglePlanningCalendar
                        class="sapUiSmallMarginTop"
                        viewChange="handleViewChange"
                        headerDateSelect="handleHeaderDateSelect"
                        moreLinkPress="handleMoreLinkPress"
                        startDate="{path: 'ConfState>/date'}"
                        enableAppointmentsDragAndDrop="false"
                        enableAppointmentsResize="false"
                        enableAppointmentsCreate="false"
                        appointments="{path: '/xFFLExTimCnFSet'}">
                    <views>
                        <SinglePlanningCalendarDayView key="DayView" title="{i18n>filter.time.day}"/>
                        <SinglePlanningCalendarWeekView key="WeekView" title="{i18n>filter.time.week}"/>
                        <SinglePlanningCalendarMonthView key="MonthView" title="{i18n>filter.time.month}"/>
                    </views>
                    <appointments>
                        <unified:CalendarAppointment
                                title="{Description}"
                                text="{Description}"
                                type="{TimSta}"
                                icon="{icon}"
                                startDate="{StartDate}"
                                endDate="{EndDate}">
                        </unified:CalendarAppointment>
                    </appointments>
                </SinglePlanningCalendar>

    My single data item from ODataSource (the root path is here /xFFLExTimCnFSet) has fields StartDate, StartTime, EndDate, EndTime, Description, ...

    Is there anything special I have to care about? Maybe the problem ist that the fields "StartDate" and "EndDate" contains only day, month and year values and time value is zero.  How would be the best approach to combine those StartDate+StartTime and EndDate+EndTime repectivelly before the data will is given to the Calendar control?

    Thanks!