React Big Calendar仅显示特定时间范围

时间:2019-07-04 10:31:12

标签: reactjs react-big-calendar

您好,正在使用React Big Calendar。默认情况下,日历在“周和日”视图中的显示时间是从上午12:00到晚上11:30,但是我只想显示从7:00到晚上7点的时间范围。我试图通过隐藏不需要的行来修改css,但是日历上的事件项仍保持在原来的位置(例如:事件发生在上午7:00,将保持在上午10:30)。这是我的scss:

.rbc-time-content {
  align-items: normal!important;
  .rbc-time-gutter.rbc-time-column,
  .rbc-day-slot.rbc-time-column {
    .rbc-timeslot-group:nth-child(n+1):nth-child(-n+14),
    .rbc-timeslot-group:nth-child(n+40):nth-child(-n+48) {
        display: none;
        height: 0!important;
    }
  }
}

1 个答案:

答案 0 :(得分:2)

使用最小值/最大值:

<Calendar min={new Date(2020, 1, 0, 7, 0, 0)} max={new Date(2020, 1, 0, 19, 0, 0)} />