This is a migrated thread and some comments may be shown as answers.

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

2 Answers 283 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Siddhartha
Top achievements
Rank 1
Siddhartha asked on 01 Dec 2016, 12:32 PM

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

2 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 05 Dec 2016, 08:22 AM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Dorian
Top achievements
Rank 1
answered on 26 Nov 2018, 09:59 PM

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();
        }
    });

Tags
Scheduler
Asked by
Siddhartha
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Dorian
Top achievements
Rank 1
Share this question
or