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

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 }
navigating = {this.onSwitchDate}
eventSettings={{ dataSource: eventsArray }} >
<ResourceDirective field='resourceIds' title='Assignee' name='Owners' allowMultiple={true} dataSource={users} textField='name' idField='id' colorField='color'>
<ViewDirective option='Week' eventTemplate={this.eventTemplate } />
<Inject services={[ Week ]} />

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

I debug a little:

ComponentBase.prototype.componentWillReceiveProps = function (nextProps) {
    if (!this.isAppendCalled) {
      this.isAppendCalled = true;

    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

  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) {

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

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

6 Replies

AA aaa March 1, 2019 12:24 PM

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

click button change source

HB Hareesh Balasubramanian Syncfusion Team March 5, 2019 11:35 AM

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}
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}

Please refer the below sample for your reference.
Hareesh B

AA aaa March 20, 2019 12:05 PM

After that I have  crash  in some situations

TypeError: Cannot read property 'startDate' of undefined
140 | Render.prototype.refreshDataManager = function () {
1054 | } else if (state.isLayout) {
1039 | }

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

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. 

AA aaa March 21, 2019 05:11 AM

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

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

so My 

KK Karthigeyan Krishnamurthi Syncfusion Team March 24, 2019 10:37 PM

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. 

Live Chat Icon For mobile
Up arrow icon