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

Schedular - Timezone Issue

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={{dataSourcethis.state.data}}
                                eventClick={this.onEventClick.bind(this)} actionBegin={this.onActionBegin}
                                actionComplete={this.onActionComplete} quickInfoTemplates={headerthis.headercontentthis.contentfooterthis.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={{enabletrue,majorSlotTemplatethis.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={[DayWeekWorkWeekAgendaResizeDragAndDrop,]} />
                            </ScheduleComponent>



1 Reply

VM Vengatesh Maniraj Syncfusion Team February 7, 2020 10:39 AM UTC

Hi Sinchan, 

Greetings from Syncfusion Support. 

Based on your shared scenario, we have prepared a below sample for both your queries and the sample can be viewed from the following link, 


Q1: When we change the timezone property from ‘Asia/Kolkata’ to ‘Europe/London’ then that event will shift their time slot position based on the time zone offset difference. It’s a default behavior of the scheduler and for further reference kindly refer the below link, 

Q2: When we resize the event’s endTime ( for instance 10:45 ) for the default timeScale property then it will round off to (30 minutes). For that we need to change the interval for the resize functionality using resizeStart event and for further reference kindly refer the below code snippets. 

Code snippet: 
 
  onResizeStart(args) { 
    args.interval = 15; 
  } 
 
 
Kindly try the above sample, if you have any other concerns please revert us back for better serve. 

Regards, 
Vengatesh 


Loader.
Live Chat Icon For mobile
Up arrow icon