Как заблокировать все прошлые даты в оболочке ReactJS FullCalendar?

#javascript #reactjs #fullcalendar #fullcalendar-5

Вопрос:

Я пытаюсь понять, как заблокировать все прошлые дни в моем календаре, чтобы пользователи не могли назначить встречу, и я не могу заставить ее работать.

Например, сегодня 8 ноября, я хочу заблокировать выбор всех предыдущих дней.

Я посмотрел в Интернете, и там много статей о том, как это сделать с другими языками, но я использую оболочку ReactJS FullCalendar, у которой нет возможности перейти в реквизит, чтобы справиться с этим. Я посмотрел там документацию и попытался поиграть с 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) =gt; {   const someMethod = () =gt; {  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(() =gt; {  someMethod();  }, []);   return (  lt;div className="fluid-container"gt;  lt;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  //}  /gt;  lt;/divgt;  ); };  export default ScheduleAppointment;

1. Каким образом действительный диапазон не работает? Вы получаете сообщение об ошибке?

2. Я не получаю ошибки, но когда я смотрю в FullCalendar для ReactJS, даты, которые я указал в начале, не выделяются серым цветом. Мне нужно отметить, что я использую оболочку ReactJS fullcalendar, в которой я не узнал, как изменить допустимый диапазон в любом месте Google, кроме как через api через ссылки.

Ответ №1:

Я бы ожидал, что

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

должно сработать.

Внешний набор { } s обозначает начало и конец значения свойства — точно так же plugins , как, например, в свойстве. Тогда внутренние являются частью объекта JS, содержащего данные диапазона.