How to automatically scroll to a specific time in the Scheduler (Week View)?

[Agustin]

Hi,

I would like to know if the Scheduler provides any built-in functionality to automatically position the view at a specific hour in the Week View. For example, an automatic scroll to a selected time when the component is rendered.

Is there any available property or method to achieve this?

Thanks in advance!

[Filip]

Hello, Agustin,

While the Scheduler does not have an inbuilt way to scroll to a particular hour, this can be implemented with custom logic. I have prepared an example that showcases one possible approach:

• https://stackblitz.com/edit/react-jwmwgb89-kxan8dbg?file=app%2Fapp.jsx

The main idea is to obtain the `.k-scheduler-body` container and programatically scroll to the desired hour:

 const scrollTo = () => {
    const contentDiv = document.querySelector('div.k-scheduler-body');

    if (contentDiv) {
      const majorCells = contentDiv.querySelectorAll('.k-major-cell');

      const timeToScrollTo = [...majorCells].find(
        (el) => el.innerText.trim() === '1:00 PM' 
      );

      if (timeToScrollTo) {
        timeToScrollTo.scrollIntoView({
          block: 'start',
          behavior: 'smooth',
        });
      }
    }
  };

The part that is highlighted in green should be changed with the hour we want to scroll to. Please try the suggested approach above and let me know in case further questions arise and I will be more than happy to help.

Regards,
Filip
Progress Telerik