<!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>