有没有办法使用自定义范围？

Question

我正在尝试实现自定义日期范围，有没有办法使用 ref api 来做到这一点？我使用自定义工具栏组件，其中有下一个、今天、上一个按钮与日历引用一起使用，但我也想要有 2 个日期输入，一个是开始日期，第二个是结束日期，但不幸的是我不知道如何使用 ref更改日历查看日期

const CustomCalendarHeader: React.FC<Props> = ({
  calendarRef,
  currentDate,
  setCurrentDate,
}) => {
  const ref = calendarRef.current!.getApi();

  const nextHandle = () => {
    ref.next();
  };
  const prevHandle = () => {
    ref.prev();
  };
  const todayHandle = () => {
    ref.today();
  };
  const dayHandle = () => {
    ref.changeView('resourceTimelineDay');
  };
  const weekHandle = () => {
    ref.changeView('resourceTimelineWeek');
  };

  return (
    <Box
      sx={{
        display: 'flex',

        alignItems: 'center',
        justifyContent: 'space-between',
        px: 2,
        mb: 5,
      }}
    >
      <Box
        sx={{ display: 'flex', alignItems: 'center', gap: 2, flexGrow: 0.3 }}
      >
        <Button variant="contained" onClick={dayHandle}>
          Day
        </Button>
        <Button variant="contained" onClick={weekHandle}>
          Week
        </Button>

        <Typography>Custom: </Typography>
        <TextField type="date" size="small" sx={{ maxWidth: '125px' }} />
        -
        <TextField type="date" size="small" sx={{ maxWidth: '125px' }} />
       
      </Box>
      <ButtonGroup
        color="primary"
        variant="contained"
        sx={{ display: 'flex', alignItems: 'center' }}
      >
        <Button onClick={prevHandle}>Prev</Button>
        <Button onClick={todayHandle}>Today</Button>
        <Button onClick={nextHandle}>Next</Button>
      </ButtonGroup>
    </Box>
  );
};

我的日历组件如下所示：

<FullCalendar
                eventDrop={handleResizeOrRedropEvent}
                eventResize={handleResizeOrRedropEvent}
                droppable={true}
                eventReceive={handleEventReceive}
                viewDidMount={handleViewChange}
                ref={refCalendar as LegacyRef<FullCalendar> | undefined}
                nowIndicator
                dayMaxEvents
                timeZone="UTC"
                height="80vh"
                datesSet={(arg) => setCurrentDate(arg)}
                // visibleRange={{
                //   start: currentDate?.startStr,
                //   end: currentDate?.endStr,
                // }}
                displayEventTime={false}
                eventClick={handleEventClick}
                eventsSet={handleEvents}
                weekends={true}
                editable={true}
                selectable={true}
                // selectMirror={true}
                plugins={[resourceTimelinePlugin, interactionPlugin]}
                events={[dragEventRow, ...timeFrames]}
                resources={[dragEventRow, ...timeFrames].map((timeframe) => ({
                  id: `${timeframe.type}-${timeframe.title}`,
                  title: timeframe.title,
                  type: timeframe.type,
                  ...('children' in timeframe && {
                    children: timeframe.children,
                  }),
                }))}
                resourceGroupField="type"
                resourceAreaWidth={'20%'}
                initialView="resourceTimeline"
                eventContent={renderEventContent}
                headerToolbar={{
                  left: '',
                  center: 'title',
                  right: '',
                }}
              />
            )}

在文档中搜索，但只有 vound

visibleRange

实际上并不适合我与

datesSet

一起工作，它会导致无限的

setState

调用

Answer 1

嗯，答案是使用

setOption

正如 @ADyson 提到的，它在我的自定义标题中看起来像这样：

接受输入更改的功能：

const handleDateRangeChange = () => {
    const startDate = (
      document.getElementById('start_date') as HTMLInputElement
    ).value;
    const endDate = (document.getElementById('end_date') as HTMLInputElement)
      .value;

    if (startDate && endDate) {
      ref.setOption('visibleRange', {
        start: startDate,
        end: endDate,
      });
    }
  };

我的自定义范围输入的 JSX：

          <Typography>Custom: </Typography>
          <TextField
            id="start_date"
            type="date"
            size="small"
            sx={{ maxWidth: '125px' }}
            onChange={handleDateRangeChange}
          />
          -
          <TextField
            id="end_date"
            type="date"
            size="small"
            sx={{ maxWidth: '125px' }}
            onChange={handleDateRangeChange}
          />