2 years ago

#59947

test-img

jerome

Timeline how to force event to display precisely with hour instead of expand to full day

I'm working with fullcalendar, and I need one piece of functionality. I'll explain with an example using the demo.

Here is a codePen provided by ADyson

That codepen was created by following this instructions. Go to the demo and click on edit in codePen and replace the properties events with (you may need to adjust the day if you're seeing this in the future) :

[{"resourceId":"a","title":"event 4","start":"2022-01-17T07:20:00+00:00","end":"2022-01-17T09:50:00+00:00"}]

On the day view we can see that the event render precisely depending of the time specified. Even, and that's what I want, if it doesn't fit the grid

Ok in day view:

enter image description here

But on the Month view, the event visually expand to take the full day of 17/01.

What I see in month view:

enter image description here

What I'd like to see instead would be something like that (edited image) :

What I want in month view:

enter image description here

Is it possible to disable the expand functionality and let the event display only depending on the time ? I've looked for an option on the official documentation but found none.

(Context) Why do I need this ?
Because if I have two events on the same resource, let'say 8h-12h and 14h-18h. With the default rendering in month view those two events would be vertically aligned. With what I want to do, they'll be horizontally aligned.
This let me create an overview where it is really easy to see if a resource have two events on the same time.

Phase 2 debugging :

As discussed with ADyson it seems that it is impossible to do this kind of view using only settings. But I have done a bit of debugging in fullcalendar and I have found out that at some point, when I render a view with a slotDuration set to day or bigger, the start and end of my event are respectively set to the start of day and end of day. I just can't figure out where this conversion is done.

Any insight, even if I have to change some code in fullcalendar would be useful.

javascript

fullcalendar

fullcalendar-scheduler

fullcalendar-5

0 Answers

Your Answer

Accepted video resources