Special Dates on Planning Calendar in SAP UI5

Hi All,

In this blog post, I am going to explain the situation where the requirement is to highlight the days that are occupied with appointments by default and should display the occupied appointments once after clicking on highlighted days.

So we have the availability of special dates control in sap.m.planningcalendar, with that we can give a solution to it.

Please refer to my last blog for developing sample planning calendar Application.

https://blogs.sap.com/2020/11/30/planning-calendar-in-sap-ui5-using-business-application-studiobas/

After that follow the below steps:

Step1:

Open the View1.view.xml and copy the below code:

<PlanningCalendar
			id="PC1"
			startDate="{path: '/startDate'}"
			rows="{path: '/people'}"
			appointmentsVisualization="Filled"
			appointmentSelect="handleAppointmentSelect"
			showEmptyIntervalHeaders="false"
			showWeekNumbers="true"
            specialDates="{path: 'splDatesModel>/AppointmentArray', templateShareable: 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>
            	<specialDates>
					<unified:DateTypeRange
							startDate="{splDatesModel>start}"
							endDate="{splDatesModel>end}"
							type="{splDatesModel>type}">
					</unified:DateTypeRange>
				</specialDates>
		</PlanningCalendar>

Step2:

Open the View1.controller.js and paste the below code:

         onInit: function () {
                // create model
                var obj = {
                    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", "20", "11", "0"),
                                end: new Date("2020", "11", "26", "23", "59"),
                                title: "Telangana",
                                info: "Mothi Nagar,Hyderabad",
                                type: "Type10",
                                tentative: false
                            }
                        ]

                    }
                    ]             
                };
                var oModel = new JSONModel();
                oModel.setData(obj);
                this.getView().setModel(oModel);

                var AppointmentArray = [];
                
                for (var i = 0; i < obj.people.length; i++) {
                    if (obj.people[i].appointments) {
                        obj.people[i].appointments.forEach(element => {
                        AppointmentArray.push(element);                              
                        });
                    }
                }
                console.log(AppointmentArray);
                var splDatesobj = {
                    "AppointmentArray" :AppointmentArray
                }
              
                var oModel = new JSONModel();
                oModel.setData(splDatesobj);
                this.getView().setModel(oModel, "splDatesModel");


            },

            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);
                }
            }

Step3:

Re-run the application. The output screen would be like below with highlighted dates.

Conclusion:

By the following, we have successfully highlighted the days that are occupied with appointments.

I hope it helps,

Thank You.