Primereact Schedule component refetchEvents

UI Components for React
Post Reply
hypothetical.andrei
Posts: 2
Joined: 13 Aug 2018, 10:33

20 Aug 2018, 10:07

Hello,

I am trying to use the Schedule component in my application.

I've run into the problem that the Schedule does not update when the state of the comprising component updates. If using the underlying fullcalendar i would be able to just tell it to rerender the events.

My question is how do i achieve the same result with the schedule? Can i configure the component to rerender the events on state/property changes?

Alternatively, if that is not possible, can i obtain the underlying jquery object from the ref and rerender the events manually?

Thanks

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

23 Aug 2018, 22:43

What is your PrimeReact version? It works for me using beta.1;

Code: Select all

export class ScheduleDemo extends Component {

	constructor() {
        super();
        this.state = {
            events: []
        };
        this.eventService = new EventService();
    }
    
    componentDidMount() {
        setTimeout(() => {
            this.eventService.getEvents().then(data => this.setState({events: data}));
        }, 2000);
    }

    add() {
        this.setState({
            events: [...this.state.events, {
                "id": 500,
                "title": "New Event",
                "start": "2017-02-15",
                "end": "2017-02-15"
            }]
        });
    }

	render() {
        const header = {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		};

		return (
			<div>
                                      <button onClick={e => this.add()}>Remove</button>
					<Schedule events={this.state.events} header={header} defaultDate="2017-02-01" eventLimit={4} />
				</div>
		);
	}
}

hypothetical.andrei
Posts: 2
Joined: 13 Aug 2018, 10:33

24 Aug 2018, 09:02

Hello,

I am using the 2.0 alpha.

The solution which worked for me was doing:

Code: Select all

  
  this.setCalendarRef = (elem) => {
     this.calendarRef = elem
   }
   ...
  render() {
   	...
   	if (this.calendarRef){
        	$(this.calendarRef.schedule).fullCalendar('removeEvents')
        	$(this.calendarRef.schedule).fullCalendar('addEventSource', events)
      	}
   	...
   }
 
Thank you for your response.

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

28 Aug 2018, 21:12

beta.3 does not use jQuery as FullCalendar version should be 4.0.0-alpha, if you update your PrimeReact and FullCalendar (removes need for jQuery) my comment also should work.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests