如何使用 react-big-calendar onRangeChange 选项答案

【问题标题】：how to use react-big-calendar onRangeChange option如何使用 react-big-calendar onRangeChange 选项
【发布时间】：2020-05-06 02:52:34
【问题描述】：

enter image description here

我不想移动日历月份，所以使用此代码

const FullCalendar = (props) => {

  const { calendarInfos, height, dateInfo } = props

  const { selectDate } = dateInfo

  const localizer = momentLocalizer(moment);

  return (
    <>
      <CalendarCss />
      <Calendar
        toolbar={false}
        popup={false}
        localizer={localizer}
        culture='ko'
        views={['month']}
        events={calendarInfos}
        defaultDate={new Date(moment(selectDate))}
        startAccessor="start"
        endAccessor="end"
        onRangeChange={(e)=>{console.log(e)}}
        style={{
          height: height + 'px',
          width: '100%',
        }}
        components={
          {
            event: (e) =>
              (
                <FullCalendarEvent
                  event={e}
                />
              )
            ,
          }
        }
      />
    </>
  );
};

但是这段代码有错误。

enter image description here

如何使用 react-big-calendar 选项 onRangeChange

【问题讨论】：

标签： reactjs react-big-calendar

【解决方案1】：

根据documentation，它取决于视图（排序）。

const onRangChange = (Range: [Date]) => do something

// or, the more likely

const onRangChange = ({start: Date, end: Date}) => do something

应该对所有内置视图使用第二种类型，所以不确定第一种类型何时合格...

如果您试图限制它每月移动，更好的选择是使用受控的date 属性并进行一些检查以确定您是否设置了它。

【讨论】：