如何在 ReactJS FullCalendar 包装器中屏蔽所有过去的日期？

Question

我想知道如何在我的日历中屏蔽所有过去的日子，以防止用户安排约会，但我无法让它工作。

例如，今天是 11 月 8 日，我想屏蔽掉之前的所有日期。

我在网上看了很多关于如何使用其他语言执行此操作的 SO 文章，但我使用的是 ReactJS FullCalendar 包装器，它没有传递到 props 的选项来处理这个问题。我查看了那里的文档并尝试在那里玩 API 但我无法弄清楚。

这是我的代码：

import React, { useState, useEffect } from "react";

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";

// Time Slots

const ScheduleAppointment = (props) => {

  const someMethod = () => {
    let calendarApi = calendarRef.current.getApi();
    let changeMinDate =
      (calendarApi.currentDataManager.data.dateProfile.validRange = {
        start: "2021-11-08",
        end: null
      });
    console.log("calendarapi11 is..", changeMinDate);
    console.log("calendarapi222 is..", calendarApi);
  };
  
 useEffect(() => {
    someMethod();
  }, []);

  return (
    <div className="fluid-container">
      <FullCalendar
              plugins={[dayGridPlugin, interactionPlugin]}
              initialView="dayGridMonth"
              dateClick={handleDateClick}
              selectable={true}
              ref={calendarRef}
              // this doesn't work I have to manually get into the api via refs
              //validRange = {
                //start: '2021-11-08',
                //end: null
              //}
            />
    </div>
  );
};

export default ScheduleAppointment;

Answer 1

我希望

validRange = {{
               start: '2021-11-08',
               end: null
             }}

应该可以。

外层的 { }s 表示属性值的开始和结束 - 就像它在 plugins 属性上所做的一样。那么里面的就是包含范围数据的JS对象的一部分。

如何在 ReactJS FullCalendar 包装器中屏蔽所有过去的日期？

How to block out all past dates in ReactJS FullCalendar wrapper?

javascript

fullcalendar

reactjs

fullcalendar-5