FullCalendar changing event color based on view

Question

I'm trying to dynamically change my event colors based on the view that is being rendered in full calendar.

When I populate the events into the calendar with ajax I pass the color and textColor dynamically from the server.

        if event.service_area:
        if event.service_area.pk == 1:
            color = '#4986e7'
        elif event.service_area.pk == 2:
            color = '#ff7537'
        elif event.service_area.pk == 3:
            color = '#f691b2'
    else:
        color = '#00a19c'

    start = event.start_datetime.strftime("%Y-%m-%d %H:%M:%S")

    event_slug = {
        'title': event.summary,
        'start': start,
        'description': event.description,
        'location': event.location,
        'g_event_id': event.google_event_id,
        'status': event.status,
        'event_id': event.id,
        'color': '#fff',
        'textColor': color,
    }

In the 'month' view I want to retain the color that I originally passed in the event json (color text, white background), but when I switch to 'basicWeek' or 'agendaDay' view I want the colors to switch (white text, color background). When I switch views the first time it works, but then any subsequent switching of views causes the colors to endlessly switch.

eventRender: function(event, element, view) {
    if (view !== 'month' ) {
      var color = event.color;
      var text = event.textColor;

      event.color = text;
      event.textColor = color;
    }
}

How can I set up this event render script to only switch the colors I originally passed when the view I'm changing from is 'month' to 'agendaDay' or 'basicWeek' and then revert to the original colors when switching back to the 'month' view?

add a class to element...and use css rules based on view classes — charlietfl

Komonyi Komonyi · Accepted Answer · 2015-07-24T13:03:42

You are using the colors on the wrong object.

From the documentation:

event is the Event Object that is attempting to be rendered.

element is a newly created jQuery element that will be used for rendering. It has already been populated with the correct time/title text.

So, apply the colors to the element variable, not to the event. This way your original colors won't change in the actual event object, only in the rendered object.

FullCalendar changing event color based on view

1 Answers