Search code examples
javascriptcsscalendaralignmentautojump

push div block up if there is space?


Hora here, i think of a calender with entries over multiple days. if there are multiple entries overlapping they should automatically jump in one line if there is enough space. How could one achieve this? Is this possible with only little javascript?

A calender like this: calender image


Solution

  • I assume you are using div blocks to show a cell for every single day on your calendar. If you use display: flex; together with flex-direction: column; on your cells, you can determine the display order of its children (your entries) using the order property.

    If you set a class with order: 1; on the entries that are part of a multi-day (overlapping) entry, those entries will be shown at the top of your cell.

    You can read more about ordering flex items in this article.