I am making a simple calendar that has days as columns, and multiple events each day. This is simple. However, some events go over two days and I wonder if it is possible to display this with css only. The content will of course be dynamic, so can't hardcode anything.
Here is the concept I'm trying to achieve:
Requirements
- The events shouldn't overlap (example: the event on Monday that goes into Tuesday should occupy place on Tuesday)
- Events should be possible to drag from one day to another. Drag&drop will be solved with Javascript, but in order to solve it I need to know on which day the events are dropped onto. This affects how html is built, I think.
The html will look something like this:
<div class="week"><div class="day-column" data-date="2024-06-03"><div class="event">Event 1</div><div class="event overnight">Event 2</div><div class="event">Event 3</div><div class="event">Event 4</div></div><div class="day-column" data-date="2024-06-04"><div class="event">Event 1</div><div class="event">Event 2</div><div class="event overnight">Event 3</div><div class="event">Event 4</div></div><div class="day-column" data-date="2024-06-05"><div class="event">Event 1</div><div class="event">Event 2</div><div class="event">Event 3</div><div class="event">Event 4</div></div><div class="day-column" data-date="2024-06-06"><div class="event">Event 1</div><div class="event">Event 2</div><div class="event">Event 3</div><div class="event overnight">Event 4</div></div><div class="day-column" data-date="2024-06-07"><div class="event">Event 1</div><div class="event">Event 2</div><div class="event">Event 3</div><div class="event">Event 4</div></div></div>Week will be a flex container, the days its children, with the events block elements.
Is this even possible to make with html and css only? Or am I doomed to make something super complicated setup where I have to make ghost objects with javascript, where events from previous day overlap only to push down overlapped events today?
Any ideas?