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:
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 (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"}]