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

Demo: http://yuiblog.com/sandbox/yui/v0113/examples/calendar/select_dates_by_script.php

Downloads:

Source: http://yuiblog.com/sandbox/yui/v0113/examples/calendar/select_dates_by_script.php

Related Listings:

1. Week Calendar using Jquery A jquery plugin providing a weekly view of calendar events....
2. Javascript Calendar Using MooTools The idea is to use MooGenda to quickly expose your...