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

Multiple Timezone

 Dear Team,

We need to incorporate multiple timezones in schedule component..

Please refer the attachment.

Regards,
Suresh

Attachment: 1_week_view_bbb546b8.zip

11 Replies

VD Vinitha Devi Murugan Syncfusion Team December 11, 2019 10:37 AM UTC

Hi Sinchan 
 
Syncfusion Greetings. 
 
We have prepared the below sample to display the different timezone time with it’s name using majorSlotTemplate option. 
 
 
Kindly try with the above sample and let us know, if you need any further assistance on this. 
 
Regards,  
M.Vinitha devi  



SN Sinchan NIkam December 13, 2019 06:52 AM UTC

Thanks.

Regards,
Suresh


VD Vinitha Devi Murugan Syncfusion Team December 16, 2019 05:42 AM UTC

 
Hi Sinchan, 
 
You are most welcome 😊 
 
Regards, 
M.Vinitha devi 



SN Sinchan NIkam January 6, 2020 07:08 AM UTC

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



VM Vengatesh Maniraj Syncfusion Team January 7, 2020 10:07 AM UTC

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>  
  
  
  
Kindly try the above sample, if you have any concerns please revert us back for further assistance.  
  
Regards,  
Vengatesh  
 



SN Sinchan NIkam January 8, 2020 01:31 PM UTC

Thanks Vinitha.

Regards,
Sinchan 


VM Vengatesh Maniraj Syncfusion Team January 9, 2020 05:22 AM UTC

Hi Sinchan, 

You are most welcome. 

Regards, 
Vengatesh 



SN Sinchan NIkam February 19, 2020 09:27 AM UTC

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


VM Vengatesh Maniraj Syncfusion Team February 19, 2020 11:49 AM UTC

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.  


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

Regards, 
Vengatesh 



SN Sinchan NIkam February 24, 2020 01:20 PM UTC

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(datesthis.workHours[0].StartTimethis.workHours[0].EndTime0)


Regards,
Sinchan 


VM Vengatesh Maniraj Syncfusion Team February 25, 2020 06:20 AM UTC

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); 
        } 
      } 
    } 
  } 


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

Regards, 
Vengatesh 


Loader.
Live Chat Icon For mobile
Up arrow icon