How can I change the React Big Calendar daily time range?

Question

I am trying to change React Big Calander's daily time from 12:00 AM to 08:00 AM. Is it possible?

current output

expected output

<DnDCalendar
        localizer={localizer}
        events={allEvents}
        format={"DD/MM/YYYY HH:mm"}
        startAccessor="start"
        endAccessor="end"
        resources={court}
        resourceIdAccessor="courtId"
        resourceTitleAccessor="courtTitle"
        defaultView="day"
        views={["day"]}
        onEventDrop={moveEvent}
        onEventResize={resizeEvent}
        draggableAccessor={(event) => true}
        timeslots={1}
        step={60}
        handleDragStart={() => console.log("eve")}
        formats={formats}
        resizable
        scrollToTime={scrollToTime}
        selectable
        showMultiDayTimes={true}
        onNavigate={((event) => setUpdatedDate(event), getBookingFunc())}
        onSelectSlot={(event) => AddEvent(event)}
        components={{ event: CustomEvent }}
        eventPropGetter={(event) => ({
          style: {
            backgroundColor:
              event.start.getDay() >= 1 && event.start.getDay() <= 1
                ? "#F471D1"
                : event.start.getDay() >= 2 && event.start.getDay() <= 2
                  ? "#00BBB6"
                  : event.start.getDay() >= 3 && event.start.getDay() <= 3
                    ? "#634477"
                    : event.start.getDay() >= 4 && event.start.getDay() <= 4
                      ? "#FE7D2E"
                      : event.start.getDay() >= 5 && event.start.getDay() <= 5
                        ? "#FCA906"
                        : event.start.getDay() >= 6 && event.start.getDay() <= 6
                          ? "#CF3530"
                          : "#002E45",
          },
        })}
      />

Answer 1

Yes, using the min and max props.

<Calendar
  {...otherProps}
  min={yourMinTimeAsJSDateTimeObj}
  max={yourMaxTimeAsJSDateTimeObj}
/>