A function that will select all dates in the currently displayed calendar month.

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. FullCalendar – Full-sized Calendar jQuery Plugin FullCalendar is a jQuery plugin that provides a full-sized, drag...
2. MooTools Events Calendar # calContainer – (string:defaults to null) the id of the...
3. Week Calendar using Jquery A jquery plugin providing a weekly view of calendar events....
4. Date input Calendar Jason’s Date Input Calendar is designed specifically to make entering...
5. ASP.NET Calendar Control and Yahoo.UI.Calendar The Calendar control becomes an essential control for business application...

Do you like this post?

Email: