时间戳

首页 > 解决方案 > 如何使用 react-big-calendar onRangeChange 选项

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

问题描述

在此处输入图像描述

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

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}
                />
              )
            ,
          }
        }
      />
    </>
  );
};

但是这段代码有一个错误。

在此处输入图像描述

如何使用反应大日历选项 onRangeChange

标签： reactjsreact-big-calendar

解决方案

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

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

// or, the more likely

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

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

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

推荐阅读