You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
4.6 KiB
141 lines
4.6 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
|
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
<title>Calendar Sample: Desktop</title> |
|
<style type="text/css"> |
|
@import "../themes/claro/Calendar.css"; |
|
@import "calendar.css"; |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/themes/dijit.css"; |
|
@import "../../../dijit/themes/claro/claro.css"; |
|
</style> |
|
</head> |
|
|
|
<body class="claro"> |
|
<script type="text/javascript" |
|
data-dojo-config="async: true, parseOnLoad: true" |
|
src="../../../dojo/dojo.js"></script> |
|
|
|
<script type="text/javascript"> |
|
|
|
require(["dojo/_base/declare", "dojo/ready", "dojo/_base/fx", "dojo/on", "dojo/Deferred", "dojo/when", |
|
"dojo/date/locale", "dojo/parser", "dojo/store/JsonRest", |
|
"dojo/store/Memory", "dojo/store/Observable", "dojo/store/Cache", |
|
"dojox/calendar/Calendar", "dojo/date/stamp", |
|
"dijit/layout/BorderContainer", "dijit/layout/ContentPane" ], |
|
|
|
function(declare, ready, fx, on, Deferred, when, locale, parser, JsonRest, Memory, Observable, Cache, Calendar, stamp){ |
|
|
|
ready(function(){ |
|
|
|
var startOfWeek = calendar.floorToWeek(new calendar.dateClassObj()); |
|
|
|
// Subclass to handle the ID problem |
|
// If the server is generating an ID, the calendar needs the temporary ID |
|
// to synchronize its internal state. |
|
var ExtJsonRest = declare(JsonRest, { |
|
add: function(object, options){ |
|
var tempId = options && options.temporaryId; |
|
var def = new Deferred(); |
|
when(this.inherited(arguments), function(item){ |
|
item.temporaryId = tempId; |
|
def.resolve(item); |
|
}); |
|
return def; |
|
} |
|
}); |
|
|
|
// WARNING |
|
// This sample needs a service that hosts REST service that can answer to the Jsonrest store !! |
|
// WARNING |
|
|
|
calendar.on("timeIntervalChange", function(e){ |
|
var startTimeStr = stamp.toISOString(e.startTime, {zulu: true, milliseconds: true}); |
|
var endTimeStr = stamp.toISOString(e.endTime, {zulu: true, milliseconds: true}); |
|
calendar.query = { |
|
startTime: startTimeStr, |
|
endTime:endTimeStr |
|
}; |
|
calendar.set("store", new Observable(new ExtJsonRest({target: "/cal/calendar/"}))); |
|
}); |
|
|
|
calendar.set("date", startOfWeek); |
|
|
|
// Enable creation of event interactively by ctrl clicking grid. |
|
var createItem = function(view, d, e){ |
|
|
|
// create item by maintaining control key |
|
if(!e.ctrlKey || e.shiftKey || e.altKey){ |
|
return null; |
|
} |
|
|
|
// create a new event |
|
var start, end; |
|
var colView = calendar.columnView; |
|
var cal = calendar.dateModule; |
|
|
|
if(view == colView){ |
|
start = calendar.floorDate(d, "minute", colView.timeSlotDuration); |
|
end = cal.add(start, "minute", colView.timeSlotDuration); |
|
}else{ |
|
start = calendar.floorToDay(d); |
|
end = cal.add(start, "day", 1); |
|
} |
|
|
|
var item = { |
|
summary: "New event ", |
|
startTime: start, |
|
endTime: end, |
|
allDay: view.viewKind == "matrix" |
|
}; |
|
|
|
return item; |
|
}; |
|
|
|
var interactive = true; |
|
|
|
if(interactive){ |
|
calendar.set("createOnGridClick", true); |
|
calendar.set("createItemFunc", createItem); |
|
}else{ |
|
|
|
var count = 0; |
|
calendar.on("gridDoubleClick", function(e){ |
|
var item = createItem(calendar.columnView, e.date, e.triggerEvent); |
|
if(item){ |
|
// no id set here and not temporary id in options. |
|
calendar.get("store").add(item, {temporaryId:"toto"}); |
|
} |
|
|
|
}); |
|
} |
|
|
|
// Hide loading panel when application is ready |
|
fx.fadeOut({ |
|
node:"loadingPanel", |
|
onEnd: function(node){ |
|
node.parentNode.removeChild(node) |
|
}}).play(500); |
|
|
|
|
|
}); |
|
}); |
|
</script> |
|
|
|
<div id="loadingPanel" style="position:absolute;z-index:10;width:100%;height:100%;background:#ffffff"> |
|
<span style="background: #DBEB8F;padding:2px">Loading...</span> |
|
</div> |
|
|
|
<div data-dojo-type="dijit.layout.BorderContainer" style="width:100%;height:100%" data-dojo-props="design:'sidebar', gutters:true" > |
|
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false, region:'center'"> |
|
<div data-dojo-id="calendar" data-dojo-type="dojox.calendar.Calendar" style="position:absolute;left:10px;top:10px;bottom:10px;right:10px"> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|