tests/manual/calendar-example.html

	calendar-example.html revision 1ef424d3c659d1c8ddb74fc1bc192bc9d582bbf3
<!doctype html>
<html>
<head>
    <title>Calendar Example</title>
    <script type="text/javascript" src="/build/yui/yui.js"></script>
<style>
.yui3-skin-sam .redtext {
    color:#ff0000;
}
</style>
</head>
<body class="yui3-skin-sam">
<div id="mycalendar"></div>
<div id="currentDate"></div>

<script>
YUI({
base: '/build/',
    filter: "raw"
}).use('calendar',  function(Y) {

Y.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.TWO_PANE_TEMPLATE;

function myHeaderRenderer (curDate) {
            var ydate = Y.DataType.Date,
                output = ydate.format(curDate, {format: "%B %Y"}) +
                         " &mdash; " +
                         ydate.format(ydate.addMonths(curDate, 1), {format: "%B %Y"});
            return output;
         };


         var myRules = {"all":
            {
                "all": {
                    "all": {
                        "0,6": "all_weekends"
                    }
                }
            },
            "2010": {
                "all": {
                    "5": "thefifths"
                }
            }

         };

function myFilter (oDate, oNode, rules) {

if (rules.indexOf("all_weekends") >= 0) {
    oNode.addClass('redtext');
}

};

         var calendar = new Y.Calendar({
            contentBox: "#mycalendar",
            showNextMonth: true,
            showPrevMonth: true,
            disabledDatesRule: "thefifths",
            selectionMode: "multiple",
            minimumDate: new Date(2011,6,1),
            maximumDate: new Date(2011,11,1),
            headerRenderer: myHeaderRenderer,
            width:'600px'}).render();

        calendar.set("customRenderer", {rules: myRules, filterFunction: myFilter});

});
</script>
</body>
</html>