Calendar: Selecting Dates in Calendar

Question: Can I write a function that will select all dates in the currently displayed calendar month?

Answer: Sure. Here's how:

Start with a simple Calendar instance, and set its MULTI_SELECT option to true:

this.myCal = new YAHOO.widget.Calendar("calendarEl", "calendar","10/2006");
this.myCal.Options.MULTI_SELECT = true;
this.myCal.render();

Create an element on the page to handle a click, one which you wire to a function that selects all of the days for the currently displayed calendar month. Our goal is to use Calendar's select method to select a date range, represented as a string (e.g., "12/1/2005-12/31/2005"); we pass that string as an argument to select, then re-render. Having done that, our dates are then selected and the display of the Calendar reflects the change.

Here's the interesting part — the handler — with comments:

//get the current month and year of the calendar
var currentMonth = this.myCal.pageDate.getMonth();
var currentYear = this.myCal.pageDate.getFullYear();

//get the date of the last day of this month;
//use Calendar's pageDate property to get the
//currently displayed month:
var tempDate = new Date(this.myCal.pageDate);
//set temp date to next month:
tempDate.setMonth(tempDate.getMonth() + 1);
//set temp date to last day of last month:
tempDate.setDate(0);
//get the actual day out of the date object:
var lastDayOfCurrentMonth = tempDate.getDate();

//create a string designating all the current days of this
//month: eg, 12/1/2005-12/31/2005;
//we'll pass that into our calendar instance
//below.
var dateString = (currentMonth + 1) + "/1/" + currentYear + "-" + (currentMonth + 1) + "/" + lastDayOfCurrentMonth + "/" + currentYear;

//use Calendar's select method to select all days
//in current month:
this.myCal.select(dateString);
this.myCal.render();

— Eric Miraglia, Yahoo Presentation Platform Engineering