blink on events replace with grouping

[aaa]

My calendar:

<ScheduleComponent height='650px' className={classes.calendar} ref={schedule => this.scheduleObj = schedule}
                   showHeaderBar = {true}
                   group={{ byDate: true, allowGroupEdit: true, resources: ['Owners'] }}
                   resourceHeaderTemplate= { this.resourceHeaderTemplate }
                   dateHeaderTemplate= { this.dateHeaderTemplate }
                   eventRendered={this.eventRendered}
                   actionComplete={this.actionComplete}
                   actionBegin={this.onActionBegin}
                   navigating  = {this.onSwitchDate}
                   eventSettings={{ dataSource: eventsArray }}  >
    <ResourcesDirective>
        <ResourceDirective field='resourceIds' title='Assignee' name='Owners' allowMultiple={true} dataSource={users} textField='name' idField='id' colorField='color'>
        </ResourceDirective>
    </ResourcesDirective>
    <ViewsDirective>
        <ViewDirective option='Week' eventTemplate={this.eventTemplate } />
    </ViewsDirective>
    <Inject services={[ Week ]} />
</ScheduleComponent>

I noticed that when eventsArray updated, entire Calendar blink( re-ender )

I debug a little:

@syncfusion/ej2-react-base/src/component-base.js:

ComponentBase.prototype.componentWillReceiveProps = function (nextProps) {

    if (!this.isAppendCalled) {

      clearTimeout(this.cachedTimeOut);

      this.isAppendCalled = true;

      this.appendTo(ReactDOM.findDOMNode(this));

    }

    var dProps = extend({}, nextProps);

    var keys = Object.keys(nextProps);

    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {

      var propkey = keys_1[_i];

      if (this.props[propkey] === nextProps[propkey]) {

        delete dProps[propkey];

      }

Here changed props comparing by shallow links,  so group settings object always in changed props.

after thet in

@syncfusion/ej2-schedule/src/schedule/base/schedule.js

  Schedule.prototype.onGroupSettingsPropertyChanged = function (newProp, oldProp, state) {

    for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {

      var prop = _a[_i];

      if (prop === 'headerTooltipTemplate') {

        this.headerTooltipTemplateFn = this.templateParser(newProp[prop]);

      } else {

        state.isLayout = true;

        if (this.eventWindow) {

          this.eventWindow.refresh();

        }

      }

    }

  };

      state.isLayout = true;  marked as changed and re-render layout.

https://stackblitz.com/edit/react-9ab3ep?file=index.js

what is a best practice  to fix it in my case?

[aaa]

Some update.

I upgraded to latest version, and have another problem,
If I have templates for date and resources,
on events replace it  becomes empty

https://stackblitz.com/edit/react-9ab3ep?file=Calendar.js

click button change source

[Hareesh Balasubramanian]

Dear Customer,

When using setstate change, we must declare the inner level properties as variable as shown in the following code example.

public schDate: Date = new Date(2018, 3, 1);

public dateHeader: any = this.dateHeaderTemplate.bind(this);

public resourceHeader: any = this.resourceHeaderTemplate.bind(this);

public grp: any = { byDate: true, resources: ['Airlines'] };

<ScheduleComponent cssClass='schedule-group' width='100%' height='650px' selectedDate={this.schDate}

eventSettings={{

dataSource: prop.eventsArray, fields: {

subject: { title: 'Travel Summary', name: 'Subject' },

location: { title: 'Source', name: 'Location' },

description: { title: 'Comments', name: 'Description' },

startTime: { title: 'Departure Time', name: 'StartTime' },

endTime: { title: 'Arrival Time', name: 'EndTime' }

}

}}

group={this.grp} dateHeaderTemplate={this.dateHeader}

resourceHeaderTemplate={this.resourceHeader}>

 

Please refer the below sample for your reference.

http://www.syncfusion.com/downloads/support/forum/143048/ze/sample522891090

Regards,

Hareesh B

[aaa]

After that I have  crash  in some situations

TypeError: Cannot read property 'startDate' of undefined

Render.refreshDataManager

node_modules/@syncfusion/ej2-schedule/src/schedule/renderer/renderer.js:143

140 | Render.prototype.refreshDataManager = function () {View compiled

ScheduleComponent.Schedule.propertyChangeAction

node_modules/@syncfusion/ej2-schedule/src/schedule/base/schedule.js:1057

1054 | } else if (state.isLayout) {View compiled

ScheduleComponent.Schedule.onPropertyChanged

node_modules/@syncfusion/ej2-schedule/src/schedule/base/schedule.js:1042

1039 | }

[Karthigeyan Krishnamurthi]

Dear Customer, 

 

Thanks for your update. 

 

We have checked our previous sample and Schedule renders without script error after the button click. We suspect that custom code used in your sample could be the cause for the issue, kindly share your code example / sample (if possible) to proceed further. 

https://stackblitz.com/edit/react-9ab3ep-nvwa5a?file=Calendar.js 

 

Regards, 

Karthi 

[aaa]

yes seems something other matters, still not   recreate small reproduce

in general it somehow related to Router and withRouter hoc

I use Router in quick header Template  since  want to put Link there. otherwise it fails  that Link cannot be used  outside of Router( seems popups created in some separated context?? )

class Calendar extends React.Component {

headerTemplate = (event) => {
    if ( !event || !event.Id) {
        return null
    }
    const {classes} = this.props
    return (<Router history={this.props.history} location={this.props.location}>
     
            <div className={classes.eventPopupHeader}>
                ...... <Link className={classes.jobLink} to={`/jobs/${event.job && event.job.id}/edit`}>{event.title}</Link>
            </div>
    </Router>);
}

grouping={byDate: true, allowGroupEdit: true, resources: ['Owners']}
render() {
return <ScheduleComponent height={fullHeight? '100%': "650px" } className={classes.calendar} ref={this.setScheduleObj}
                   showHeaderBar={true}
                   firstDayOfWeek={1} timezone={tz}
                   resourceHeaderTemplate={this.resourceHeaderTemplate}
                   dateHeaderTemplate={this.dateHeaderTemplate}
                   eventRendered={this.eventRendered}
                   allowDragAndDrop={true} allowResizing={true}
                   quickInfoTemplates={{
                       header: this.headerTemplate,
                       content: this.contentTemplate,
                       footer: this.footerTemplate,
                   }} popupOpen={this.onPopupOpen}

                   actionComplete={this.actionComplete}
                   actionBegin={this.onActionBegin}
                   navigating={this.onSwitchDate}
                   eventSettings={{dataSource: d}} group={this.groupSettings}>
    <ResourcesDirective>
        <ResourceDirective field='resourceIds' title='Assignee' name='Owners' allowMultiple={true}
                           dataSource={users} textField='name' idField='id' colorField='color'>
        </ResourceDirective>
    </ResourcesDirective>
    <ViewsDirective>
        <ViewDirective option='Week' eventTemplate={this.eventTemplate}/>
    </ViewsDirective>
    <Inject services={[Week, Resize, DragAndDrop]}/>
</ScheduleComponent>}
}
export default withStyles(styles)(withRouter(Calendar));
}

so My 

[Karthigeyan Krishnamurthi]

Dear Customer,

 

Thanks for your update. 

 

We would like to inform that provided code example is not sufficient for us to analysis the reported scenario. Kindly try to reproduce the issue in our previous sample and revert else share your complete Schedule code example / sample (if possible) to serve you better. If you are not comfortable in sharing your code example in public forum, kindly share the details in incident which will not be visible to public. 

 

Regards, 

Karthi