CODEWITHSUNDEEP
jquerycssfullcalendar
Darcy Sabatino
Darcy Sabatino

Reputation: 51

Is there a way to display a FullCalendar event full-width behind other events in the same time-slot?

I want to override the behaviour in FullCalendar that vertically-divides concurrent events in the same timeslot.

I have one Google calendar (called "time-blocking template") that I want all the events to occupy 100% of the timeslot width, regardless of other (non-"time-blocking") calendar events in the same timeslot. Any other events from other Google calendars are treated normally (and split-vertically if they share the same timeslot with other non-time-blocking events).

Also, non-time-blocking events need an opacity parameter so I can see the "time-blocking template" events behind them.

Is this possible?

Upvotes: 0

Views: 983

Answers (1)

Darcy Sabatino
Darcy Sabatino

Reputation: 51

Here's how I did it with FullCalendar's eventAfterRender function.

I over-rode the width for specific events by setting isTemplate = "true" for events that belong to the "Time Blocking" calendar.

Using the eventAfterRender function, I checked if event.isTemplate == "true" and set the width & left CSS accordingly. If event.isTemplate == "false", I change the opacity to see the template event behind, and increment the z-index by 1 so all "non-template" events are in front of the "template events".

The following block is inside my $('#calendar').fullCalendar() declaration:

eventAfterRender: function(event, element, view) {
    if(event.isTemplate == "true") {
      $(element).css('width','100%');
      $(element).css('left','0%');
    } else {
      $(element).css('opacity','0.5');

      event_zindex = $(element).css('z-index');
      $(element).css('z-index',event_zindex + 1);
    }

Hope this is helpful to someone else!

Upvotes: 1

Related Questions