TimeScale returning error

[Pavan Kumar]

Hello,

I want the popup open form, from and to dates fields to display a difference of 30 minutes. I have include the below code to my scheduleComponent however it returns the below error.

Code

<ScheduleComponent width='100%' height='755px' cssClass='schedule-date-header-template' showHeaderBar={true} showQuickInfo={false} currentView='Month' ref={t => this.scheduleObj = t} eventSettings={{

dataSource: filtered_data_update,

fields: { id: 'requestId', subject: { name: 'tenantName' }, location: { name: 'zoneName' }, startTime: { name: 'startDateTime', validation: { required: true } }, endTime: { name: 'stopDateTime', validation: { required: true } }, RecurrenceRule: { name: 'RecurrenceRule' }, zoneId: { name: 'zoneId' } },

enableTooltip: true,

tooltipTemplate: this.template.bind(this),

}}

editorTemplate={this.editorTemplate}

popupOpen={this.onPopupOpen.bind(this)}

cellDoubleClick={this.cellDoubleClick.bind(this)}

renderCell={this.onRenderCell.bind(this)}

allowDragAndDrop={true}

eventRendered={this.onEventRendered.bind(this)} actionBegin={this.onActionBegin.bind(this)} actionComplete={this.onActionComplete.bind(this)}

refreshEvents={this.refreshEvents.bind(this)}

created={this.onCreate(filtered_data_update)}

timeScale={ { enable: true, interval: 60, slotCount: 2 }}

>

<Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />

</ScheduleComponent>

error:

×

←→1 of 2 errors on the page

TypeError: Cannot read property '0' of undefined

(anonymous function)

node_modules/@syncfusion/ej2-schedule/src/schedule/popups/event-window.js:272

269 | var startEndElement = [].slice.call(this.element.querySelectorAll('.' + cls.EVENT_WINDOW_START_CLASS + ',.' +
270 | cls.EVENT_WINDOW_END_CLASS));
271 | startEndElement.forEach(function (element) {
> 272 | var instance = element.ej2_instances[0];
273 | instance.step = duration || _this.getSlotDuration();
274 | instance.dataBind();
275 | });View compiled

EventWindow../node_modules/@syncfusion/ej2-schedule/src/schedule/popups/event-window.js.EventWindow.refreshDateTimePicker

node_modules/@syncfusion/ej2-schedule/src/schedule/popups/event-window.js:271

268 | var _this = this;
269 | var startEndElement = [].slice.call(this.element.querySelectorAll('.' + cls.EVENT_WINDOW_START_CLASS + ',.' +
270 | cls.EVENT_WINDOW_END_CLASS));
> 271 | startEndElement.forEach(function (element) {
272 | var instance = element.ej2_instances[0];
273 | instance.step = duration || _this.getSlotDuration();
274 | instance.dataBind();View compiled

ScheduleComponent../node_modules/@syncfusion/ej2-schedule/src/schedule/base/schedule.js.Schedule.extendedPropertyChange

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

806 | case 'timeScale':
807 | this.activeViewOptions.timeScale.interval = newProp.timeScale.interval || this.activeViewOptions.timeScale.interval;
808 | this.activeViewOptions.timeScale.slotCount = newProp.timeScale.slotCount || this.activeViewOptions.timeScale.slotCount;
> 809 | this.eventWindow.refreshDateTimePicker();
810 | this.initializeView(this.currentView);
811 | break;
812 | case 'allowDragAndDrop':View compiled

ScheduleComponent../node_modules/@syncfusion/ej2-schedule/src/schedule/base/schedule.js.Schedule.onPropertyChanged

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

742 | requireScheduleRefresh = true;
743 | break;
744 | default:
> 745 | this.extendedPropertyChange(prop, newProp, oldProp);
746 | break;
747 | }
748 | }View compiledThanks! Pavan

[Karthigeyan Krishnamurthi]

Hi Pavan, 

 

Thank you for contacting Syncfusion support. 

 

We have checked the reproted scenario and Schedule is rendered without any script error. We have prepared the below sample for your reference and suspect that customization used in your sample could be the cause. Kindly try the sample and if the issue persists, try to reproduce the error in a sample and revert else share your complete code example/runnable sample (if possible) to serve you better. 

https://stackblitz.com/edit/react-tdnayp-mhpeoy?file=index.js 

 

Note: By default, Scheduler time internval will be 30mins.  

 

Regards, 

Karthigeyan