I need to show non available dates in different color based on the event type or if it is full booked for that day.

Below example fetches dates from database and i pass them as an array to JavaScript at present i am passing four parameter in an array [2012,7, 15, 'Some events'] such as Year, Month, Day & Years. I want to alter this array to pass Fifth parameter as color [2012,7, 15, 'Some events', 'Red']. so that i can change the color of the cell based on the event type.

I am not sure how i will alter below script to make it work. I have looked for example but could not find a matching one. I would appreciate help in this regard as i am not a Guru of Scripting.

function BindEvents()
{
//Script for Calendar
        var holiDays = [[2012,7, 15, 'Some events'],[2012,7, 4, 'Some Event'],[2012,7, 1, 'Full Booked'],[2012,7, 5, 'Full Booked']];
        $(function () {
            $("#txtBookDate").datepicker({
                dateFormat: "yy-mm-dd",
                minDate: "-0d",
                maxDate: "+90d",
                firstDay: 0,
                beforeShowDay: noWeekendsOrHolidaysOrBlockedDates
            });

            function noWeekendsOrHolidaysOrBlockedDates(date) {
                //var noWeekend = jQuery.datepicker.noWeekends(date);
                return setHoliDays(date);
            }

            // set holidays function which is configured in beforeShowDay
            function setHoliDays(date) {
                var day = date.getDay();
                if (day == 5 || day ==6) return [false, ''];

                for (i = 0; i < holiDays.length; i++) {
                    if (date.getFullYear() == holiDays[i][0]
                        && date.getMonth() == holiDays[i][1] - 1
                        && date.getDate() == holiDays[i][2]) {
                        return [false, 'holiday', holiDays[i][3]];
                    }
                }
                return [true, ''];
            }
        });
}

BindEvents();  

I need to show non available dates in different color based on the event type or if it is full booked for that day.

Below example fetches dates from database and i pass them as an array to JavaScript at present i am passing four parameter in an array [2012,7, 15, 'Some events'] such as Year, Month, Day & Years. I want to alter this array to pass Fifth parameter as color [2012,7, 15, 'Some events', 'Red']. so that i can change the color of the cell based on the event type.

I am not sure how i will alter below script to make it work. I have looked for example but could not find a matching one. I would appreciate help in this regard as i am not a Guru of Scripting.

function BindEvents()
{
//Script for Calendar
        var holiDays = [[2012,7, 15, 'Some events'],[2012,7, 4, 'Some Event'],[2012,7, 1, 'Full Booked'],[2012,7, 5, 'Full Booked']];
        $(function () {
            $("#txtBookDate").datepicker({
                dateFormat: "yy-mm-dd",
                minDate: "-0d",
                maxDate: "+90d",
                firstDay: 0,
                beforeShowDay: noWeekendsOrHolidaysOrBlockedDates
            });

            function noWeekendsOrHolidaysOrBlockedDates(date) {
                //var noWeekend = jQuery.datepicker.noWeekends(date);
                return setHoliDays(date);
            }

            // set holidays function which is configured in beforeShowDay
            function setHoliDays(date) {
                var day = date.getDay();
                if (day == 5 || day ==6) return [false, ''];

                for (i = 0; i < holiDays.length; i++) {
                    if (date.getFullYear() == holiDays[i][0]
                        && date.getMonth() == holiDays[i][1] - 1
                        && date.getDate() == holiDays[i][2]) {
                        return [false, 'holiday', holiDays[i][3]];
                    }
                }
                return [true, ''];
            }
        });
}

BindEvents();  

• javascript
• jquery
• jquery-ui
• jquery-ui-datepicker

1 Answer 1

From the fine manual:

beforeShowDay

A function that takes a date as a parameter and must return an array with:

• [0]: true/false indicating whether or not this date is selectable
• [1]: a CSS class name to add to the date's cell or "" for the default presentation
• [2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

So there's no room in the return value for a specific color. However, element one of the array can contain multiple class names so you can do it through CSS.

If you wanted a particular holiday to e out in red text then you could do this in your beforeShowDay:

return [false, 'holiday red', holiDays[i][3]];

and then add a tiny bit of CSS:

td.red span.ui-state-default {
    color: #f00;
}

to make the red class do something.

Demo: http://jsfiddle/ambiguous/pjJGf/