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

问题

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/

回答1:

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

来源：https://stackoverflow.com/questions/30475236/how-to-grey-out-non-working-day-in-agendaday-view-with-arshaw-fullcalendar-v2-3

标签

javascript

jquery

json

fullcalendar