dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
142 lines (113 loc) • 4.75 kB
HTML
<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>