Multiple Timezone

[Sinchan NIkam]

 Dear Team,

We need to incorporate multiple timezones in schedule component..

Please refer the attachment.

Regards,

Suresh

Attachment: 1_week_view_bbb546b8.zip

[Vinitha Devi Murugan]

Hi Sinchan,  

 

Syncfusion Greetings. 

 

We have prepared the below sample to display the different timezone time with it’s name using majorSlotTemplate option. 

 

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

 

Kindly try with the above sample and let us know, if you need any further assistance on this. 

 

Regards,  

M.Vinitha devi  

[Sinchan NIkam]

Thanks.

Regards,

Suresh

[Vinitha Devi Murugan]

 

Hi Sinchan, 

 

You are most welcome 😊 

 

Regards, 

M.Vinitha devi 

[Sinchan NIkam]

Dear Vinitha,

We have tried your solution..

It's works fine when you set the datasource only once.

We have a situation in which we will fetch the data from the datasource based on the user's date navigation.

Once we set the data, timezone elements are disappeared.

Kinldy please provide the solution for it.

Regards,

Sinchan

[Vengatesh Maniraj]

Hi Sinchan,  

  

Thanks for your update.  

  

We have validated the reported issue at our end and we suspect that you are maintaining setstate value, the react DOM render is calling twice when we call the setstate and hence Schedule React and template are renders simultaneously and this issue can be overcome by setting the delayUpdate(base property) as true in the Schedule. And for the same, we have modified our previously sample by enabling delayUpdate to react base property and the sample can be viewed from the following link,  

  

<ScheduleComponent delayUpdate='true'  

              height="650px"  

              ref={schedule => (this.scheduleObj = schedule)}  

              selectedDate={new Date(2019, 0, 10)}  

              showHeaderBar={false}  

              eventSettings={{ dataSource: this.data }}  

              timeScale={{  

                enable: true,  

                majorSlotTemplate: this.majorSlotTemplate.bind(this)  

              }}  

            >  

              <Inject services={[Week, Resize, DragAndDrop]} />  

            </ScheduleComponent>  

  

  

Sample: https://stackblitz.com/edit/react-jb6c65-tn3csu?file=index.js  

  

Kindly try the above sample, if you have any concerns please revert us back for further assistance.  

  

Regards,  

Vengatesh  

 

[Sinchan NIkam]

Thanks Vinitha.

Regards,

Sinchan 

[Vengatesh Maniraj]

Hi Sinchan, 

You are most welcome. 

Regards, 

Vengatesh 

[Sinchan NIkam]

Dear Vengatesh,

Hope you are doing good....

There is one more issue arise, setWorkHours does not work when we use the multiple timezone.

By default, it accept 9:00 to 18:00 as default work shift.

We need to change as per the user's shift e.g 12:00 to 21:00.

Regards,

Sinchan

[Vengatesh Maniraj]

Hi Sinchan, 

Thank you.  

I am doing great and I hope you are also doing well. 

We have checked your reported scenario at our end and we suggest you call the resetWorkHours method before calling setWorkHours method. We hope this solution will help to resolve your problem.  

resetWorkHours: https://ej2.syncfusion.com/react/documentation/api/schedule/#resetworkhours 

setWorkHours: https://ej2.syncfusion.com/react/documentation/api/schedule/#setworkhours 

Please try the above and if you still face the problem please share more details to serve you better. 

Regards, 

Vengatesh 

[Sinchan NIkam]

Dear  Vangatesh,

I already did the samething. However, the issue arise as it is.

Please refer my below code...

this.scheduleObj.resetWorkHours(dates, "00:00", "24:00", 0)

this.scheduleObj.setWorkHours(dates, this.workHours[0].StartTime, this.workHours[0].EndTime, 0)

Regards,

Sinchan 

[Vengatesh Maniraj]

Hi Sinchan, 

Thanks for the update. 

We have created a sample with setWorkHours for different resources with different work hours and the same can available in below link, 

onDataBound(args) { 

    if (this.islayoutChanged) { 

      var renderdate = this.scheduleObj.activeView.getRenderDates(); 

      this.scheduleObj.resetWorkHours(); 

      for (var i = 0; i < renderdate.length; i++) { 

        var dayindex = renderdate[i].getDay(); 

        if(dayindex !== 0 && dayindex !== 6){ 

          //first resource 

          this.scheduleObj.setWorkHours([renderdate[i]],this.workHours1[dayindex].startHour,this.workHours1[dayindex].endHour,0); 

          //second resource 

          this.scheduleObj.setWorkHours([renderdate[i]],this.workHours2[dayindex].startHour,this.workHours2[dayindex].endHour,1); 

        } 

      } 

    } 

  } 

Sample: https://stackblitz.com/edit/react-set-work-hours-sample-miv5rf?file=index.js 

Please try the above sample and if you still face the problem, please let us know with clear details. 

Regards, 

Vengatesh