Created
July 22, 2015 13:55
-
-
Save ikiw/9630072a0a9112d13b91 to your computer and use it in GitHub Desktop.
custom days in ui5 calendar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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