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

Schedular - Timezone Issue

Thread ID:

Created:

Updated:

Platform:

Replies:

151317 Feb 6,2020 03:00 PM UTC Feb 7,2020 10:39 AM UTC React - EJ 2 1
loading
Tags: Schedule
Sinchan NIkam
Asked On February 6, 2020 03:00 PM UTC

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>



Vengatesh Maniraj [Syncfusion]
Replied On 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 


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