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: busines

Solution 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