All appointments have a different row (sap.m.PlanningCalendar) - sapui5

Question

I am trying to port my old application with "sap.me.OverlapCalendar" to the new "sap.m.PlanningCalendar", I want to show appointments just for one person. I found a difference in the way the appointments display.
The template I use is:
var oTemplateRow = new sap.m.PlanningCalendarRow("RowTemplate", {
appointments:[
new sap.ui.unified.CalendarAppointment({
startDate: {
path: 'CalendarModel>DateFrom',
formatter: util.Formatter.toStartDate
},
endDate: {
path: 'CalendarModel>DateTo',
formatter: util.Formatter.toEndDate
},
title: "{CalendarModel>CardName} - {CalendarModel>ProjectName}",
text: "Gewerkte uren: {CalendarModel>WorkedHours}",
type: "Type04",
tentative: false,
key: "{CalendarModel>ReportID}"
})]
});
Which is bound to the Calendar control with:
bindAggregation("rows", "CalendarModel>/Items/", oTemplateRow);
The data is showing in the calendar but the way it shows is different.
Old calendar: http://imgur.com/3glZRtT
New calendar: http://imgur.com/snnsWVE
What should I do to get the same output?

Answer 1

You have to change the model: for example, at the root of the model you create an array corresponding to rows of the calendar, and each row should contain an array of appointments.
A sample json file can look like this:
{
"items": [{
"title": "Item1",
"appointments": [{
"text": "appointment1",
"start": "2017-02-17T09:30:00",
"end": "2017-02-17T13:00:00"
}, {
"text": "appointment2",
"start": "2017-02-17T09:45:00",
"end": "2017-02-17T13:10:00"
}]
}, {
"title": "Item2",
"appointments": [{
"text": "appointment3",
"start": "2017-02-17T10:30:00",
"end": "2017-02-17T14:00:00"
}, {
"text": "appointment4",
"start": "2017-02-17T10:45:00",
"end": "2017-02-17T14:10:00"
}]
}]
}
"items" is an array of calendar rows, and each item contains array of appointments. The binding of the control should be more complex. I used such a file a base for JSON model and the controller code looks like this:
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("QuickStartApplication.controller.View1", {
onInit: function() {
var oCale = this.getView().byId("PC1");
var oModel = this.getOwnerComponent().getModel("CalendarModel");
this.getView().setModel(oModel, "CalendarModel");
var oTemplateRow = new sap.m.PlanningCalendarRow("RowTemplate", { title: "{CalendarModel>title}" });
oTemplateRow.bindAggregation("appointments", {
path: "CalendarModel>appointments",
template: new sap.ui.unified.CalendarAppointment({
title: "{CalendarModel>text}",
startDate: {
path: "CalendarModel>start",
formatter: this.toDate
},
endDate: {
path: "CalendarModel>end",
formatter: this.toDate
}
}),
templateShareable: true
});
oCale.bindAggregation("rows", {
path: "CalendarModel>/items",
template: oTemplateRow,
templateShareable: true
});
},
toDate: function(sValue) {
if (sValue) {
return new Date(sValue); //
}
}
});
});
Note that first you create a row template and then bind its "appointments" aggregation to the "appointments" property of "CalendarModel" model with template for CalendarAppointment creation. Then you create a binding for calendar rows referring to the row template.