Repository: fullcalendar/fullcalendar

Issue #3174: Time padding before/after an event (ex: travel time)
Created: 2016-05-20T13:58:28Z
Hi,
It would be a nice native feature to be able to add and render travel times.
In other words: add minutes before and after an event, and link this area to the event.
Then, moving or resizing an event will also move the corresponding travel time area directly.
Here is how it looks like in my custom implementation (see arrows):

In this example the event has 1 hour before and 1 hour after as travel time to go to the meeting.
Another example (Apple Calendar):

Last example (Outlook add-in):

It's called "travel time" but actually it could be used in other ways such as "time to prepare a meeting".
IMHO, it could then be useful for the others, but without showing a title (no "travel", no "return", no "travel time", just a background).
Ideas of implementation:
Same event container
In each event's object, we would have two new properties: "before" and "after" (both are seconds (number)).
computeSegVerticals and generateSegVerticalCss would need to be updated.
The first one to memorize both top/bottom values with and without calculating the travel time area (for diff calculations).
The second one to modify the CSS by using top/bottom values. I actually implemented it with paddings and backgrounds (a container has the hatched background, and the child tag renders the normal background). Paddings are the differences between normal top and top with travel zone.
For instance: Normal top for 9:30 is 143.5px, and with travel time the new top is 102.5px. Then padding-top is 41px.
Travel zone background (linear gradient) is on fc-event and fc-content has the plain blue background. I would add a class on fc-event if the event has travel before (same for travel after).

Problem in my solution:
Paddings work only if travel before/after is in the same day as the event start & end times. If start time is 01:00 and time before is 2 hours, then 1 hour (in previous day) can't be render with paddings...
So it is not a perfect implementation and you will probably find a better way to do this.
Create events representing travel before and travel after
These events aren't real events but shows in the calendar the travel areas.
These events must be linked to the real event so that moving, resizing, deleting this event will also modify the render of the travel events.
This could be a solution to show these travel areas in other columns (days) since it isn't the same container. But it's harder to implement and need to modify more JS (and CSS).
Then I didn't use this solution but it is maybe the one you could choose.
EDIT:
This would also need to be implemented for horizontal events (all-day) and for the Scheduler views
Thanks,
Antho

Duplicate issue #5099: render sub-events within an event
Created: 2019-10-22T12:41:13Z
Feature Requests
I couldn't find a solution for this.thats why im submit this as a feature request. Assume a user has an event which is covers 3 days in dayGridMonth view.mean time middle day needs to be highlighted using different colors .so then the developer can map that anything on his component.

Closing comment (2020-06-29T23:06:37Z): sorry. similar to #3174