date select with random classes

by pradeep

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/smoothness/jquery-ui.css">
Select a week from this calendar:
<div id="dater"></div>

CSS

.nonworkingday {
    background-color: #F7BE81 !important;
}
.modifiedday {
    background-color: #F4FA58 !important;
}
.workingday {
    background-color: #ACFA58 !important;
}

JavaScript

var NonWorkingDay = 1;
var WorkingDay = 2;
var ModifiedWorkingDay = 3;
var calendarDays = {
    days: [
    undefined, undefined,
    {
        "dayType": WorkingDay,
        "i": 5}, 
    undefined, undefined, undefined, undefined,
    {
        "dayType": NonWorkingDay,
        "i": 9},
    {
        "dayType": ModifiedWorkingDay,
        "i": 1}],
};

$("#dater").datepicker();

$("#dater").datepicker('option', 'beforeShowDay', renderCalendarCallback
);

function renderCalendarCallback(date) {
    console.log(date.getDate());
    if (!calendarDays.days[date.getDate()]) {
        return [true, ''];
    }
    var objValue = calendarDays.days[date.getDate()];
    if (objValue.dayType == NonWorkingDay) {
        return [true, 'nonworkingday'];
    }
    else if (objValue.dayType == ModifiedWorkingDay) {
        return [true, 'modifiedday'];
    }
    else if (objValue.dayType == WorkingDay) {
        return [true, 'workingday'];
    }

    //Here for the default days
    return [true, ''];
}