Полный выбор календаря не работает в reactjs - PullRequest
Новая
       20

Полный выбор календаря не работает в reactjs

1 голос
/ 25 марта 2020

У меня есть простой раздел, в котором я показываю календарь для своих пользователей, используя полный API-интерфейс календаря. Я хочу отключить только даты за предыдущий месяц в reactjs.

выберите разрешить документы

Здесь работает демоверсия с использованием jquery, я хочу то же самое, но в reactjs JSFIDDLE демо

Ожидаемый результат

enter image description here

Вот то, что я пробовал до сих пор, используя полную документацию календаря

Вот мой компонент 

import React, { useState, useEffect, useContext, useRef } from 'react';
import { Calendar as FullCalendar } from '@fullcalendar/core';
import googleCalendarPlugin from '@fullcalendar/google-calendar';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import momentPlugin from '@fullcalendar/moment';
import moment from 'moment'


const Calendar = (movieProps) => {
    const [calendar, setCalendar] = useState('');
    const calendarRef = useRef('');
    useEffect(() => {
        if (calendarRef.current && !calendar) {
            setCalendar(new FullCalendar(calendarRef.current, {
                plugins: [dayGridPlugin, momentPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin],
                columnHeader: false,
                fixedWeekCount: false,
                backgroundColor: 'transparent',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,listYear',

                  },
                  selectable: true,
                  //disable past date of previous month
                  selectAllow: function(selectInfo) {
                    var ms = moment().startOf("month");
                    return ms.isSameOrBefore(selectInfo.start);
                  },

                  events: [{
                    title: 'Womens History Month ',
                    start: '2020-03-01',
                    description: ' support for womens rights and progress throughout the month of March.Get this video',
                    url: 'dev91b558163211cf9d2e7d1efe6c3e32035973fdf9',
                    classNames: ['event1']

                }


            ],


            }));        
        }
    }, [calendarRef.current]);

    return (
        <>

    <CalendarContainer ref={calendarRef}>
        {calendar && calendar.render ? calendar.render(): null}
    </CalendarContainer>

        </>
    )
}

export default Calendar;

ПРИМЕЧАНИЕ: я использую полный календарь v4, момент js загружен, я вижу его в консоли

К сожалению, мое решение не работает вообще.

Что мне нужно делать, чтобы добиться того, что я хочу?

...