tests/manual/calendar-example.html

	calendar-example.html revision 203f8e569fc92522b4f14098e32605a74e9ac4a1
<!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 dYear = "2011";
var dMonth = "10";
var dDate = "10";


var newrules = {};

function addNewRule(ruleSet, path, ruleName) {

var currentObject = ruleSet;

for (var i = 0, len = path.length - 1; i <= len; i++) {
   if (i == len) {
    currentObject[path[i]] = ruleName;
   }
   else {
    currentObject[path[i]] = {};
    currentObject = currentObject[path[i]];
   }
}

return ruleSet;

};

newrules = addNewRule(newrules, [dYear, dMonth, dDate], "theweekends");


console.log(newrules);

/*
         var myRules = {
            "2011": {
                "0-11": {
                    "all": {
                        "0,6": "theweekends"
                    }
                },
                "all": {
                    "5": "thefifths"
                }
            }

         };
*/

function myFilter (oDate, oNode, rules) {
if (rules.indexOf("theweekends") >= 0) {
    oNode.addClass('redtext');
}
};

         var calendar = new Y.Calendar({
            showNextMonth: true,
            showPrevMonth: true,
            selectionMode: "multiple",
            minimumDate: new Date(2011,0,1),
            maximumDate: new Date(2011,11,1),
            date: new Date(2011,10,1),
            headerRenderer: myHeaderRenderer,
            width:'600px'});

        calendar.render("#mycalendar");


        calendar.selectDates()

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

        calendar.set("enabledDatesRule", null);
        calendar.set("disabledDatesRule", "thefifths");

/*
        calendar.on("dateChange", function (ev) {console.log("New date value: " + ev.newVal); console.log("What about..." + calendar.get("date"));});
*/


        calendar.on("showPrevMonthChange", function (ev) {console.log("New show prev month val: " + ev.newVal);});

        calendar.set("showPrevMonth", true);

        calendar.selectDates([new Date(2011,9,4), new Date(2011,9,3), new Date(2011,10,8)]);
        calendar.selectDates([new Date(2011,9,5), new Date(2011,8,23), new Date(2011,11,21)]);

        console.log(calendar.get("selectedDates"));


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