基于事件类型的单元格的jQuery Datepicker背景颜色

Question

我需要根据事件类型显示不同颜色的不可用日期,或者当天是否已满.

下面的示例从数据库中提取日期,我将它们作为数组传递给JavaScript,目前我正在传递一个数组中的四个参数, [2012,7, 15, 'Some events']如年,月,日和年.我想改变这个数组以传递第五个参数作为颜色[2012,7, 15, 'Some events', 'Red'].这样我就可以根据事件类型改变单元格的颜色.

我不确定我将如何更改脚本以使其工作.我找了一些例子,但找不到匹配的.我很感激这方面的帮助,因为我不是脚本大师.

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();  

Answer 1

从精细手册:

beforeShowDay

一个以日期作为参数的函数,必须返回一个数组:

• [0]:true/ false表示此日期是否可选
• [1]:要添加到日期单元格或""默认演示文稿的CSS类名称
• [2]:此日期的可选弹出工具提示

在显示日期选择器之前,每天都会调用该函数.

因此,特定颜色的返回值没有空间.但是,数组中的元素之一可以包含多个类名,因此您可以通过CSS执行此操作.

如果你想要一个特定的假期以红色文字出现,那么你可以在你的beforeShowDay:

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

然后添加一点CSS:

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

让red班级做点什么.

演示:http://jsfiddle.net/ambiguous/pjJGf/