da9cd70c94407d05ad340bdcf620adb579b21e36sin<style>

da9cd70c94407d05ad340bdcf620adb579b21e36sin.yui3-skin-sam .redtext {

da9cd70c94407d05ad340bdcf620adb579b21e36sin color:#ff0000;

da9cd70c94407d05ad340bdcf620adb579b21e36sin}

da9cd70c94407d05ad340bdcf620adb579b21e36sin</style>

da9cd70c94407d05ad340bdcf620adb579b21e36sin<div id="demo" class="yui3-skin-sam">

da9cd70c94407d05ad340bdcf620adb579b21e36sin <div id="mycalendar"></div>

da9cd70c94407d05ad340bdcf620adb579b21e36sin</div>

8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac<script type="text/javascript">

8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignacYUI().use('calendar', 'datatype-date', 'datatype-date-math', function(Y) {

da9cd70c94407d05ad340bdcf620adb579b21e36sin

da9cd70c94407d05ad340bdcf620adb579b21e36sin

da9cd70c94407d05ad340bdcf620adb579b21e36sin // Switch the calendar main template to the included two pane template

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

8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac

8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac // Create a new instance of calendar, setting the showing of previous

8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac // and next month's dates to true, and the selection mode to multiple

8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac // selected dates. Additionally, set the disabledDatesRule to a name of

da9cd70c94407d05ad340bdcf620adb579b21e36sin // the rule which, when matched, will force the date to be excluded

da9cd70c94407d05ad340bdcf620adb579b21e36sin // from being selected. Also configure the initial date on the calendar

da9cd70c94407d05ad340bdcf620adb579b21e36sin // to be July of 2011.

da9cd70c94407d05ad340bdcf620adb579b21e36sin var calendar = new Y.Calendar({

da9cd70c94407d05ad340bdcf620adb579b21e36sin contentBox: "#mycalendar",

da9cd70c94407d05ad340bdcf620adb579b21e36sin width: "700px",

da9cd70c94407d05ad340bdcf620adb579b21e36sin showPrevMonth: true,

da9cd70c94407d05ad340bdcf620adb579b21e36sin showNextMonth: true,

da9cd70c94407d05ad340bdcf620adb579b21e36sin selectionMode: 'multiple',

da9cd70c94407d05ad340bdcf620adb579b21e36sin disabledDatesRule: "tuesdays_and_fridays",

da9cd70c94407d05ad340bdcf620adb579b21e36sin date: new Date(2011, 6, 1)

da9cd70c94407d05ad340bdcf620adb579b21e36sin }).render();

da9cd70c94407d05ad340bdcf620adb579b21e36sin

da9cd70c94407d05ad340bdcf620adb579b21e36sin// Create a set of rules to match specific dates. In this case,

da9cd70c94407d05ad340bdcf620adb579b21e36sin// the "tuesdays_and_fridays" rule will match any Tuesday or Friday,

da9cd70c94407d05ad340bdcf620adb579b21e36sin// whereas the "all_weekends" rule will match any Saturday or Sunday.

da9cd70c94407d05ad340bdcf620adb579b21e36sin var rules = {

da9cd70c94407d05ad340bdcf620adb579b21e36sin "all": {

da9cd70c94407d05ad340bdcf620adb579b21e36sin "all": {

da9cd70c94407d05ad340bdcf620adb579b21e36sin "all": {

da9cd70c94407d05ad340bdcf620adb579b21e36sin "2,5": "tuesdays_and_fridays",

da9cd70c94407d05ad340bdcf620adb579b21e36sin "0,6": "all_weekends"

da9cd70c94407d05ad340bdcf620adb579b21e36sin }

da9cd70c94407d05ad340bdcf620adb579b21e36sin }

da9cd70c94407d05ad340bdcf620adb579b21e36sin }

da9cd70c94407d05ad340bdcf620adb579b21e36sin };

da9cd70c94407d05ad340bdcf620adb579b21e36sin

da9cd70c94407d05ad340bdcf620adb579b21e36sin// Set the calendar customRenderer, provides the rules defined above,

da9cd70c94407d05ad340bdcf620adb579b21e36sin// as well as a filter function. The filter function receives a reference

da9cd70c94407d05ad340bdcf620adb579b21e36sin// to the node corresponding to the DOM element of the date that matched

da9cd70c94407d05ad340bdcf620adb579b21e36sin// one or more rule, along with the list of rules. Check if one of the

da9cd70c94407d05ad340bdcf620adb579b21e36sin// rules is "all_weekends", and if so, apply a custom CSS class to the

da9cd70c94407d05ad340bdcf620adb579b21e36sin// node.

da9cd70c94407d05ad340bdcf620adb579b21e36sin calendar.set("customRenderer", {

da9cd70c94407d05ad340bdcf620adb579b21e36sin rules: rules,

da9cd70c94407d05ad340bdcf620adb579b21e36sin filterFunction: function (date, node, rules) {

da9cd70c94407d05ad340bdcf620adb579b21e36sin if (Y.Array.indexOf(rules, 'all_weekends') >= 0) {

da9cd70c94407d05ad340bdcf620adb579b21e36sin node.addClass("redtext");

da9cd70c94407d05ad340bdcf620adb579b21e36sin }

da9cd70c94407d05ad340bdcf620adb579b21e36sin }

da9cd70c94407d05ad340bdcf620adb579b21e36sin });

da9cd70c94407d05ad340bdcf620adb579b21e36sin

da9cd70c94407d05ad340bdcf620adb579b21e36sin// Set a custom header renderer with a callback function,

da9cd70c94407d05ad340bdcf620adb579b21e36sin// which receives the current date and outputs a string.

da9cd70c94407d05ad340bdcf620adb579b21e36sin// use the Y.Datatype.Date format to format the date, and

da9cd70c94407d05ad340bdcf620adb579b21e36sin// the Datatype.Date math to add one month to the current

da9cd70c94407d05ad340bdcf620adb579b21e36sin// date, so both months can appear in the header (since

da9cd70c94407d05ad340bdcf620adb579b21e36sin// this is a two-pane calendar).

da9cd70c94407d05ad340bdcf620adb579b21e36sin calendar.set("headerRenderer", function (curDate) {

da9cd70c94407d05ad340bdcf620adb579b21e36sin var ydate = Y.DataType.Date,

da9cd70c94407d05ad340bdcf620adb579b21e36sin output = ydate.format(curDate, {

da9cd70c94407d05ad340bdcf620adb579b21e36sin format: "%B %Y"

}) + " &mdash; " + ydate.format(ydate.addMonths(curDate, 1), {

format: "%B %Y"

});

return output;

});

// When selection changes, output the fired event to the

// console. the newSelection attribute in the event facade

// will contain the list of currently selected dates (or be

// empty if all dates have been deselected).

calendar.on("selectionChange", function (ev) {

Y.log(ev);

});

});

</script>