Add Italian Holidays Into Fullcalendar

I use FullCalendar in my application and its working. Now I need to change the color of Italian holidays into red. I did it for weekends but: I don't know how to add holidays in

Solution 1:

You should use another eventSource that provides the holidays. These events can have a property like holiday, that specify that the event is indeed a holiday.

Based on this holiday, you can change the background color of the day with eventRender

You will have to add the following code to var calendar = $('#calendar').fullCalendar({:

eventSources: [
    {
        url: 'fullcalendar/holidays'// url to get holiday events
    }
    // any other sources...
],
eventRender: function(event, element, view) {
    // lets test if the event has a property called holiday. // If so and it matches '1', change the background of the correct dayif (event.holiday == '1') {
        var dateString = event.start.format("YYYY-MM-DD");

        $(view.el[0]).find('.fc-day[data-date=' + dateString + ']')
                        .css('background-color', '#FAA732');
    }
},

Your JSON object should look like this:

[{"title":"Christmas","start":"2014-12-25","holiday":"1"},{"title":"Another holiday","start":"2014-10-14","holiday":"1"}]