0

Hi am using React Big Calendar. By default, the calendar show time from 12:00 a.m to 11:30p.m in Week and Day view but i only want to show time range from 7:00 a.m to 7 p.m. I have tried to modify the css by hiding unwanted rows but the event items on the calendar still stay at their old position (e.g: event happens at 7:00 a.m will stay in 10:30 a.m). Here is my 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;
    }
  }
}
Lee
  • 1,041
  • 7
  • 20
  • 31

2 Answers2

3

use the min/max values:

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

I was in same problem please use min and max to set specific time range

<Calendar
  {...otherProps}
  min={yourMinDateTimeObj}
  max={yourMaxDateTimeObj}
/>

Hope this will help

Lokesh thakur
  • 219
  • 2
  • 11