4

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

enter image description here

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.

enter image description here

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/

Mark Raa
  • 43
  • 1
  • 5
  • It looks like this is a bug. [Reporting a bug for FullCalendar](http://fullcalendar.io/wiki/Reporting-Bugs/). – A1rPun May 27 '15 at 09:45

1 Answers1

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

A1rPun
  • 16,287
  • 7
  • 57
  • 90
  • Thank you so much! This works great! $('#calendar').fullCalendar('renderEvent', { start: moment(startDate).hour(0).minute(0), end: moment(view.end), rendering: 'background', className: 'fc-nonbusiness' }, true); – Mark Raa May 27 '15 at 11:35
  • @MarkRaa Thanks. The only thing left is built a check to see if there are already background events for the current day. – A1rPun May 27 '15 at 11:38
  • 1
    yes. However, my current implementation doesn't use other background events so using it exclusively to grey out the day is fine for now. Again, thank you so much! :) – Mark Raa May 27 '15 at 12:10