You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
2.0 KiB
60 lines
2.0 KiB
<!DOCTYPE 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 !important /* 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>
|
|
|