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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

blink on events replace with grouping

Thread ID:

Created:

Updated:

Platform:

Replies:

143048 Mar 1,2019 05:13 PM UTC Mar 25,2019 03:37 AM UTC React - EJ 2 6
loading
Tags: Schedule
aaa
Asked On March 1, 2019 05:13 PM UTC

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
Replied On 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

Hareesh Balasubramanian [Syncfusion]
Replied On 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


aaa
Replied On 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 | }








Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 



aaa
Replied On 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 

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 
 
 
 
 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon