dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
61 lines (51 loc) • 2.08 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Calendar Widget Test</title>
<script type="text/javascript" src="boilerplate.js"></script>
<style>
#calendar5 .dijitCalendarDateTemplate { height: 50px; width: 50px; border: 1px solid #ccc; vertical-align: top }
#calendar5 .dijitCalendarDateLabel, #calendar5 .dijitCalendarDateTemplate { text-align: inherit }
#calendar5 .dijitCalendarDayLabel { font-weight: bold }
#calendar5 .dijitCalendarSelectedYear { font-size: 1.5em }
#calendar5 .dijitCalendarMonthLabel { font-family: serif; letter-spacing: 0.2em; font-size: 2em }
.blue { color: blue /* override claro rule */ }
</style>
<script type="text/javascript">
require([
"dojo/_base/declare",
"dojo/date/locale",
"dojo/parser",
"dijit/Calendar",
"dojo/domReady!"
], function(declare, locale, parser, Calendar){
declare("BigCalendar", Calendar, {
isDisabledDate: locale.isWeekend,
getClassForDate: function(date){
if(!(date.getDate() % 10)){ return "blue"; } // apply special style to all days divisible by 10
}
});
parser.parse();
disableWeekends = function(){
calendar1.isDisabledDate = locale.isWeekend;
calendar1._populateGrid();
};
});
function myHandler(id,newValue){
console.debug("onChange for id = " + id + ", value: " + newValue);
}
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">Dijit Calendar Test</h1>
<label for="before">input before: </label><input id="before"/>
<input id="calendar1" data-dojo-id="calendar1" data-dojo-type="dijit/Calendar" summary="Small calendar" data-dojo-props='onChange:function(v){ myHandler(this.id, v) }'/>
<label for="after">input after: </label><input id="after"/>
<p>
<a href="#" onclick="disableWeekends();">disable weekends</a>
</p>
<p>Big Calendar</p>
<input id="calendar5" data-dojo-type="BigCalendar" data-dojo-props='dayWidth:"abbr"' value="2008-03-14"/>
</body>
</html>