How to highlight a day that has an event in FullCalendar.js?

Question

I am using FullCalendar.js on my website. I installed events from the backend. I want to change the look of the day in which there is an event. In other words, I need some kind of class where I have "fc-day" and an event in it.

My code looks and you see it on jsFiddle:

$('#calendar').fullCalendar({ events: [{ title: 'event1', start: '2013-01-01' }, { title: 'event2', start: '2013-12-05', end: '2013-12-07' }, { title: 'event3', start: '2013-12-15' }] }) 

Answer 1

I could not find the desired property or method for use in the Fullcalendar documentation.

I came up with a kind of messy solution: adding a class on data attributes:

 function addClassByDate(date) { var dataAttr = getDataAttr(date); $("[data-date='" + dataAttr + "']").addClass("hasEvent"); } function getDataAttr(date) { return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate().toString().length === 2 ? date.getDate() : "0" + date.getDate()); }; 

It is great for the settings you specified in your question.

A working example can be found here: http://jsfiddle.net/6NShN/9/

Answer 2

You can use the eventRender () property for a full Canendar.

This works for me with fullcalendar v2:

 $('#calendar').fullCalendar({ events: [ { title : 'event1', start : '2014-04-01' }, { title : 'event2', start : '2014-04-05', }, { title : 'event3', start : '2014-04-15' } ], eventRender: function (event, element, view) { // like that var dateString = moment(event.start).format('YYYY-MM-DD'); $('#calendar').find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#FAA732'); } }); 

Node: You will need Moment for this.

Answer 3

Here is how I did it to give a background color for each event.

JS FIDDLE DEMO

 events: [ { title: 'Test1', start: new Date(2014, 2, 28, 12, 0), end: new Date(2014, 2, 30, 12, 0), backgroundColor: '#80ACED', }, { title: 'Test2', start: new Date(2014, 2, 14, 3, 55), end: new Date(2014, 2, 21, 12, 0), backgroundColor: '#80ACED', }, { title: 'Test3', start: new Date(2014, 2, 2, 12, 0), end: new Date(2014, 2, 2, 12, 0), backgroundColor: '#E82525', } ] 

Hope this helps. See http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

Answer 4

Finally, this is how it worked for me, look at it

jsfiddle

 $('#calendar').fullCalendar({ events: [ { title : 'event1', start : '2014-04-01' }, { title : 'event2', start : '2014-04-05', }, { title : 'event3', start : '2014-04-15' } ], eventRender: function (event, element, view) { // like that var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd'); view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732'); } }); 

Answer 5

weswesweswes - almost the right view.element should be view.el

 eventRender: function (event, element, view) { var dateString = moment(event.start).format('YYYY-MM-DD'); view.el.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event'); } 

Answer 6

None of these will work for> = v2.0 since fullCalendar started using moment.js to format the date.

The following worked for me (passed to the fullCalendar initialization function):

 eventRender: function (event, element, view) { var dateString = moment(event.start).format('YYYY-MM-DD'); view.element.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event'); } 

Answer 7

You can add a class based on the fullcalender.fc-event class, its not a direct approach, but its work.

Screenshot

  $(document).ready(function (){ $(".fc-event").addClass("myclass"); }); 

Answer 8

Here is another Fiddle JS FIDDLE

Just adding

 textColor: 'white', backgroundColor:'purple' 

You can change the style

JS Code:

 $('#calendar').fullCalendar({ eventSources: [ // your event source { events: [ { title : 'event1', start : '2013-01-01' }, { title : 'event2', start : '2013-12-05', end : '2013-12-07' }, { title : 'event3', start : '2013-12-15' }], textColor: 'white', backgroundColor:'purple' } // any other event sources... ] }); 

Answer 9

Fullcalendar v2, to view the agenda:

 eventRender: function(event, element, view ){ if(view.name=='agendaWeek') { var weekdays = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'); var eventweekday = $.fullCalendar.moment(event.start).format('d'); $('.fc-'+weekdays[eventweekday]).css('background-color', '#FFC'); } }, 

Allocates all days with events.