1127N/A<style>

1127N/A.yui3-skin-sam .redtext {

1127N/A color:#ff0000;

1127N/A}

1127N/A</style>

1127N/A<div id="demo" class="yui3-skin-sam">

1127N/A <div id="mycalendar"></div>

1127N/A</div>

1127N/A<script type="text/javascript">

1127N/AYUI().use('calendar', 'datatype-date', 'datatype-date-math', function(Y) {

1127N/A

1127N/A

1127N/A // Switch the calendar main template to the included two pane template

1127N/A Y.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.TWO_PANE_TEMPLATE;

1127N/A

1127N/A // Create a new instance of calendar, setting the showing of previous

1127N/A // and next month's dates to true, and the selection mode to multiple

1127N/A // selected dates. Additionally, set the disabledDatesRule to a name of

1127N/A // the rule which, when matched, will force the date to be excluded

1127N/A // from being selected. Also configure the initial date on the calendar

1127N/A // to be July of 2011.

1127N/A var calendar = new Y.Calendar({

1127N/A contentBox: "#mycalendar",

1127N/A width: "700px",

1220N/A showPrevMonth: true,

1214N/A showNextMonth: true,

1127N/A selectionMode: 'multiple',

1416N/A disabledDatesRule: "tuesdays_and_fridays",

1127N/A date: new Date(2011, 6, 1)

1127N/A }).render();

1127N/A

1127N/A// Create a set of rules to match specific dates. In this case,

1127N/A// the "tuesdays_and_fridays" rule will match any Tuesday or Friday,

1127N/A// whereas the "all_weekends" rule will match any Saturday or Sunday.

1127N/A var rules = {

1127N/A "all": {

1127N/A "all": {

1127N/A "all": {

1416N/A "2,5": "tuesdays_and_fridays",

1127N/A "0,6": "all_weekends"

1127N/A }

1127N/A }

1127N/A }

1127N/A };

1127N/A

1127N/A// Set the calendar customRenderer, provides the rules defined above,

1127N/A// as well as a filter function. The filter function receives a reference

1127N/A// to the node corresponding to the DOM element of the date that matched

1127N/A// one or more rule, along with the list of rules. Check if one of the

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

1127N/A// node.

1127N/A calendar.set("customRenderer", {

1127N/A rules: rules,

1127N/A filterFunction: function (date, node, rules) {

1127N/A if (Y.Array.indexOf(rules, 'all_weekends') >= 0) {

1127N/A node.addClass("redtext");

1127N/A }

1127N/A }

1127N/A });

1214N/A

1127N/A// Set a custom header renderer with a callback function,

1127N/A// which receives the current date and outputs a string.

1127N/A// use the Y.Datatype.Date format to format the date, and

1127N/A// the Datatype.Date math to add one month to the current

1127N/A// date, so both months can appear in the header (since

1127N/A// this is a two-pane calendar).

1127N/A calendar.set("headerRenderer", function (curDate) {

1127N/A var ydate = Y.DataType.Date,

1127N/A output = ydate.format(curDate, {

1127N/A format: "%B %Y"

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

1127N/A format: "%B %Y"

1127N/A });

1127N/A return output;

1127N/A });

1127N/A

1127N/A// When selection changes, output the fired event to the

1127N/A// console. the newSelection attribute in the event facade

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

1127N/A// empty if all dates have been deselected).

1127N/A calendar.on("selectionChange", function (ev) {

1127N/A Y.log(ev);

1127N/A });

1127N/A

1127N/A });

1127N/A

1127N/A</script>