Fullcalendar event cell background color

3
votes

I'm using Fullcalendar with a Google Calendar so I can't apply a class to an event as far as I'm aware.

What I want to do should be quite simple and I'm sure the answer will involve eventRender but I just can't get it working.

Simply: change the entire background color of the cell that contains any event (all events are "all day" within the Google Calendar).

What I'm trying to achieve is an "availability" state; any event is "unavailable" i.e. background color red.

2
fullcalendar
Tried using eventColor? "This option can be overridden on a per-source basis with the color Event Source Object option or on a per-event basis with the color Event Object option." - Richard Löwenström
@RichardHermanson I believe he means the entire cell, not just the event data. - MikeSmithDev
Also, in the future, including some code that shows your attempt helps. - MikeSmithDev
A screenshot would be helpful to describe what you're looking to create here. - ted.strauss

2 Answers

12
votes

Yes, you can do it with eventRender. You'll have to find the td that contains that event. If you inspect the fullCalendar, you'll note the tds have a data-date attribute for that particular day. That is how we will find the td that has an event in it so we can change the background color to red, specifically 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 moment to format the event start date into the format needed to match the data-date attribute value. The second line finds a td with the data-date attribute having a value of dataToFind and then adds a class we make up called 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>
1
votes

The answer of @MikeSmithDev does not work if you have events on multiple days.

If you have multiple 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's, so you must use the same css.