<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-resourceroots='{"view": "./"}' data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex">
</script>
<script>
sap.ui.localResources("view");
var app = new sap.m.App({
initialPage: "idMain"
});
var page = sap.ui.view({
id: "idMain",
viewName: "view.Main",
type: sap.ui.core.mvc.ViewType.XML
});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
sap.ui.controller("view.Main", {
onInit : function () {
var oModel = new sap.ui.model.odata.ODataModel("http://services.odata.org/V2/Northwind/Northwind.svc");
this.getView().setModel(oModel);
}
});
<mvc:View
height="100%"
controllerName="view.Main"
xmlns:unified="sap.ui.unified"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page
title="Page"
class="marginBoxContent" >
<VBox class="sapUiSmallMargin">
<PlanningCalendar
id="PC1"
startDate="{path: '/startDate'}"
rows="{path: '/Orders'}"
appointmentSelect="handleAppointmentSelect">
<toolbarContent>
<Title text="Title" titleStyle="H4"/>
</toolbarContent>
<rows>
<PlanningCalendarRow
icon="{pic}"
title="{OrderID}"
text="{role}"
appointments="{appointments}"
intervalHeaders="{headers}">
<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>
</VBox>
</Page>
</mvc:View>