Page 1 of 1

Primereact Schedule component refetchEvents

Posted: 20 Aug 2018, 10:07
by hypothetical.andrei
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

Re: Primereact Schedule component refetchEvents

Posted: 23 Aug 2018, 22:43
by cagatay.civici
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>
		);
	}
}

Re: Primereact Schedule component refetchEvents

Posted: 24 Aug 2018, 09:02
by hypothetical.andrei
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.

Re: Primereact Schedule component refetchEvents

Posted: 28 Aug 2018, 21:12
by cagatay.civici
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.