I am trying to build a custom calendar view in weweb using the date plugin, make it as no-code as possible. It went quite well, but now I have an issues issue sorting/stacking overlapping multi-day events.
In each date cell I have a div container of the events. Using conditional rendering I render event item block on each date from, between and up and unitl the end date. It works, but when I have overlapping multi-day events, sorting/stacking goes wrong. I tried to sort by start/end/id but that doesn’t work.
Pretty cool stuff! Did you solve this? Are you having divs as “day” blocks?
I might want to try my hand on a brainstorm unless you found a great solution, since I might do something like this. I might have an idea with values and indexes…
Did not solved it yet. I tried seperating multi day and single day event and try to use absolute positioning, but that wasn’t usable.
Next thing I will try is to split the multi day events using a workflow in start, middle and end event blocks, with a specific order, and try to render each in the correct cell.
Hmm… I was thinking about absolute positioning as well.
I’m gonna brainstorm here.
I’m thinking you could have some kind of order value that is dynamically set based on whether or not there is another one on the same day. ie. check if any items in this block, when setting a entry start date.
If true then set order value to first available number. (0,1,2,3)
ID5 will be value 0 because there is no other on the start date.
ID6 would then get value 1.
ID7 would get value 0, since there is no number 0 anymore (ID5 is over)
If you add another on Nov 8th-10th, it will be value 2 (ID8).
Then you can get the indexes based on the value of the entry.
Then you could do a margin on the index number of the entry (index*height)… Let’s say you have 18px height per entry.
ID5 // index 0 = 0px from top
Id6 // index 1 = 18px from top
id7 // index 0 = 0 px from top
ID8 // index 2 = 36px from top
I’m not sure if the logic works though, I would probably explore somewhere there. I’m trying to see how apple calendar does it but I’m not sure yet.
Thanks. Thinking about the same logic sort of. In your screenshot it’s interesting to see the gap on the 19th. If I add a single day event on the 19th it should fill up that gap.
When using Xano for example it would be easier to split multiday events, but I want to have this logic in Weweb. Because eventually I would transform this calendar into a component, with a collection parameter to put in the events, and embedded workflows for view change and rendering the events.
Yeah. In the screenshot, I don’t really get the logic behind the second 20th entry. How come the long entry isn’t second? I don’t know…
Component is a good idea.
I have a calendar where I get “current day active entries” and then render accordingly.
Downside is that it’s a lot of dynamic components. Upside is that it’s simple to control.
I guess in the data you can read if the event starts or ends on “current day” or stretches beyond, enabling you to give the visual impression that it’s one large entry.
Calendars are hard in WeWeb. It seems to me they can get pretty heavy quickly. I’m eager to see what solution you end up with.
