2

I've a problem by serving the resource via a json feed in fullcalendar scheduler with react. The feed works in the normal fullcalendar scheduler without react.

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import calendarInteraction from '@fullcalendar/interaction';

class Calendar extends React.Component {
    state = {};


    render() {
        return (
            <div>
                <FullCalendar
                    schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
                    plugins={[calendarInteraction, resourceTimelinePlugin]}
                    initialView={'resourceTimelineMonth'}
                    selectable={true}
                    editable={true}
                    resourceAreaWidth={'10%'}
                    resources={"localhost/resources"}
      />
            </div>
        );
    }
}
export default Calendar;

I get the following error in the console: Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the CalendarDataProvider component.

It looks like a react problem, but I'm not getting it. Where does the fullcalendar react "plugin" save the state of the resources?

bit_busker
  • 31
  • 3
  • Why do you think it's a problem with the resource feed specifically? Does the problem go away if you remove the `resources={"localhost/resources"}` line? – ADyson Sep 11 '20 at 08:11
  • Yes, the error goes away if I delete the resources line. If I insert an array with the resources it also works perfectly. But the feed produces this error. – bit_busker Sep 11 '20 at 08:43
  • Ok. I'm not a react expert (I just know fullCalendar and general JS stuff fairly well), so I don't know if this relates directly to your error, but I'm worried whether `localhost/resources` will be seen as a URL correctly or not. Can you just try with an absolute URL e.g. `http://localhost/resources` (or `https://` if that's what you're using) to rule that out as an issue? Also please check your browser's Network tool to see if the AJAX request is going out correctly and getting a valid response. – ADyson Sep 11 '20 at 08:57
  • Also again I'm not a React expert specifically but I was wondering what the purpose of the `state = {};` line is? It doesn't feature in any of the examples at https://fullcalendar.io/docs/react and it doesn't, by itself, appear to do anything useful, just declares an empty object. Does it affect anything (good or bad) if you remove that line? Just trying to suggest things which don't quite look right, again to rule them in/out as a potential problem. – ADyson Sep 11 '20 at 09:01
  • The route localhost/resources is just an example. It also works if I use the plain fullcalendar v5 without react. The ```state={}``` defines the starting state in react. It doesn't make any difference if I delete this line. – bit_busker Sep 11 '20 at 15:08

1 Answers1

1

Sorry, I've found the answer:

It seems you have to explicitly give an absolute URL in the react fullcalendar but the fullcalendar version without react works also with non explicit URLs.

So resources={"http://localhost/resources"} works. And resources={"localhost/resources"} doesn't work!

Thanks to @ADyson who gave the answer.

bit_busker
  • 31
  • 3