Using the JQUERY calendar has been a great experience for us here at eSchedule so we've decided to share how we've accomplished some of our basic employee scheduling calendar features utilizing great open source projects like JQUERY. If you haven't heard of JQUERY then you should definitely check it out.

Let's assume we are displaying the jquery calendar in place with 2 months displayed:

First we need a holder element:

<div id="CalendarHolder"></div>

Then we can extend the div element with a JQUERY datepicker. The first thing to note below is that we've encapsulated our code inside $(document).ready(function(){});. We always wait until the page is ready before attaching our datepickers, safety first!

<SCRIPT LANGUAGE=javascript><!--

 

var activeDate = new Date('12/2/2008');

$(document).ready(function()

{$("#CalendarHolder").datepicker(

    {

        numberOfMonths: 2,

        showStatus:true,

        yearRange: '2000:2009',

        defaultDate: activeDate,

        firstDay: 0,

        inline: true,

        showOtherMonths: true,

        beforeShowDay: setScheduledDays

    });

 });

//--></SCRIPT>

A few things to point out here are the defaultDate and beforeShowDay properties. defaultDate is fairly self explanatory, and is how we set the selected date displayed on our calendars..

What we're really interested in is the beforeShowDay property. Here we are instructing the datepicker to call this function setScheduledDays (below) immediately before showing each day on the calendar. This function simply returns [bool, 'CSS_CLASS']. The bool signifies whether the date is selectable, and the css class will set the css of our cell accordingly.

Below we initialize two arrays, scheduledDays and holidayDays. scheduledDays holds the date and css class for each day (only scheduled days have any sort of status), while holidayDays identifies which days of the year we can't schedule.

<SCRIPT LANGUAGE=javascript><!--

var scheduledDays = [[12, 2, 2008, 'PEND'], [12, 3, 2008, 'PEND'], [12, 4, 2008, 'PEND']]

var holidayDays = [[12, 25, 2008],[4, 12, 2009],[11, 26, 2009],[12, 25, 2009]];

function setScheduledDays(date) {

    var isScheduled = false;

    var isHoliday = false;

    var scheduleStatus = "";

    // Check for scheduled day

    for (i = 0; i < scheduledDays.length; i++) {

      if (date.getMonth() == scheduledDays[i][0] - 1 && date.getDate() == scheduledDays[i][1] && date.getFullYear() == scheduledDays[i][2])

      {

        isScheduled = true;

        scheduleStatus = scheduledDays[i][3];

      }

    }

    // Check for holidays

    if (holidayDays != null)

    {

        for (i = 0; i < holidayDays.length; i++) {

          if (date.getMonth() == holidayDays[i][0] - 1 && date.getDate() == holidayDays[i][1] && date.getFullYear() == holidayDays[i][2])

          {

            isHoliday = true;

          }

        }

    }   

    if (isHoliday)

        return [false, 'CLOSED'];

    else if (isScheduled)

        return [true, scheduleStatus];

    else

      return [true, ''];

} 

//--></SCRIPT>