如何在不相互重叠的情况下传播div

我正在建立一个事件调度程序,我已经陷入了一个问题,我无法找到一种方法来传播事件而不会相互重叠.(它可能同时具有事件且没有限制.只要可能,使用100%可用的事件width)

这是这个场景的图片.

一些考虑:

事件被包含在div中,position: relative并且所有事件都包含在内position:absolute.

使用javascript,我必须弄清楚需要什么,top left width以及height每个"div事件" 的价值.

事件是一组对象,如下面的代码:

{startAt:"12:00:30",endsAt:"13:00:00",描述:"evt1",id:'00001'}

我正在使用Vue.js来开发这个项目.但如果你不了解Vue,这不是问题.我使用jsbin构建了一个小项目,所以你可以使用javascript函数.

现场代码:https://jsbin.com/bipesoy/

哪里有问题？

我找不到基于事件数组计算top left width和height运行的算法.

关于jsbin代码的一些注意事项:

找到上面4个属性的所有代码都在函数内部 parsedEvents

在里面parsedEvents你可以使用以下方法访问事件数组:this.events

工作parsedEvents是遍历事件数组并为每个事件添加样式属性,然后使用样式对象返回一个新的事件数组.

每30分钟高度为40px;

任何想法如何实现它或更好的解决方案？