We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. React - EJ 2
  4. blink on events replace with grouping

blink on events replace with grouping

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?


6 Replies
AA aaa March 1, 2019 05:24 PM UTC

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

HB Hareesh Balasubramanian Syncfusion Team March 5, 2019 04:35 PM UTC

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.
Regards,
Hareesh B


AA aaa March 20, 2019 05:05 PM UTC

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 () {
ScheduleComponent.Schedule.propertyChangeAction
node_modules/@syncfusion/ej2-schedule/src/schedule/base/schedule.js:1057
1054 | } else if (state.isLayout) {
ScheduleComponent.Schedule.onPropertyChanged
node_modules/@syncfusion/ej2-schedule/src/schedule/base/schedule.js:1042
1039 | }








KK Karthigeyan Krishnamurthi Syncfusion Team March 21, 2019 08:54 AM UTC

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. 
 
Regards, 
Karthi 



AA aaa March 21, 2019 10:11 AM UTC

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 

KK Karthigeyan Krishnamurthi Syncfusion Team March 25, 2019 03:37 AM UTC

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 
 
 
 
 
 


Loader.
Up arrow icon