jQuery 基于事件类型的单元格的日期选取器背景颜色

jQuery Datepicker background color for cells based on event type

本文关键字：日期 单元格 选取 颜色 背景 类型 于事件 事件 jQuery      更新时间：2023-09-26

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

下面的示例从数据库中获取日期，我将它们作为数组传递给 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();

来自精细手册：

展会日之前

一个

函数，它将日期作为参数，并且必须返回一个数组，其中包含：

  • [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/

相关文章：