calendar-example.html revision 520d8bcc196e6dab14119ccec8a6e1b28b330df8
0N/A<html>
553N/A<head>
0N/A <title>Calendar Example</title>
0N/A <script type="text/javascript" src="/build/yui/yui.js"></script>
0N/A<style>
0N/A.yui3-skin-sam .redtext {
553N/A color:#ff0000;
0N/A}
553N/A</style>
0N/A</head>
0N/A<body class="yui3-skin-sam">
0N/A<div id="mycalendar"></div>
0N/A<div id="currentDate"></div>
0N/A
0N/A<script>
0N/AYUI({
0N/Abase: '/build/'
0N/A}).use('calendar', function(Y) {
0N/A
0N/AY.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.TWO_PANE_TEMPLATE;
553N/A
553N/Afunction myHeaderRenderer (curDate) {
553N/A var ydate = Y.DataType.Date,
0N/A output = ydate.format(curDate, {format: "%B %Y"}) +
0N/A " &mdash; " +
0N/A ydate.format(ydate.addMonths(curDate, 1), {format: "%B %Y"});
0N/A return output;
0N/A };
0N/A
0N/A
0N/A var myRules = {"all":
0N/A {
0N/A "all": {
0N/A "all": {
0N/A "0,6": "all_weekends"
0N/A }
0N/A }
0N/A },
765N/A "2010": {
0N/A "all": {
0N/A "5": "thefifths"
0N/A }
0N/A }
0N/A
0N/A };
765N/A
0N/Afunction myFilter (oDate, oNode, rules) {
765N/A
765N/Aif (rules.indexOf("all_weekends") >= 0) {
765N/A oNode.addClass('redtext');
0N/A}
765N/A
765N/A};
0N/A
0N/A var calendar = new Y.Calendar({
765N/A contentBox: "#mycalendar",
0N/A showNextMonth: true,
765N/A showPrevMonth: true,
765N/A disabledDatesRule: "thefifths",
765N/A selectionMode: "multiple",
0N/A minimumDate: new Date(2011,6,1),
765N/A maximumDate: new Date(2011,11,1),
765N/A headerRenderer: myHeaderRenderer,
0N/A width:'600px'}).render();
0N/A
765N/A calendar.set("customRenderer", {rules: myRules, filterFunction: myFilter});
0N/A
765N/A});
765N/A</script>
0N/A</body>
765N/A</html>
0N/A