简体   繁体   English

如何更改 React Big Calendar 每日时间范围?

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

I am trying to change React Big Calander's daily time from 12:00 AM to 08:00 AM.我正在尝试将 React Big Calander 的每日时间从 12:00 AM 更改为 08:00 AM。 Is it possible?是否可以?

current output当前 output 在此处输入图像描述

expected output预计 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",
          },
        })}
      />

Yes, using the min and max props.是的,使用minmax道具。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM