kimg1982 kimg1982 - 6 months ago 130
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").
e.g.

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,
Kim

Answer

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).addClass('holiday');
                    $(element).attr('title', YourDates[i]["name"].toString());
                }
            }
        },
Comments