<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>PlanningCalendar</title>
<script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex">
</script>
<style type="text/css">
#__xmlview0--oPage-intHeader {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
background: linear-gradient(#fff, rgba(240, 240, 240, 0.9));
border-bottom: 1px solid #d4d4d4;
z-index: 1010;
transition: top .4s;
}
</style>
<!-- XML-based view definition -->
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:unified="sap.ui.unified" xmlns="sap.m" class="viewPadding">
<App>
<pages>
<Page id="oPage" title="Appointments" class="marginBoxContent">
<content>
<VBox class="sapUiSmallMargin">
<PlanningCalendar id="PC1" startDate="{path: '/startDate'}" rows="{path: '/people'}" appointmentSelect="handleAppointmentSelect">
<toolbarContent>
<Title text="Title" titleStyle="H4" />
</toolbarContent>
<rows>
<PlanningCalendarRow icon="{pic}" title="{name}" 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>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/Filter',
'sap/ui/model/json/JSONModel',
'sap/m/Popover',
'sap/m/Image'
], function(jQuery, Controller, Filter, JSONModel, Popover, Image) {
"use strict";
var TableController = Controller.extend("myView.Template", {
onInit: function() {
// create model
var oModel = new JSONModel();
oModel.setData({
startDate: new Date("2015", "11", "15", "8", "0"),
people: [{
pic: "sap-icon://employee",
name: "Max Mustermann",
role: "team member",
appointments: [{
start: new Date("2015", "11", "15", "10", "0"),
end: new Date("2015", "11", "15", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
}, {
start: new Date("2015", "11", "16", "0", "0"),
end: new Date("2015", "11", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
}],
headers: [{
start: new Date("2015", "11", "16", "0", "0"),
end: new Date("2015", "11", "16", "23", "59"),
title: "Private",
type: "Type05"
}, ]
}, {
pic: "https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/demokit/explored/img/johnDoe.png",
name: "John Doe",
role: "team member",
appointments: [{
start: new Date("2015", "11", "15", "08", "30"),
end: new Date("2015", "11", "15", "09", "30"),
title: "Meeting",
type: "Type02",
tentative: false
}, {
start: new Date("2015", "11", "15", "10", "0"),
end: new Date("2015", "11", "15", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
}, {
start: new Date("2015", "11", "15", "11", "30"),
end: new Date("2015", "11", "15", "13", "30"),
title: "Lunch",
type: "Type03",
tentative: true
}],
headers: [{
start: new Date("2015", "11", "15", "8", "0"),
end: new Date("2015", "11", "15", "10", "0"),
title: "Reminder",
type: "Type06"
}, ]
}]
});
this.getView().setModel(oModel);
},
handleAppointmentSelect: function(oEvent) {
var oSource = oEvent.getParameter("appointment");
var oAppointment = oEvent.getParameter("appointment");
var oTitle = oAppointment.getTitle();
var oImage = new Image({
src: "https://tompfister.files.wordpress.com/2014/10/sap_new_logo.png",
width:"100px",
height: "80px"
});
var oPopover = new Popover({
title: oTitle,
placement: "Bottom",
content: [oImage]
}).addStyleClass("sapUiContentPadding");
oPopover.openBy(oSource);
}
});
return TableController;
});
// Instantiate the View and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */