Focusing on current time

12 posts, 0 answers
  1. David
    David avatar
    6 posts
    Member since:
    Jul 2013

    Posted 08 Oct 2013 Link to this post

    How can I make the Schedule focus on the current time when ever the page is loaded?

    Thanks for the help.

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 09 Oct 2013 Link to this post

    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!
  3. Eugenio
    Eugenio avatar
    5 posts
    Member since:
    Jan 2014

    Posted 10 Oct 2014 in reply to Alexander Popov Link to this post

    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
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 14 Oct 2014 Link to this post

    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!
     
  5. Eugenio
    Eugenio avatar
    5 posts
    Member since:
    Jan 2014

    Posted 14 Oct 2014 in reply to Alexander Popov Link to this post

    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);
            }
  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 16 Oct 2014 Link to this post

    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!
     
  7. Eugenio
    Eugenio avatar
    5 posts
    Member since:
    Jan 2014

    Posted 16 Oct 2014 in reply to Alexander Popov Link to this post

    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.
  8. Eugenio
    Eugenio avatar
    5 posts
    Member since:
    Jan 2014

    Posted 16 Oct 2014 in reply to Eugenio Link to this post

    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);
                }
     ]
  9. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 20 Oct 2014 Link to this post

    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!
     
  10. Eugenio
    Eugenio avatar
    5 posts
    Member since:
    Jan 2014

    Posted 20 Oct 2014 in reply to Alexander Popov Link to this post

    Nicely done! Thank you!
  11. Peter
    Peter avatar
    14 posts
    Member since:
    Dec 2013

    Posted 27 Mar 2018 Link to this post

    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;
            }
        };
    }
  12. Dimitar
    Admin
    Dimitar avatar
    801 posts

    Posted 28 Mar 2018 Link to this post

    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.
Back to Top