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

How add zoom to Schedule Component

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

5 Replies

VD Vinitha Devi Murugan Syncfusion Team November 26, 2019 06:46 AM UTC

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. 
 
 
 
Regards, 
M.Vintiha devi 



LH Lydia Haret November 26, 2019 01:45 PM UTC

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 



BS Balasubramanian Sattanathan Syncfusion Team November 27, 2019 01:04 PM UTC

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. 
 
 
Please refer the below UG link for more details about scrollTo method. 
 
 
Kindly try above sample and let us know if you need any further assistance on this. 
 
Regards, 
Balasubramanian S 



LH Lydia Haret December 9, 2019 04:11 PM UTC

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 


BS Balasubramanian Sattanathan Syncfusion Team December 10, 2019 11:40 AM UTC

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. 
 
 
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

Loader.
Live Chat Icon For mobile
Up arrow icon