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.
85 lines (66 loc) • 2.86 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 "../themes/claro/MonthColumnView.css";
@import "calendar.css";
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/claro/claro.css";
.greyCell{
background-color: #F8F8F8 ;
}
</style>
</head>
<body class="claro">
<script type="text/javascript"
data-dojo-config="async: true, parseOnLoad: true, paths : {'demo' : '../dojox/calendar/tests'}"
src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
require(["dojo/ready", "dojo/_base/lang", "dojo/_base/sniff", "dojo/_base/array", "dojo/_base/fx", "dojo/dom-class", "dojo/on",
"dojo/date/locale", "dojo/parser", "dojo/dom", "dojo/dom-construct", "dojo/store/Memory",
"dojo/store/Observable", "demo/ExtendedCalendar"],
function(ready, lang, has, arr, fx, domClass, on, locale, parser, dom, domConstruct,
Memory, Observable, Calendar){
ready(function(){
var startOfWeek = calendar.floorToWeek(new calendar.dateClassObj());
calendar.set("date", startOfWeek);
calendar.columnView.set("styleGridCellFunc", function(node, date, hours, minutes){
// grey out Wednesday & time range between 12pm and 2pm
if(hours >= 12 && hours < 14 || date.getDay() == 3){
domClass.add(node, "greyCell");
}
this.defaultStyleGridCell(node, date, hours, minutes);
});
var func = function(node, date){
// grey out Wednesday
if(date != null && date.getDay() == 3){
domClass.add(node, "greyCell");
}
this.defaultStyleGridCell(node, date);
};
calendar.columnView.secondarySheet.set("styleGridCellFunc", func);
calendar.matrixView.set("styleGridCellFunc", func);
calendar.monthColumnView.set("styleGridCellFunc", func);
// 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="demo.ExtendedCalendar"
style="position:absolute;left:10px;top:10px;bottom:10px;right:10px">
</div>
</div>
</body>
</html>