如何使用arshaw fullcalendar v2.3.0在AgendaDay视图中将非工作日变为灰色 [英] How to grey out non working day in agendaDay view with arshaw fullcalendar v2.3.0

问题描述

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

Ive完成这个使用：

  businessHours：
 {
 start：'08：00'，
结束：'17：00'，
 dow：[2,3,4,5,6,0] //星期一不是工作日
}，
  

在日程安排视图中，它清楚地显示了非工作日灰显的工作日。在我的情况下，周一

但是，当我去议程日视图，星期一，这是没有定义为一个工作日显示没有灰色部分，整个一天是白色的，使它看起来像一个工作日。

如果没有将工作日指定为工作日，议程日期视图中的整个一天是不是应该变灰？

ref： http://fullcalendar.io/docs/display/businessHours/

解决方案

我认为这是一个错误，但我创建了一个解决方法。当fullcalendar进入议程日视图并且当天不在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'，将追加多个后台事件。

jsfiddle

I am using the latest version of arshaw fullcalendar (version 2.3.0) and have a scenario where a calendar needs to show active working days and hours.

Ive done this using:

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

In agendaWeek view, it clearly shows the working days with the non working days 'greyed out'. In my case, Monday

But when I go to agendaDay view, Monday, which is not defined as a working day shows no greyed out sections and the entire day is white, making it look like a working day.

Shouldn't the entire day in agendaDay view be greyed out if the day is not specified to be a working day?

ref: http://fullcalendar.io/docs/display/businessHours/

解决方案

I think this is a bug but I created a workaround. It creates a background event when fullcalendar is in the agendaDay view and the current day is not in the DateOfWeek array.

$('#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);
        }
    }
});

There are a few things that can be improved:

• The selector $('#calendar') can be something generic.
• When you access the day multiple times, .fullCalendar('renderEvent', will append multiple background events.

jsfiddle

这篇关于如何使用arshaw fullcalendar v2.3.0在AgendaDay视图中将非工作日变为灰色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！