javascript - jQuery 周历插件中的非营业时间变灰

Question

我正在使用jQuery weekcalendar 插件来显示带有事件的基于 Web 的日历。如何将非工作时间灰显？当不在营业时间时，整行应该是灰色的：

businessHours: {start: 8, end: 19, limitDisplay: false},

Answer 1

首先，您需要为您的营业时间使用全局变量，如下所示：

var timeStart = 8
var timeEnd = 19

businessHours: {start: timeStart , end: timeEnd , limitDisplay: false},

然后，尝试将其添加到文档准备好的 jquery javascript 中（在创建日历之后）：

$('.wc-time-slot').each(function(index, element) {
    if (index<6*timeStart||index>=6*timeEnd) {
        $(this).css('background-color','#eee')
    }
});

每小时有六行，所以这就是为什么要乘以 6。

Answer 2

编辑：不完整的答案。它不会突出显示整行。

感谢 Phekka，我在 Inspect element 部分找到了这个：

非营业时间：

<div class="wc-hour-header ui-state-default"></div>

营业时间：

<div class="wc-hour-header ui-state-active wc-business-hours"></div>

Answer 3

这有点难。我认为您必须使用 td.wc-day-column背景属性进行管理，并添加一个带有计算像素或百分比值的css3 渐变。

祝你好运。