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:

  1. I don't know how to add holidays in calendar.
  2. How can i change their color.

This is my code :

    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev',
            center: 'title',
            right: 'next',
        defaultView: 'month',
        lang: 'it',
        height: 600,
        dayClick: function(date, jsEvent, view) {
            // Changing BG color
            $(this).css('background-color', 'green');
            //Create modal here
            // Show Date in SPAN
            // Put Date value in a variable 
            $('#date').attr('value', date.format('DD/MM/YYYY'));

        editable: true,



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 day
    if ( == '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"}]


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.