Problem with Schedule Component

UI Components for React
Post Reply
kaho29
Posts: 18
Joined: 18 Aug 2017, 10:57

11 Oct 2017, 11:51

When trying to add a Schedule to one of my pages I get the following error:

TypeError: this.schedule.fullCalendar is not a function

Code: Select all

Schedule.componentDidMount
  257 |     }
  258 | 
  259 |     this.schedule = (0, _jquery2.default)(this.scheduleEl);
> 260 |     this.schedule.fullCalendar(this.config);
  261 |     this.events = [].concat(_toConsumableArray(this.props.events));
  262 |     this.schedule.fullCalendar('addEventSource', this.events);
  263 | }
  
I added jquery and fullcalendar dependencies to the package.json. Do I have to import anything else into my react page or did I miss something else?

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

11 Oct 2017, 19:37

Could you please share your related code so we can check?

kaho29
Posts: 18
Joined: 18 Aug 2017, 10:57

12 Oct 2017, 09:11

As the code belongs to a project of the company I am working for, I can not post the full code, but I will provide an example of what I did:

first in the package.json I added...

Code: Select all

"fullcalendar": "^3.6.0",
"jquery": "^3.2.1"
then inside my component i plainly did the following...

Code: Select all

/* react and external libraries */
import React from 'react';

/* primereact components */
import {Schedule} from 'primereact/components/schedule/Schedule';

/* own containers and components */
import AbstractComponent from '../../components/AbstractComponent';

class ScheduleComponent extends AbstractComponent {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {

        let events = [
            {
                    "id": 1,
                    "title": "All Day Event",
                    "start": "2017-02-01"
            },
            {
                    "id": 2,
                    "title": "Long Event",
                    "start": "2017-02-07",
                    "end": "2017-02-10"
            }
        ];

        return (
            <div id="scheduleComponentContent">
                <Schedule events={events}></Schedule>
            </div>
        );

    }

}

export default injectIntl(ScheduleComponent);
jQuery should be ok as I got a jQuery-error first cause I forgot to add the dependency in package.json. After adding that I get the type error. Also tried importing from fullcalendar, but either did that wrong or it didn't have any effect.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

18 Oct 2017, 21:54

Please also add moment;

Code: Select all

    "moment": "^2.17.1",

kaho29
Posts: 18
Joined: 18 Aug 2017, 10:57

19 Oct 2017, 13:48

Hi. I forgot to mention, that moment is included in the project. But it is at version 2.18.1 at the moment. Can this cause the problem?

kaho29
Posts: 18
Joined: 18 Aug 2017, 10:57

02 Nov 2017, 16:59

Ok, after a couple of weeks I came back to this problem and noticed, there was a new version of fullcalendar (2.6.2) released. With this version my setup now works. Maybe there really was a conflict with the newest moment version or something.

Nonetheless: It works now. Thanks for the hints and looking into the problem :)

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

03 Nov 2017, 22:39

Thank you for sharing.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests