Skip to content

Instantly share code, notes, and snippets.

@ikiw
Created July 22, 2015 13:55
Show Gist options
  • Save ikiw/9630072a0a9112d13b91 to your computer and use it in GitHub Desktop.
Save ikiw/9630072a0a9112d13b91 to your computer and use it in GitHub Desktop.
custom days in ui5 calendar
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Calendar - sap.me</title>
<script src="/sapui5/resources/sap-ui-core.js" type="text/javascript"
id="sap-ui-bootstrap" data-sap-ui-libs="sap.m, sap.me"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-language="FR">
</script>
<script type="text/javascript">
//no var to ease debug from console
jQuery.sap.require("sap.me.Calendar");
calendar = new sap.me.Calendar({
monthsPerRow: 1,
currentDate: "2013/04/01",
firstDayOffset: 0,
enableMultiselection: false,
singleRow: true,
days:["abc","xyz","234","sdf","dfg","345","jhj"]
});
debugger;
calendar.toggleDatesType( ["2013/04/01"], sap.me.CalendarEventType.Type01, true);
calendar.toggleDatesType( ["2013/04/04"], sap.me.CalendarEventType.Type04, true);
calendar.toggleDatesType( ["2013/04/02"], sap.me.CalendarEventType.Type06, true);
calendar.toggleDatesType( ["2013/04/03"], sap.me.CalendarEventType.Type07, true);
var msgLabel = new sap.m.Label({width:"100%"});
calendar.attachTapOnDate(function(oEvent){
debugger;
msgLabel.setText("you tapped on "+ oEvent.getParameters().date + " didSelected: " + oEvent.getParameters().didSelect);
var d = new Date(oEvent.getParameters().date + "GMT");
var tmp = {navigation: []};
var j = 0;
for (var i=0; i<data.navigation.length; i++) {
if (data.navigation[i]["date"] == d.toISOString().substring(0,10)) {
console.log(data.navigation[i]);
tmp.navigation[j] = data.navigation[i];
j++;
}
}
debugger;
list.getModel().setData(tmp);
});
calendar.attachChangeCurrentDate(function(oEvent){
msgLabel.setText("you navigated to new date: "+ oEvent.getParameters().currentDate);
});
calendar.attachChangeRange(function(oEvent){
msgLabel.setText("you selected a range of dates from: "+ oEvent.getParameters().fromDate + " to: "+ oEvent.getParameters().toDate);
});
var unselectBtn = new sap.m.Button({text:"unselect all", tap:function(){
var aDates = calendar.getSelectedDates();
calendar.unselectAllDates();
msgLabel.setText("unselected "+ aDates.length +" dates");
}});
/* EDIT */
var data = {
navigation : [{
event : "Event1",
date: "2013-04-01",
startTime: "12:00",
endTime: "13:00",
title: "All Heands Meeting",
desc: "Long description of the meeting"
}, {
event : "Event1",
date: "2013-04-01",
startTime: "12:00",
endTime: "13:00",
title: "All Heands Meeting",
desc: "Long description of the meeting"
}, {
event : "Event1",
date: "2013-04-02",
startTime: "12:00",
endTime: "13:00",
title: "All Heands Meeting",
desc: "Long description of the meeting"
}, {
event : "Event1",
date: "2013-04-02",
startTime: "12:00",
endTime: "13:00",
title: "All Heands Meeting",
desc: "Long description of the meeting"
}, {
event : "Event1",
date: "2013-04-05",
startTime: "12:00",
endTime: "13:00",
title: "All Heands Meeting",
desc: "Long description of the meeting"
}]
};
list = new sap.m.List("items", {
inset : false,
mode: "None",
//showUnread : true,
//headerText : "Items (5)",
swipeContent : new sap.m.Button({
text : "Swipe Button",
type : "Accept",
tap : function(e) {
list.swipeOut();
}
}),
columns : [new sap.m.Column({
styleClass : "name",
hAlign : "Left",
width : "5em",
header : new sap.m.Label({
text : "Start Time"
}),
}),
new sap.m.Column({
styleClass : "name",
hAlign : "Left",
width : "5em",
header : new sap.m.Label({
text : "End Time"
}),
}), new sap.m.Column({
hAlign : "Center",
styleClass : "qty",
header : new sap.m.Label({
text : "Title"
}),
minScreenWidth : "phone",
demandPopin : true
}), new sap.m.Column({
hAlign : "Center",
styleClass : "limit",
width : "20%",
header : new sap.m.Label({
text : "Description"
}),
minScreenWidth : "400px"
})]
});
var template = new sap.m.ColumnListItem({
type : "Navigation",
unread : true,
cells : [
new sap.m.Label({
text : "{startTime}",
}),
new sap.m.Label({
text : "{endTime}",
}),
new sap.m.Label({
text: "{title}",
}),
new sap.m.Label({
text: "{desc}"
})
]
});
var oModel = new sap.ui.model.json.JSONModel();
//oModel.setData(data);
list.setModel(oModel);
list.bindAggregation("items", "/navigation", template);
var app = new sap.m.App();
var page = new sap.m.Page({headerContent:unselectBtn, content:[calendar, list, new sap.m.Label({width: "100%", text:"Messages log"}), msgLabel]});
app.addPage(page);
app.placeAt('body');
</script>
</head>
<body id="body" class="sapUiBody">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment