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.
188 lines (144 loc) • 6.29 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" width="100%" height="100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ColumnView Sample: Desktop</title>
<style type="text/css">
@import "../themes/claro/ColumnView.css";
@import "../themes/claro/MatrixView.css";
@import "columnview.css";
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/claro/claro.css";
.overnight,
.overnight .span {
background-color: #E2E2E2 ;
}
</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/fx", "dojo/on", "dojo/date/locale", "dojo/parser", "dojo/date", "dojo/_base/lang",
"dojo/dom", "dojo/dom-style", "dojo/dom-construct", "dojo/dom-class", "dojo/_base/window", "dijit/registry", "dojo/query", "dojox/calendar/SimpleColumnView",
"dojox/calendar/ColumnViewSecondarySheet", "dojox/calendar/Keyboard", "dojox/calendar/Mouse", "dojox/calendar/VerticalRenderer",
"dojox/calendar/HorizontalRenderer", "dojox/calendar/ExpandRenderer", "dojo/store/Memory", "dojo/store/Observable",
"dijit/form/VerticalSlider", "dijit/form/NumberSpinner", "dijit/form/ComboBox", "dijit/form/DateTextBox", "dijit/form/TimeTextBox",
"dijit/form/TextBox", "dijit/form/Button", "dijit/TitlePane", "dijit/Tooltip", "dijit/form/CheckBox"],
function(ready, declare, fx,on, locale, parser, date, lang, dom, domStyle, domConstruct, domClass, win, registry, query,
ColumnView, ColumnViewSecondarySheet, CalendarKeyboard, CalendarMouse, VerticalRenderer, HorizontalRenderer, ExpandRenderer, Memory, Observable, VerticalSlider,
NumberSpinner, ComboBox, DateTextBox, TimeTextBox, TextBox, Button, TitlePane, Tooltip, CheckBox){
ready(function(){
// Calendar model creation
var dateClassObj = Date;
var modelBase = [
{day: 1, start: [9,0], duration: 60},
{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}
];
// TODO manage first day of week
var floorToWeek= function(d){
d.setHours(0);
d.setMinutes(0);
d.setSeconds(0);
d.setMilliseconds(0);
d = date.add(d, "day", -d.getDay());
return d;
};
var someData = [];
var startOfWeek = new dateClassObj();
startOfWeek = floorToWeek(startOfWeek);
for (var id=0; id<modelBase.length; id++) {
var newObj = {
id: id,
summary: "New Event " + id,
startTime: new dateClassObj(startOfWeek.getTime()),
endTime: new dateClassObj(startOfWeek.getTime()),
calendar: id%2 == 0 ? "cal1" : "cal2",
allDay: modelBase[id].allDay
};
newObj.startTime = date.add(newObj.startTime, "day", modelBase[id].day);
newObj.startTime.setHours(modelBase[id].start[0]);
newObj.startTime.setMinutes(modelBase[id].start[1]);
newObj.endTime = date.add(newObj.startTime, "minute", modelBase[id].duration);
someData.push(newObj);
}
// Calendar creation & configuration
colView = declare([ColumnView, CalendarKeyboard, CalendarMouse])({
store: new Observable(new Memory({data: someData})),
startDate: startOfWeek,
minHours: 12,
maxHours: 36,
verticalRenderer: VerticalRenderer,
horizontalRenderer: HorizontalRenderer,
expandRenderer: ExpandRenderer,
cssClassFunc: function(item){
return item.calendar == "cal1" ? "Calendar1" : "Calendar2"
},
styleRowHeaderCell: function(node, h, m, rd){
if(h >= 24){
domClass.add(node, "overnight");
}
},
style:"position:absolute;left:10px;right:10px;top:10px;bottom:10px"
}, "calendarNode2");
// Events management
// Enable creation of event interactively by ctrl clicking grid.
var createItem = function(view, d, e, subColumn){
// create item by maintaining control key
if(!e.ctrlKey || e.shiftKey || e.altKey){
return null;
}
// create a new event
var start, end;
var cal = colView.dateModule;
start = colView.floorDate(d, "minute", colView.timeSlotDuration);
end = cal.add(start, "minute", colView.timeSlotDuration);
var item = {
id: id,
summary: "New event " + id,
startTime: start,
endTime: end,
calendar: subColumn,
allDay: view.viewKind == "matrix"
};
id++;
return item;
};
colView.set("createOnGridClick", true);
colView.set("createItemFunc", createItem);
var startDateSave;
var columnCountSave;
colView.on("columnHeaderClick", function(e){
if (colView.get("columnCount") == 1) {
colView.set("startDate", startDateSave);
colView.set("columnCount", columnCountSave);
} else {
startDateSave = colView.get("startDate");
columnCountSave = colView.get("columnCount");
colView.set("startDate", e.date);
colView.set("columnCount", 1);
}
});
window.onresize = function(){
colView.resize();
}
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 id="calendarNode2"></div>
</body>
</html>