| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | |
|---|
| 5 | <head> |
|---|
| 6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|---|
| 7 | <title>Calendar Sample: Desktop</title> |
|---|
| 8 | <style type="text/css"> |
|---|
| 9 | @import "../themes/claro/Calendar.css"; |
|---|
| 10 | @import "calendar.css"; |
|---|
| 11 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 12 | @import "../../../dijit/themes/dijit.css"; |
|---|
| 13 | @import "../../../dijit/themes/claro/claro.css"; |
|---|
| 14 | </style> |
|---|
| 15 | </head> |
|---|
| 16 | |
|---|
| 17 | <body class="claro"> |
|---|
| 18 | <script type="text/javascript" |
|---|
| 19 | data-dojo-config="async: true, parseOnLoad: true" |
|---|
| 20 | src="../../../dojo/dojo.js"></script> |
|---|
| 21 | |
|---|
| 22 | <script type="text/javascript"> |
|---|
| 23 | |
|---|
| 24 | require(["dojo/_base/declare", "dojo/ready", "dojo/_base/fx", "dojo/on", "dojo/Deferred", "dojo/when", |
|---|
| 25 | "dojo/date/locale", "dojo/parser", "dojo/store/JsonRest", |
|---|
| 26 | "dojo/store/Memory", "dojo/store/Observable", "dojo/store/Cache", |
|---|
| 27 | "dojox/calendar/Calendar", |
|---|
| 28 | "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ], |
|---|
| 29 | |
|---|
| 30 | function(declare, ready, fx, on, Deferred, when, locale, parser, JsonRest, Memory, Observable, Cache, Calendar){ |
|---|
| 31 | |
|---|
| 32 | ready(function(){ |
|---|
| 33 | |
|---|
| 34 | var startOfWeek = calendar.floorToWeek(new calendar.dateClassObj()); |
|---|
| 35 | |
|---|
| 36 | calendar.set("date", startOfWeek); |
|---|
| 37 | |
|---|
| 38 | var ExtJsonStore = declare(JsonRest, { |
|---|
| 39 | add: function(object, options){ |
|---|
| 40 | var tempId = options && options.temporaryId; |
|---|
| 41 | var def = new Deferred(); |
|---|
| 42 | when(this.inherited(arguments), function(item){ |
|---|
| 43 | item.temporaryId = tempId; |
|---|
| 44 | def.resolve(item); |
|---|
| 45 | }); |
|---|
| 46 | return def; |
|---|
| 47 | } |
|---|
| 48 | }); |
|---|
| 49 | |
|---|
| 50 | calendar.set("store", new Observable(new ExtJsonStore({target: "/cal/calendar/"}))); |
|---|
| 51 | |
|---|
| 52 | // Enable creation of event interactively by ctrl clicking grid. |
|---|
| 53 | var createItem = function(view, d, e){ |
|---|
| 54 | |
|---|
| 55 | // create item by maintaining control key |
|---|
| 56 | if(!e.ctrlKey || e.shiftKey || e.altKey){ |
|---|
| 57 | return null; |
|---|
| 58 | } |
|---|
| 59 | |
|---|
| 60 | // create a new event |
|---|
| 61 | var start, end; |
|---|
| 62 | var colView = calendar.columnView; |
|---|
| 63 | var cal = calendar.dateModule; |
|---|
| 64 | |
|---|
| 65 | if(view == colView){ |
|---|
| 66 | start = calendar.floorDate(d, "minute", colView.timeSlotDuration); |
|---|
| 67 | end = cal.add(start, "minute", colView.timeSlotDuration); |
|---|
| 68 | }else{ |
|---|
| 69 | start = calendar.floorToDay(d); |
|---|
| 70 | end = cal.add(start, "day", 1); |
|---|
| 71 | } |
|---|
| 72 | |
|---|
| 73 | var item = { |
|---|
| 74 | summary: "New event ", |
|---|
| 75 | startTime: start, |
|---|
| 76 | endTime: end, |
|---|
| 77 | allDay: view.viewKind == "matrix" |
|---|
| 78 | }; |
|---|
| 79 | |
|---|
| 80 | return item; |
|---|
| 81 | }; |
|---|
| 82 | |
|---|
| 83 | calendar.set("createOnGridClick", true); |
|---|
| 84 | calendar.set("createItemFunc", createItem); |
|---|
| 85 | |
|---|
| 86 | // Hide loading panel when application is ready |
|---|
| 87 | fx.fadeOut({ |
|---|
| 88 | node:"loadingPanel", |
|---|
| 89 | onEnd: function(node){ |
|---|
| 90 | node.parentNode.removeChild(node) |
|---|
| 91 | }}).play(500); |
|---|
| 92 | |
|---|
| 93 | |
|---|
| 94 | }); |
|---|
| 95 | }); |
|---|
| 96 | </script> |
|---|
| 97 | |
|---|
| 98 | <div id="loadingPanel" style="position:absolute;z-index:10;width:100%;height:100%;background:#ffffff"> |
|---|
| 99 | <span style="background: #DBEB8F;padding:2px">Loading...</span> |
|---|
| 100 | </div> |
|---|
| 101 | |
|---|
| 102 | <div data-dojo-type="dijit.layout.BorderContainer" style="width:100%;height:100%" data-dojo-props="design:'sidebar', gutters:true" > |
|---|
| 103 | <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false, region:'center'"> |
|---|
| 104 | <div data-dojo-id="calendar" data-dojo-type="dojox.calendar.Calendar" style="position:absolute;left:10px;top:10px;bottom:10px;right:10px"> |
|---|
| 105 | </div> |
|---|
| 106 | </div> |
|---|
| 107 | |
|---|
| 108 | </div> |
|---|
| 109 | |
|---|
| 110 | </body> |
|---|
| 111 | </html> |
|---|
