Show all-day events as a background color

Is there a way to show certain events in my calendar as full background blocks of color? For example, if an event is an all-day event, it's date square will have a background color of red. All other events will look like normal events.

(Im using FullCalendar synched to a google calendar)

1 answer

  • answered 2018-07-11 08:44 ADyson

    To make an event appear as a full block of colour within its slot the way you described, you can use the "background" events feature. Since you're using Google Calendar and don't have full control over the JSON data provided, you'll have to add the necessary property via the eventDataTransform callback, which allows modification of the event data after it's been downloaded but before it's rendered onto the calendar. Something like this I think (as an option in your calendar config):

    eventDataTransform: function(event)
    {
      if (event.allDay == true) event.rendering = "background";
      return event;
    }
    

    See https://fullcalendar.io/docs/eventDataTransform and https://fullcalendar.io/docs/background-events for details.