同时进行多个活动并响应大日历

Question

当我在日或周视图上同时有很多事件时，它们太小并且互相隐藏。

有没有一种方法可以延长小时高度并将所有事件显示在另一个下方，或者更改小时宽度？

Answer 1

您可以使用 step 属性来设置时隙的持续时间，并使用 timeslots 属性来设置时隙的数量：

 <Calendar
     components={components}
     events={cal_eventsAdmin}
     onSelectSlot={this.handleSelect}
     step={15}        // duration of the slot       
     timeslots={4}    // number of slots within an hour
     defaultView="day"
     views={["month", "day"]}
     defaultDate={new Date()}
     localizer={localizer}
     min={new Date(2019, 10, 0, 8, 30, 0)}
     max={new Date(2019, 10, 0, 15, 0, 0)}
 />

在此示例中，您将看到每小时 4 个时段，每个时段持续 15 分钟。我想在你的情况下，你可以增加插槽的数量，这将在一次又一次的时间内为你提供更多的空间

Answer 2

如果事件重叠，您可以添加 dayLayoutAlgorithm={"no-overlap"} 它将分隔每个事件