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.
154 lines (128 loc) • 5.58 kB
HTML
<html debug="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>ColumnView Sample: Tablet</title>
<style type="text/css">
@import "../themes/iphone/ColumnView.css";
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/claro/claro.css";
@import "columntablet.css";
</style>
</head>
<body>
<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/on", "dojo/date/locale", "dojox/mobile",
"dojo/date", "dojo/dom", "dojo/dom-construct", "dojo/_base/window",
"dojox/mobile/CheckBox", "dojox/calendar/ColumnView", "dojox/calendar/ColumnViewSecondarySheet", "dojox/calendar/Touch", "dojox/calendar/MobileVerticalRenderer",
"dojox/calendar/HorizontalRenderer", "dojox/calendar/ExpandRenderer",
"dojo/store/Memory", "dojo/store/Observable", "dojox/gesture/swipe"],
function(ready, declare, on, locale, mobile, date, dom, domConstruct, win,
CheckBox, ColumnView, ColumnViewSecondarySheet, CalendarTouch, MobileVerticalRenderer, HorizontalRenderer, ExpandRenderer, Memory, Observable, swipe){
ready(function(){
var dateClassObj = Date;
var modelBase = [
{ day: 1, start: [0, 0], duration: 1440, allDay: true },
{ day: 2, start: [10, 0], duration: 270 },
{ day: 2, start: [12, 0], duration: 240 }
];
var someData = [];
var startOfWeek = new dateClassObj();
startOfWeek.setHours(0);
startOfWeek.setMinutes(0);
startOfWeek.setSeconds(0);
startOfWeek.setMilliseconds(0);
startOfWeek = date.add(startOfWeek, "day", -startOfWeek.getDay());
for (var i = 0; i < modelBase.length; i++) {
var newObj = {
id: i,
summary: "New Event " + i,
startTime: new dateClassObj(startOfWeek.getTime()),
endTime: new dateClassObj(startOfWeek.getTime()),
allDay: modelBase[i].allDay
};
newObj.startTime = date.add(newObj.startTime, "day", modelBase[i].day);
newObj.startTime.setHours(modelBase[i].start[0]);
newObj.startTime.setMinutes(modelBase[i].start[1]);
newObj.endTime = date.add(newObj.startTime, "minute", modelBase[i].duration);
someData.push(newObj);
}
var id = i;
var secondarySheetClass = declare([ColumnViewSecondarySheet, CalendarTouch]);
colView = declare([ColumnView, CalendarTouch])({
secondarySheetClass: secondarySheetClass,
store: new Observable(new Memory({
data: someData
})),
verticalRenderer: MobileVerticalRenderer,
horizontalRenderer: HorizontalRenderer,
expandRenderer: ExpandRenderer,
columnCount: 5,
hourSize: 75,
maxHours: 22,
timeSlotDuration: 30
}, "calendarNode");
var goNextRange = function(direction){
var days = (direction == "left" ? 1 : -1) * colView.get("columnCount");
var startDate = colView.get("startDate");
var newStartDate = colView.renderData.dateModule.add(startDate, "day", days);
colView.set("startDate", newStartDate);
//TODO Add animation
};
on(colView.itemContainer, swipe.end, function(e){
if(e.time < 200 && Math.abs(e.dx) > 50){
goNextRange(e.dx < 0 ? "left" : "right");
}
});
colView.snapSteps = 15;
colView.liveLayout = false;
var id=4;
colView.on("gridDoubleClick", function(e){
// create a event when double-clicking on grid.
var start, end;
if(e.sheet == "primary"){
start = colView.floorDate(e.date, "minute", colView.timeSlotDuration);
end = date.add(start, "hour", 1);
}else{
start = colView.floorToDay(e.date, false, colView.renderData);
end = date.add(start, "day", 1);
}
var item = {
id: id,
summary: "New event " + id,
startTime: start,
endTime: end,
allDay: e.sheet == "secondary"
};
id++;
colView.store.add(item);
colView.set("selectedItem", item);
colView.set("focusedItem", item);
});
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);
}
});
});
});
</script>
<div id="calendarNode">
</div>
</body>
</html>