I wrote an application which includes Planning Calendar SAPUI5 control. I was inspired by this demo: https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.PlanningCalendarSingle/preview
I have a problem with binding model to Calendar control in xml view.
In above demo, model is hardcoded inside a controller and looks like this:
var oModel = new JSONModel();
oModel.setData({
startDate: new Date("2017", "0", "08", "8", "0"),
people: [{
name: "John Miller",
appointments: [{
start: new Date("2016", "10", "15", "10", "0"),
end: new Date("2016", "11", "25", "12", "0"),
title: "Team collaboration",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2016", "09", "13", "9", "0"),
end: new Date("2016", "01", "09", "10", "0"),
title: "Reminder",
type: "Type06"
},
{
start: new Date("2016", "07", "10", "0", "0"),
end: new Date("2016", "09", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
},
{
start: new Date("2016", "07", "1", "0", "0"),
end: new Date("2016", "09", "31", "23", "59"),
title: "New quarter",
type: "Type10",
tentative: false
},
{
start: new Date("2017", "0", "03", "0", "01"),
end: new Date("2017", "0", "04", "23", "59"),
title: "Workshop",
info: "regular",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "0", "05", "08", "30"),
end: new Date("2017", "0", "05", "09", "30"),
title: "Meet Donna Moore",
type: "Type02",
tentative: false
},
{
start: new Date("2017", "0", "08", "10", "0"),
end: new Date("2017", "0", "08", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "0", "09", "0", "0"),
end: new Date("2017", "0", "09", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type02",
tentative: false
},
{
start: new Date("2017", "0", "11", "0", "0"),
end: new Date("2017", "0", "12", "23", "59"),
title: "Education",
info: "",
type: "Type03",
tentative: false
},
{
start: new Date("2017", "0", "16", "00", "30"),
end: new Date("2017", "0", "16", "23", "30"),
title: "New Product",
info: "room 105",
type: "Type04",
tentative: true
},
{
start: new Date("2017", "0", "18", "11", "30"),
end: new Date("2017", "0", "18", "13", "30"),
title: "Lunch",
info: "canteen",
type: "Type03",
tentative: true
},
{
start: new Date("2017", "0", "20", "11", "30"),
end: new Date("2017", "0", "20", "13", "30"),
title: "Lunch",
info: "canteen",
type: "Type03",
tentative: true
},
{
start: new Date("2017", "0", "18", "0", "01"),
end: new Date("2017", "0", "19", "23", "59"),
title: "Working out of the building",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "0", "23", "08", "00"),
end: new Date("2017", "0", "24", "18", "30"),
title: "Discussion of the plan",
info: "Online meeting",
type: "Type04",
tentative: false
},
{
start: new Date("2017", "0", "25", "0", "01"),
end: new Date("2017", "0", "26", "23", "59"),
title: "Workshop",
info: "regular",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "2", "30", "10", "0"),
end: new Date("2017", "4", "33", "12", "0"),
title: "Working out of the building",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "8", "1", "00", "30"),
end: new Date("2017", "10", "15", "23", "30"),
title: "Development of a new Product",
info: "room 207",
type: "Type03",
tentative: true
},
{
start: new Date("2017", "1", "15", "10", "0"),
end: new Date("2017", "2", "25", "12", "0"),
title: "Team collaboration",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "2", "13", "9", "0"),
end: new Date("2017", "3", "09", "10", "0"),
title: "Reminder",
type: "Type06"
},
{
start: new Date("2017", "03", "10", "0", "0"),
end: new Date("2017", "05", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
},
{
start: new Date("2017", "07", "1", "0", "0"),
end: new Date("2017", "09", "31", "23", "59"),
title: "New quarter",
type: "Type10",
tentative: false
}
],
headers: [
{
start: new Date("2017", "0", "08", "0", "0"),
end: new Date("2017", "0", "08", "23", "59"),
title: "National holiday",
type: "Type04"
},
{
start: new Date("2017", "0", "10", "0", "0"),
end: new Date("2017", "0", "10", "23", "59"),
title: "Birthday",
type: "Type06"
},
{
start: new Date("2017", "0", "17", "0", "0"),
end: new Date("2017", "0", "17", "23", "59"),
title: "Reminder",
type: "Type06"
}
]
}
]
});
this.getView().setModel(oModel);
XML view on the other hand, looks like this:
<PlanningCalendar
id="PC1"
showRowHeaders="false"
startDate="{path: '/startDate'}"
viewKey="Day"
rows="{path: '/people'}"
appointmentsVisualization="Filled"
appointmentSelect="handleAppointmentSelect"
intervalSelect="handleIntervalSelect"
showEmptyIntervalHeaders="false">
<toolbarContent>
<Title text="Title" titleStyle="H4"/>
<ToolbarSpacer/>
<ToggleButton icon="sap-icon://decrease-line-height"
tooltip="Toggle Day Names Line"
press="toggleDayNamesLine"/>
</toolbarContent>
<rows>
<PlanningCalendarRow
appointments="{path : 'appointments', templateShareable: 'true'}"
intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<appointments>
<unified:CalendarAppointment
startDate="{start}"
endDate="{end}"
icon="{pic}"
title="{title}"
text="{info}"
type="{type}"
tentative="{tentative}">
</unified:CalendarAppointment>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment
startDate="{start}"
endDate="{end}"
icon="{pic}"
title="{title}"
type="{type}">
</unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
I copied exact same code with one difference. My model is not a default view model, but it has an ID:
this.getView().setModel(oModel, "calendarModel");
Of course, because of that change I cannot write in my xml view:
rows="{path: '/people'}"
Instead, I wrote something like this:
<PlanningCalendar id="PC1" showRowHeaders="false" startDate="{path: '/startDate'}" viewKey="Day" rows="{path: 'calendarModel>/people'}"
appointmentsVisualization="Filled" appointmentSelect="handleAppointmentSelect" intervalSelect="handleIntervalSelect"
showEmptyIntervalHeaders="false">
<toolbarContent>
<Title text="Title" titleStyle="H4"/>
<ToolbarSpacer/>
<ToggleButton icon="sap-icon://decrease-line-height" tooltip="Toggle Day Names Line" press="toggleDayNamesLine"/>
</toolbarContent>
<rows>
<PlanningCalendarRow appointments="{path : 'appointments', templateShareable: 'true'}" intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<appointments>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" text="{info}" type="{type}"
tentative="{tentative}"></unified:CalendarAppointment>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" type="{type}"></unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
The problem is, I can't see any appointments. Planning calendar control still shows one row (because there is only one person in that model), but it's totally empty.
I suspect, there is something wrong with my path:
<PlanningCalendarRow appointments="{path : 'appointments', templateShareable: 'true'}" intervalHeaders="{path: 'headers', templateShareable: 'true'}">
But I have no idea how to write it correctly.
Important note: If I change my "calendarModel" model to default view model (without ID), everything works perfectly fine. I can see all appointments from my model.
path: 'calendarModel>appointments',{calendarModel>tentative}etc etc - Jorg