StephenChou1017 / react-big-scheduler

A scheduler and resource planning component built for React and made for modern browsers (IE10+)
https://stephenchou1017.github.io/scheduler/#/
MIT License
754 stars 414 forks source link

Slow data loading on the component #207

Open NBenzekri opened 4 years ago

NBenzekri commented 4 years ago

Hi,

The component is so slow to load data on the component, the data are geted in just 50 ms but the user has to wait more than 10 sec to see the data loaded on the component.

A first debugging I made shows that the Idle library take the big part of loading time.

Please let me know if this issue can be improved.

Thanks

nikolara commented 4 years ago

Hi,

Do do you maybe know how to show data from api on the scheduler?

NBenzekri commented 4 years ago

Hi,

You can try map your response data as in I did in the SchedulerDataEvents,

events = [];
xios.get("getdata/", {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            // console.log(response.data)
            if (response.data.length !== 0)
                this.events = response.data.map(row => {
                    return {
                        id: row.id,
                        start: row.ta,
                        end: row.td,
                        resourceId: row.poste,
                        title: <span> # {row.id} {' : '} {row.name} {' - '}{row.vName+ ' (' + row.vType} {')  '}{dateFormat(row.ta, 'HH:mm')} {' -'}{dateFormat(row.td, 'HH:mm')}
                            <br />
                            {'From '}<b>{row.departure}</b> {' To '}<b>{row.destination} </b><br />
                            {'POSTE: '}<b>{row.poste}</b></span>,
                        resizable: false,
                        movable: false,
                        bgColor: this.setColorByStatus(row.status)
                    }

                }) 

...

render(){

                        this.schedulerData.setEvents(this.events);
...
                         <Scheduler schedulerData={this.schedulerData}
                                        prevClick={this.prevClick}
                                        nextClick={this.nextClick}
                                        onSelectDate={this.onSelectDate}
                                        onViewChange={this.onViewChange}
                                        nonAgendaCellHeaderTemplateResolver={this.nonAgendaCellHeaderTemplateResolver}
                                    />

}
nikolara commented 4 years ago

Hi @NBenzekri,

Thank you for your response.

nikolara commented 3 years ago

Hi, Your last response was very helpful. Do you know maybe if it's possible to add resources to the database with AddResourceFrom, to make post request?