kimg1982 kimg1982 - 5 months ago 83x
Javascript Question

fullcalendar background events: allow drop

I would like to use the "background events" feature of FullCalendar to show holidays on my calendar (visible with a background color "red").

events: [
start: '2016-01-24',
end: '2016-01-28',
rendering: 'background',
color: 'red'

This works perfectly, but I'm not able to drop anything on these timeslots that are defined as "background events".

I'm using FullCalendar as a planning tool. And in some occasions it's possible that employees work during the holidays. So holidays don't need to be "blocked"....How can I allow "dropping" of events on the holiday areas in the FullCalendar?

Any help would be great.

Kind regards,


This solution makes sure holidays are give a color in the calendar, but don't restrict dropping events on these days:

dayRender: function (date, element, view)
            var date = new Date(date);
            var day = date.getDate().toString();
            if (day.length == 1)
            day = 0 + day;
            var year = date.getFullYear();
            var month = (date.getMonth() + 1).toString();
            if (month.length == 1)
            month = 0 + month;
            var dateStr = year + "-" + month + "-" + day ;

            YourDates = JSON.parse(json_holidays);

            for (var i = 0; i < YourDates.length; i++)
                if ( dateStr.toString() == YourDates[i]["date"].toString() )
                    $(element).attr('title', YourDates[i]["name"].toString());