Dear Team,
We have set the timezone props from state( i.e. Europe/London) to ScheduleComponent.
The local timezone of machine is India/Kolkata. And we have bind the data for ScheduleComponent in UTC format (e.g. 2010-01-22T12:00:00.000Z).
Initially, all meetings are displayed based on binded timezone(i.e Europe/London).
Once we drag and drop any meeting.. we update the state using below code.
onActionBegin(args) {
let data = args.data instanceof Array ? args.data[0] : args.data;
this.scheduleObj.eventSettings.dataSource.forEach(item => {
if (item.MeetingId === data.MeetingId) {
item.StartTime = data.StartTime;
item.EndTime = data.EndTime;
}
})
}.
Post this action..the meeting returned in locale timezone (i.e IST) hence, meeting displayed in wrong slot.
For your reference, we have print the console log of meeting date.
Before Drag (45 minutes meeting )
START TIME : Thu Feb 06 2020 21:00:00 GMT+0530 (India Standard Time)
END TIME : Thu Feb 06 2020 21:45:00 GMT+0530 (India Standard Time)
After Drop or resize the meeting (resize to 30 minutes, the same meeting appears in different time as )
START TIME : Thu Feb 06 2020 15:30:00 GMT+0530 (India Standard Time)
END TIME : Thu Feb 06 2020 16:00:00 GMT+0530 (India Standard Time)
Find below snippet of SchedulerComponent's props setting.
<ScheduleComponent cssClass='event-template'
width='100%'
height={this.height} ref={schedule => this.scheduleObj = schedule}
eventSettings={{dataSource: this.state.data}}
eventClick={this.onEventClick.bind(this)} actionBegin={this.onActionBegin}
actionComplete={this.onActionComplete} quickInfoTemplates={{ header: this.header, content: this.content, footer: this.footer }}
eventRendered={this.onEventRendered} popupOpen={this.onPopupOpen}
agendaDaysCount={7} hideEmptyAgendaDays={false} dragStart={this.onDragStart}
workDays={this.workDays} currentView={'WorkWeek'}
dataBound={this.onDataBound} delayUpdate='true'
timezone={this.state.locale} showTimeIndicator={true}
timeScale={{enable: true,majorSlotTemplate: this.majorSlotTemplate}}>
<ViewsDirective>
<ViewDirective option='Day' eventTemplate={this.eventTemplate} />
<ViewDirective option='Week' eventTemplate={this.eventTemplate} />
<ViewDirective option='WorkWeek' eventTemplate={this.eventTemplate} />
<ViewDirective option='Agenda' eventTemplate={this.eventTemplate} allowVirtualScrolling={false} />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Agenda, Resize, DragAndDrop,]} />
</ScheduleComponent>
