基于事件类型的单元格的jQuery Datepicker背景颜色
我需要根据事件类型显示不同颜色的不可用日期，或者当天是否已满。
下面的例子从数据库中提取日期，我将它们作为数组传递给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();
从精细手册 ：
beforeShowDay
一个以日期作为参数的函数，必须返回一个数组：
[0]：true/false表示此日期是否可选[1]：要添加到日期单元格的CSS类名称或默认演示文稿的""[2]：此日期的可选弹出工具提示在显示日期选择器之前，每天都会调用该函数。
因此，特定颜色的返回值没有空间。 但是，数组中的元素之一可以包含多个类名，因此您可以通过CSS执行此操作。
如果你想要一个特定的假期以红色文字出现，那么你可以在你的beforeShowDay做到这beforeShowDay ：
return [false, 'holiday red', holiDays[i][3]];
然后添加一点CSS：
td.red span.ui-state-default { color: #f00; }
让redclass做点什么。
演示： http ： //jsfiddle.net/ambiguous/pjJGf/