How to implement custom holidays in full calendar

2
votes

I've implemented fullcalendar api to show all business/working days of the company. 

    $('#calendar').fullCalendar({
    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
allDaySlot:false,
    events: evtObj,  //evtObj contains list of working days in JSON
    editable: false,
    height: 630
});

For example : From 1st June 2015 to 31st Oct 2015. Now I've a business holiday list, say : 25th June, 31st August......

Now how can I remove these dates from being shown. As event object contains only start date and end date as parameters

{
    title: event name,
    start: start time,
    end  : end time
}
1
fullcalendar

1 Answers

0
votes

You can't do that in fullcalendar. However there is some kind of workaround.
You can add background events for those dates with the same CSS class as the business hours. Let's assume you have these dates:

var start = new Date(2015, 5, 1), //1st of June 0:00
    end = new Date(2015, 5, 2); //2nd of June 0:00

Now create 2 events for 1 particular day, 1 event for the allDay slot & 1 event for the rest of the day. The events look like this:

{
    start: moment(start),
    end: moment(end),
    rendering: 'background',
    className: 'fc-nonbusiness'
},
{
    start: moment(start),
    allDay: true,
    rendering: 'background',
    className: 'fc-nonbusiness'
}