Fullcalendar event cell background color

Question

I use Fullcalendar with Google Calendar, so I can’t apply the class to the event, as far as I know.

What I want to do should be fairly simple, and I'm sure the answer will include eventRender, but I just can't get it to work.

Simple: change the entire background color of the cell containing any event (all all-day events in Google Calendar).

What I'm trying to achieve is an accessibility state; any event is "unavailable", that is, the background color is red.

Answer 1

Yes, you can do this with eventRender . You need to find the td that contains this event. If you check fullCalendar, you will notice that tds has a data-date attribute for that particular day. Here's how we find td in which there is an event so that we can change the background color to red, in particular using:

 eventRender: function (event, element) { var dataToFind = moment(event.start).format('YYYY-MM-DD'); $("td[data-date='"+dataToFind+"']").addClass('activeDay'); } 

In this example, the first line in eventRender uses the moment to format the start date of the event in the format corresponding to the value of the data-date attribute. The second line finds td with the data-date attribute, set to dataToFind , and then adds a class that we call activeDay , assuming you add something like this to your head / stylesheet:

 <style> .activeDay {background-color:#ff0000 !important;} </style> 

 $('#fullCal').fullCalendar({ events: [{ title: 'Main Event 1', start: new Date(), end: new Date(), allDay: false }, { title: 'Main Event 2', start: '2014-10-03 19:00', end: '2014-10-03 19:30', allDay: false }, { title: 'Main Event 3', start: '2014-10-15 17:00', end: '2014-10-15 18:00', allDay: false }, { title: 'Main Event 4', start: '2014-11-30 7:00', end: '2014-11-30 18:00', allDay: false }, ], header: { left: '', center: 'prev title next', right: '' }, eventRender: function(event, element) { var dataToFind = moment(event.start).format('YYYY-MM-DD'); $("td[data-date='" + dataToFind + "']").addClass('activeDay'); } }); 

 .activeDay { background-color: #ff0000 !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script> <p>Example:</p> <div id="fullCal"></div> 

Answer 2

@MikeSmithDev's answer does not work if you have events for several days.

If you have a few days, use this javascript:

 eventRender: function (event, element) { var start = moment(event.start); var end = moment(event.end); while( start.format('YYYY-MM-DD') != end.format('YYYY-MM-DD') ){ var dataToFind = start.format('YYYY-MM-DD'); $("td[data-date='"+dataToFind+"']").addClass('dayWithEvent'); start.add(1, 'd'); } } 

It uses the same principle as MikeSmithDev, so you should use the same css.