CODEWITHSUNDEEP
fullcalendar
kingkelly
kingkelly

Reputation: 199

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)

Upvotes: 1

Views: 1596

Answers (2)

Emmanuel Shekinah
Emmanuel Shekinah

Reputation: 11

use rendering: 'background' in events

Upvotes: 0

ADyson
ADyson

Reputation: 61904

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.

Upvotes: 1

Related Questions