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.
194 lines (152 loc) • 6.58 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 "asyncStore.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/ready", "dojo/_base/declare", "dojo/_base/lang", "dojo/_base/sniff", "dojo/_base/array", "dojo/_base/fx", "dojo/on",
"dojo/date/locale", "dojo/parser", "dojo/Deferred", "dojo/dom", "dojo/dom-construct", "dojo/store/Memory",
"dojo/store/Observable", "dojox/calendar/Calendar", "dijit/Calendar", "dijit/Menu", "dijit/MenuItem" ],
function(ready, declare, lang, has, arr, fx, on, locale, parser, Deferred, dom, domConstruct,
Memory, Observable, Calendar){
ready(function(){
// Display different hint every 10 seconds
var hints = [
"Hint: Create an event by clicking and dragging on the grid while maintaining the control key",
"Hint: Move an event by clicking on it and dragging it",
"Hint: Resize an event by clicking on one of its ends and dragging it"
];
var hintIdx = 0;
dom.byId("hint").innerHTML = hints[0];
setInterval(function(){
fx.fadeOut({node: "hint",
onEnd: function(){
hintIdx = hintIdx+1>hints.length-1 ? 0 : hintIdx+1;
dom.byId("hint").innerHTML = hints[hintIdx];
fx.fadeIn({node: "hint"}).play(500);
}
}).play(500);
}, 10000);
// Calendar model creation
var modelBase = [
{day: 1, start: [10,0], duration: 1400},
{day: 2, start: [10,30], duration: 120},
{day: 2, start: [12,0], duration: 240},
{day: 3, start: [6,0], duration: 180},
{day: 3, start: [0,0], duration: 2880, allDay: true}
];
var someData = [];
var startOfWeek = calendar.floorToWeek(new calendar.dateClassObj());
for (var id=0; id<modelBase.length; id++) {
var newObj = {
id: id,
summary: "New Event " + id,
startTime: new calendar.dateClassObj(startOfWeek.getTime()),
endTime: new calendar.dateClassObj(startOfWeek.getTime()),
allDay: modelBase[id].allDay
};
newObj.startTime = calendar.dateModule.add(newObj.startTime, "day", modelBase[id].day);
newObj.startTime.setHours(modelBase[id].start[0]);
newObj.startTime.setMinutes(modelBase[id].start[1]);
newObj.endTime = calendar.dateModule.add(newObj.startTime, "minute", modelBase[id].duration);
someData.push(newObj);
}
// BEGIN HACK
// Hack to simulate some latency when adding / updating an event.
// Observable is breaking completely the inheritance chain
var DelayedMemory = declare(Memory, {
put: function(value, options){
var def = new Deferred();
var res = this.inherited(arguments);
setTimeout(lang.hitch(this, function(){
def.resolve(res);
}), 1000);
return def;
},
newIdCount: 100,
add: function(value, options){
value.id = this.newIdCount++;
return this.inherited(arguments, [value, options]);
}
});
var store = new Observable(DelayedMemory({data: []}));
calendar.set("store", store);
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 = {
created: true,
summary: "New event",
startTime: start,
endTime: end,
allDay: view.viewKind == "matrix"
};
id++;
return item;
};
calendar.set("createOnGridClick", true);
calendar.set("createItemFunc", createItem);
// show context menu on right clicking an event
calendar.on("itemContextMenu", function(e){
dojo.stopEvent(e.triggerEvent);
calendarContextMenu._openMyself({
target: e.renderer.domNode,
coords: {x: e.triggerEvent.pageX, y: e.triggerEvent.pageY}
});
});
contextMenuDelete.on("click", function(){
arr.forEach(calendar.selectedItems, function(item){
calendar.store.remove(item.id);
});
});
// 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-id="calendar" data-dojo-type="dojox.calendar.Calendar"
style="position:absolute;left:10px;top:10px;bottom:30px;right:10px">
<div data-dojo-type="dijit.Menu" data-dojo-id="calendarContextMenu" style="display: none;">
<div data-dojo-type="dijit.MenuItem" data-dojo-id="contextMenuDelete" data-dojo-props="iconClass:'dijitIcon dijitIconDelete'">Delete</div>
</div>
</div>
<div id="hint" style="position:absolute;left:10px;height:15px;bottom:10px;right:10px;color:#999;overflow:auto"></div>
</div>
</body>
</html>