Scheduler view in single page with Zoom In and Zoom Out feature

3 posts, 0 answers
  1. Siddhartha
    Siddhartha avatar
    12 posts
    Member since:
    Oct 2016

    Posted 01 Dec 2016 Link to this post


    i have created scheduler using kendo UI, where start time if 12 Mid night so that i can see 24 hours for that day

    there is horizontal scroll bar coming which i dont want.

    i would like to have default single page view for 24 hours and if i need i can zoom in to view the detail task

    how we can do that



  2. Veselin Tsvetanov
    Veselin Tsvetanov avatar
    1241 posts

    Posted 05 Dec 2016 Link to this post

    Hi Siddhartha,

    As far as I can understand, you would like to have a Kendo Scheduler, showing 24 hours per day, that fits your entire page. You also would like to avoid displaying scrollbars and display all the hours at a time. 

    If the above is the required, I am afraid that, due to its metrics, the Scheduler does not offer the possibility to scale it automatically, so it fits your screen. What you could do is to force it to expand and show all its hours by not setting height. This, however, will force a vertical scrollbar to appear on lower screens, where there is not enough room for all time-slots.

    What you could do to make Scheduler lower is to use the majorThick property of the required view. Using that you could configure the widget to show less time-slots.

    At the same time, if you need similar zoom in /out functionality as the one available for Charts, I am afraid that the Scheduler does not offer that feature.

    Veselin Tsvetanov
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. Dorian
    Dorian avatar
    1 posts
    Member since:
    Aug 2018

    Posted 26 Nov 2018 Link to this post

    I added a slider to my scheduler page and made the view scale like this:

        var slider = $("#slider").kendoSlider({
            min: 1,
            max: 10,
            value: localStorage.getItem('scheduler-options-zoom', 5),
            change: function () {
                var zoom = this.element.val();
                localStorage.setItem('scheduler-options-zoom', zoom);
                $('.k-scheduler-table td, .k-scheduler-times:last th').height(10 + zoom * 2.5).css('padding-top', zoom / 2 + 'px').css('padding-bottom', zoom / 2 + 'px');
                var scheduler = $("#scheduler").data("kendoScheduler");

Back to Top