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

Focusing on current time

11 Answers 703 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 08 Oct 2013, 02:23 PM
How can I make the Schedule focus on the current time when ever the page is loaded?

Thanks for the help.

11 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 09 Oct 2013, 09:20 AM
Hello Camilo,

I am afraid that scrolling to the current time is not supported out of the box at this moment. You could achieve similar behavior using the following approach:
  1. Subscribe for the Scheduler's dataBound and navigate events
  2. Once any of the events is triggered get the current time and round it up or down so it's an exact hour (for example if it's currently 10:20 round it to 10:00)
  3. Search the Scheduler's table for a th element with text equal to the current time
  4. Scroll to that element using a third party library, for example jQuery.scrollTo
If this is not what you want, please provide more details on your scenario. 

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eugenio
Top achievements
Rank 1
answered on 10 Oct 2014, 12:46 PM
This seems to work ok in the browser, but in the iPad, after properly scrolling, if you touch the screen, a strange behavior takes place: the main contents of the calendar remain in focus at the time it was scrolled to, but the hours TH are reset all the way back to the top. If you now swipe down, you will see the hours are not aligned anymore with the actual scheduler contents, until you hit the bottom of the calendar, and at that time the hours THs align themselves again with the scheduler contents
0
Alexander Popov
Telerik team
answered on 14 Oct 2014, 09:15 AM
Hello Eugenio,

I am not sure what exactly is causing this behavior. Could you please share a runnable sample project where this happens, so we can analyze it further and suggest a solution or a workaround?

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Eugenio
Top achievements
Rank 1
answered on 14 Oct 2014, 12:27 PM
It also happens in the browser if you do right click on the scheduler: the hours scroll all the way up to 12 AM. The only difference is that in the browser the scheduler contents scroll alongside the hours, while in the iPad, the hours scroll all the way up, while the scheduler content remains focused in the same position, thus the hours and the scheduler contents become unaligned.

the code to scroll is the following

    <body>
        <div class="parentContainer" data-role="view" >
            <div id="scheduler" data-swipe="myTouch.swipe" data-role="scroller" ></div>
            </div>
    </body>


 function scrollToHour(config) {
            var hour = config.hour;
            var hourString = '';
            var isAMPM = $("table.k-scheduler-table>tbody>tr>th:contains(' AM')").length>0;
            if (isAMPM) {
                var stringAMPM = ' AM';
                if (hour>=12) {
                    stringAMPM = ' PM';
                }
                if(hour>12) {
                    hour-=12;
                }
                hourString+=hour+':00'+stringAMPM;
            }
            else {
                hourString+=hour+':00';
            }
            
            var scrollToY = 0;
            var $timeSlots = $("table.k-scheduler-table>tbody>tr>th:contains('" + hourString + "')");
            if($timeSlots.length>1) {
                if(hour<10) {
                    scrollToY = $($timeSlots[0]).offset().top;
                }
                else {
                    scrollToY = $($timeSlots[1]).offset().top;
                }
            }
            else {
                scrollToY = $timeSlots.offset().top;
            }
            
            $("div.k-scheduler-content","#scheduler").animate({
                scrollTop: scrollToY - 160
            }, config.ms);
        }
0
Alexander Popov
Telerik team
answered on 16 Oct 2014, 11:28 AM
Hi Eugenio,

In case the application is used on mobile devices I would recommend using the Mobile Scroller's scrollTo method, as shown in this updated example.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Eugenio
Top achievements
Rank 1
answered on 16 Oct 2014, 01:00 PM
I am using the scroller, but when you go all the way to the bottom, the effect still happens. If the visible area does not go all the way to the bottom, it does not happen. Try to run your sample code in the iPad, and fake it's 9 PM in your code.
0
Eugenio
Top achievements
Rank 1
answered on 16 Oct 2014, 01:03 PM
I forgot to tell you I found the kendo ui scroller a couple of days ago. this is the code I have to put together because the bug still happens if you scroll to the late PM hours ( I'm playing with percent based on the orientation of the device and the actual screen height)

        function scrollToHour(config) {
            var hour = config.hour;
            var hourString = '';
            var isAMPM = $("table.k-scheduler-table>tbody>tr>th:contains(' AM')").length>0;
            if (isAMPM) {
                var stringAMPM = ' AM';
                if (hour>=12) {
                    stringAMPM = ' PM';
                }
                if(hour>12) {
                    hour-=12;
                }
                hourString+=hour+':00'+stringAMPM;
            }
            else {
                hourString+=hour+':00';
            }
           
            var $timeSlots = $("table.k-scheduler-table>tbody>tr>th:contains('" + hourString + "')");
            var $timeSlot = {};
            if($timeSlots.length>1) {
                if(hour<10) {
                    $timeSlot = $($timeSlots[0]);
                }
                else {
                    $timeSlot = $($timeSlots[1]);
                }
            }
            else {
                $timeSlot = $timeSlots;
            }
           
            var screenSize = getScreenSize();
           
            var scrollToY = 0;
            if (screenSize.height > screenSize.width ) {
                scrollToY = $timeSlot.offset().top * screenSize.height/$timeSlot.offset().top * .5;
            }
            else {
                scrollToY = $timeSlot.offset().top * screenSize.height/$timeSlot.offset().top * .8;
            }            //alert(screenSize.height + '\n' + $timeSlot.offset().top);
           
            var $scroller = $("div.k-scheduler-content","#scheduler").data("kendoMobileScroller");
            try {
                $scroller.animatedScrollTo(0, -scrollToY);
            }
            catch (e) {
                $("div.k-scheduler-content","#scheduler").animate({
                    scrollTop: scrollToY
                }, config.ms);
            }
 ]
0
Alexander Popov
Telerik team
answered on 20 Oct 2014, 10:35 AM
Hi Eugenio,

Here is an example illustrating how you can prevent that behavior by calculating the maximum scroll offset.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Eugenio
Top achievements
Rank 1
answered on 20 Oct 2014, 01:09 PM
Nicely done! Thank you!
0
Peter
Top achievements
Rank 1
answered on 27 Mar 2018, 09:09 PM

Here is my updated solution, because some of the code in this post doesn't work anymore:

function scrollToHour(hour) {
    var time = new Date();
    time.setHours(hour);
    time.setMinutes(0);
    time.setSeconds(0);
    time.setMilliseconds(0);
 
    var scheduler = $("#scheduler").data("kendoScheduler");
    var contentDiv = scheduler.element.find("div.k-scheduler-content");
    var rows = contentDiv.find("tr");
 
    for (var i = 0; i < rows.length; i++) {
        var slot = scheduler.slotByElement(rows[i]);
         
        var slotTime = kendo.toString(slot.startDate, "HH:mm");
        var targetTime = kendo.toString(time, "HH:mm");
 
        if (targetTime === slotTime) {
            contentDiv[0].scrollTop = $(rows[i]).find("td:first")[0].offsetTop;
        }
    };
}
0
Dimitar
Telerik team
answered on 28 Mar 2018, 01:23 PM
Hello Peter,

Thank you for sharing your solution.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
David
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Eugenio
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or