如何使用 arshaw fullcalendar v2.3.0 将 agendaDay 视图中的非工作日变灰

Question

我使用的是最新版本的 arshaw fullcalendar（2.3.0 版），并且有一个日历需要显示活动工作日和时间的场景。

我使用以下方法完成此操作：

 businessHours:
 {
    start: '08:00',
    end: '17:00',
    dow: [2,3,4,5,6,0] // Monday is not a working day
 },

在 agendaWeek 视图中，它清楚地显示了工作日和非工作日 'greyed out'。就我而言，星期一

但是当我进入 agendaDay 视图时，未定义为工作日的星期一没有显示灰色部分，并且整天都是白色的，使其看起来像一个工作日。

如果一天没有指定为工作日，agendaDay 视图中的一整天是否应该显示为灰色？

参考：http://fullcalendar.io/docs/display/businessHours/

Answer 1

我认为这是一个错误，但我创建了一个解决方法。当 fullcalendar 在 agendaDay 视图中并且当前日期不在 DateOfWeek 数组中时，它会创建一个后台事件。

$('#calendar').fullCalendar({
    businessHours: {
        start: '08:00',
        end: '17:00',
        dow: [0, 2, 3, 4, 5, 6]
    },

    viewRender: function (view, e) {
        var bh = view.options.businessHours,
            startDate = view.start;

        if (view.type === "agendaDay" && bh.dow.indexOf(startDate.day()) === -1) {
            $('#calendar').fullCalendar('renderEvent', {
                start: moment(startDate),
                end: moment(view.end),
                rendering: 'background',
                className: 'fc-nonbusiness'
            }, false);

            $('#calendar').fullCalendar('renderEvent', {
                start: moment(startDate),
                allDay: true,
                rendering: 'background',
                className: 'fc-nonbusiness'
            }, false);
        }
    }
});

有几点可以改进：

选择器 $('#calendar') 可以是通用的。
当您多次访问当天时，.fullCalendar('renderEvent',将追加多个后台事件。

如何使用 arshaw fullcalendar v2.3.0 将 agendaDay 视图中的非工作日变灰

How to grey out non working day in agendaDay view with arshaw fullcalendar v2.3.0

javascript

jquery

json

fullcalendar

jsfiddle