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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How add zoom to Schedule Component

Thread ID:





149393 Nov 25,2019 09:48 AM UTC Dec 10,2019 11:40 AM UTC Angular - EJ 2 5
Tags: Schedule
Lydia Haret
Asked On November 25, 2019 09:48 AM UTC

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 [Syncfusion]
Replied On 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. 
M.Vintiha devi 

Lydia Haret
Replied On November 26, 2019 01:45 PM UTC


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.

 Lydia Haret 

Balasubramanian Sattanathan [Syncfusion]
Replied On 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. 
Balasubramanian S 

Lydia Haret
Replied On December 9, 2019 04:11 PM UTC

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

 Lydia Haret 

Balasubramanian Sattanathan [Syncfusion]
Replied On 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. 
Balasubramanian S


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