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?

Even though `selectInfo.start` isn't a momentJS object any more, this should still technically work - demo: https://codepen.io/ADyson82/pen/jOPQNQv — ADyson, Mar 25 '20 at 14:59
Maybe someone with specific reactJS knowledge can tell you why there might be a problem in your version. Or perhaps if you can make a runnable demo (e.g. using Stackblitz or a similar site which is react-friendly),I might be able to figure it out. — ADyson, Mar 25 '20 at 15:00
@ADyson thanks bro, there are so many changes with a full calendar 4, now I found solution is to use css none of the solutions does not work properly with v4 , `.fc-other-month { cursor: none; pointer-events: none; opacity: .3; }` ` — The Dead Man, Mar 25 '20 at 15:07
How would CSS help with being able to select / not select an area on the calendar? That doesn't make a lot of sense to me. CSS's only job is to change the appearance of the web page. It cannot really affect the functionality - that is the job of JavaScript. — ADyson, Mar 25 '20 at 15:12
P.S. Have you read https://fullcalendar.io/docs/upgrading-from-v3 ? It lists all the changes in v4 from v3. — ADyson, Mar 25 '20 at 15:13
no, your wrong check pointer-events https://www.w3schools.com/cssref/css3_pr_pointer-events.asp — The Dead Man, Mar 25 '20 at 15:23
Sure it can stop you clicking on the area, but that doesn't really stop _fullCalendar_ from accepting "select "events. There could be other ways to trigger selections, and you'd still want it validating. — ADyson, Mar 25 '20 at 15:28
Anyway the solution is flawed in a number of ways: 1) it affects future dates, not just past ones, and 2) it only works in the "month" view, but not in the week or day views. — ADyson, Mar 25 '20 at 15:28
And 3) it doesn't seem to work at all anyway: https://codepen.io/ADyson82/pen/gOpQOxK . For one thing, the area classed as fc-other-month is only a small part of the cell. Are you sure it wasn't just a coincidence? — ADyson, Mar 25 '20 at 15:29
That was my last solution, I could not figure out why its not working — The Dead Man, Mar 25 '20 at 15:34
The selectAllow code in your question _should_ work. Like I said, you'll need to make a running demo which demonstrates the issue, before we can diagnose it. — ADyson, Mar 25 '20 at 15:38
I would love to produce a demo but u need a lot of plugin installation with react :( — The Dead Man, Mar 25 '20 at 15:40
Have you tried Stackblitz as I suggested? It provides a fairly decent environment I believe. There's a start project: https://stackblitz.com/edit/react which you can fork or copy, and some other samples as well (just google "stackblitz react"). People use it a lot, so I assume it can't be that hard to set up the plugins etc. — ADyson, Mar 25 '20 at 15:43

rashid hacker · Answer 1 · 2020-10-31T13:41:45.620

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

score 0 · Answer 2 · answered Aug 04 '22 at 09:19

0

const selectionHandler = (selectInfo) => {
            var currentTime = moment()
            return currentTime.isBefore(selectInfo.start)
        } 

 <FullCalendar ...props selectAllow={selectionHandler}/>

answered Aug 04 '22 at 09:19

hadeel alhawajreh

1

An answer to a question needs to be more than just code, it should at a minimum explain what the original problem was and how to solve it. – Matthias Aug 09 '22 at 20:38
Welcome to StackOverflow. Don't let this discourage you from attempting to answer future questions; just put in a little more effort. – Matthias Aug 09 '22 at 20:39

Full calendar selectAllow not working in ReactJS

2 Answers2