Full calendar selectAllow not working in ReactJS

Question

I have a simple section in which I am showing a calendar for my users using the FullCalendar API. I want to disable only the dates from the previous month in ReactJS.

selectAllow docs

Here is working demo using jQuery. I want the same but in ReactJS - JSFiddle

The expected result

Here is what I have tried so far using the FullCalendar documentation

Here is my component

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;

NOTE: am using FullCalendar v4, MomentJS is loaded; I can see it in the console.

Unfortunately, my solution is not working at all.

What do I need to do to achieve what I want?

Answer 1

I think you didn't install @fullcalendar/interaction

the selectable prop can't work without it

first you need to install it use it npm i @fullcalendar/interaction

then import it import interactionPlugin from '@fullcalendar/interaction';

after that, you should add this element to the plugins Prop, like this

<FullCalendar
   plugins={[ interactionPlugin, dayGridPlugin ]}
   initialView="dayGridMonth"
   selectable={true}
   dateClick={alert('hasgadf')}
/>

and the last thing you need to add selectable={true} like the example above

you should see this doc https://fullcalendar.io/docs/selectable