How add zoom to Schedule Component

[Lydia Haret]

Hello everybody,

I would like to know is it possible to add the zoom  in Schedule component?  I tried change the interval in timeScale but i lose the position i want to zoom because the scroll bar goes towards 00h

[Vinitha Devi Murugan]

Hi Lydia, 

 

Syncfusion Greetings. 

 

Using the timeScale property of our scheduler, we achieved your requirement by using the wheel event and the same can be found in the reference below. 

 

https://stackblitz.com/edit/b4azwd-r7dhrw?file=index.js 

 

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

 

Regards, 

M.Vintiha devi 

[Lydia Haret]

Hi,

thank your for your response, in  my code I change the interval not the slotCount and I use the keybord with the keys "+" & "-" to zoom in or zoom out. 

I want know if there is a possibility to focus the event or an empty cell wich I want zoom in. In your solution the scroll bar always tends towars to 00h.

Regards,

 Lydia Haret 

[Balasubramanian Sattanathan]

Hi Lydia Haret, 

 

Thanks for the update. 

 

We suspect that your requirement is that after zooming in/out the Scheduler, the cell/event should remain the same focus. We've met your requirement by using scrollTo public method for the same we have prepared sample for your reference. 

 

Sample : https://stackblitz.com/edit/b4azwd-nhfbga?file=index.js 

 

Please refer the below UG link for more details about scrollTo method. 

 

UG Link : https://ej2.syncfusion.com/angular/documentation/schedule/working-days/#scroll-to-specific-time-and-date 

API Link : https://ej2.syncfusion.com/angular/documentation/api/schedule/#scrollto  

 

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

 

Regards, 

Balasubramanian S 

[Lydia Haret]

Hello,

thanks for your request,

I come back to you to ask you again for another way to use the zoom in the schedule.  I inform you that I have modify the value of the interval in the timeslot to zoom in/out but I have two problems:
      1: The alignment of events in the TimelineWeekView is wrong when I use a large interval. 
     2: The scroll bar moves, which makes me lose my initial position.
I would like to be able to focus on the area I want to zoom in/out and have the right position of events
I attached an example of an event shift

Regards,

 Lydia Haret 

[Balasubramanian Sattanathan]

Hi Lydia Haret, 

 

Thanks for the update. 

 

Q1 : The alignment of events in the TimelineWeekView is wrong when I use a large interval.  

 

We checked your shared image, in that highlighted event(test: 13:30-16:00) is created and rendered properly in DOM. And we could reproduce misalignment issue when set the larger interval for timescale. So we logged the below bug report and fix will be included in our upcoming Volume 4 SP release which is expected to roll out by end of December 2019. We would appreciate your valuable patience until then. 

 

https://www.syncfusion.com/feedback/10667/timescale-is-not-working-properly-when-set-the-interval-larger  

 

Q2 : The scroll bar moves, which makes me lose my initial position. 

 

By default Scheduler component doesn’t have the Zoom in/out support. To meet your requirement, we have suggested timescale option for zooming and shared sample based on this. In our previously shared sample, We have achieved your requirement using mouse wheel event, So timescale options are changed whenever the mouse wheel is scrolled up/down. And also whenever it triggers the scroll bar also should move itself. 

 

Regards, 

Balasubramanian S