2 years ago
#59947
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:
But on the Month view, the event visually expand to take the full day of 17/01.
What I see in month view:
What I'd like to see instead would be something like that (edited image) :
What I want in month view:
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