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

[Siddhartha]

Hi,

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

Thanks

Siddhartha

[Veselin Tsvetanov]

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.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Dorian]

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");
            scheduler.refresh();
        }
    });