Mark the current hour on the scheduler

4 posts, 0 answers
  1. Segev
    Segev avatar
    27 posts
    Member since:
    Sep 2010

    Posted 02 Jul 2014 Link to this post

    Hi,

    I've added a mark for the current hour on the scheduler.

    This function finds the cell of the current half hour, and adds a light-green border bottom:

    function markCurrentHour() {
        var currentHour = (new Date()).format("HH");
        var currentMinutes = (new Date()).format("mm");
        if (+currentHour < 13) {
            currentHour += "AM";
        }
        else {
            currentHour = (+currentHour - 12) + "PM";
        }
        var verticalHeaderTables = $(".rsVerticalHeaderTable"); // Each view type has a table (day view, week view, etc.)
        if (verticalHeaderTables) {
            $.each(verticalHeaderTables, function (index, item) {
                var hourCells = $(item).find(".rsAmPm"); // 24 cells with the hours (12AM, 1AM, 2AM, etc.)
                $.each(hourCells, function (index, item) {
                    if (item.parentNode.innerText.trim() == currentHour) { // Current hour cell
                        if (+currentMinutes < 30) { // First 30 minutes cell
                            item.parentNode.parentNode.style.borderBottomColor = "lightgreen";
                            item.parentNode.parentNode.style.borderBottomWidth = "5px";
                        }
                        else { // Next 30 minutes cell
                            $(item.parentNode.parentNode.parentNode).next().children()[0].style.borderBottomColor = "lightgreen";
                            $(item.parentNode.parentNode.parentNode).next().children()[0].style.borderBottomWidth = "5px";
                        }
                    }
                });
            });
        }
    }


    I call this function in this event:

    function onClientAppointmentsPopulated() {
        markCurrentHour();
    }

    You can see the result in the attached screenshot (at 4PM).
    Hope it will help someone.

    Guy.
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 07 Jul 2014 Link to this post

    Hello Guy,

    Thank you for sharing this solution with our community. I'm sure that someone will find it useful.



    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Segev
    Segev avatar
    27 posts
    Member since:
    Sep 2010

    Posted 16 Jul 2014 in reply to Boyan Dimitrov Link to this post

    function markCurrentHour() {
        var currentHour = (new Date()).format("HH");
        var currentMinutes = (new Date()).format("mm");
        if (+currentHour == 0) {
            currentHour = "12AM";
        }
        else if (+currentHour < 12) {
            currentHour += "AM";
        }
        else if (+currentHour == 12) {
            currentHour = "12PM";
        }
        else {
            currentHour = (+currentHour - 12) + "PM";
        }
        var verticalHeaderTables = $(".rsVerticalHeaderTable"); // Each view type has a table (day view, week view, etc.)
        if (verticalHeaderTables) {
            $.each(verticalHeaderTables, function (index, item) {
                var hourCells = $(item).find(".rsAmPm"); // 24 cells with the hours (12AM, 1AM, 2AM, etc.)
                $.each(hourCells, function (index, item) {
                    if (item.parentNode.innerText.trim() == currentHour) { // Current hour cell
                        if (+currentMinutes < 30) { // First 30 minutes cell
                            item.parentNode.parentNode.style.borderBottomColor = "lightgreen";
                            item.parentNode.parentNode.style.borderBottomWidth = "5px";
                        }
                        else { // Next 30 minutes cell
                            $(item.parentNode.parentNode.parentNode).next().children()[0].style.borderBottomColor = "lightgreen";
                            $(item.parentNode.parentNode.parentNode).next().children()[0].style.borderBottomWidth = "5px";
                        }
                    }
                });
            });
        }
    }
  5. Segev
    Segev avatar
    27 posts
    Member since:
    Sep 2010

    Posted 16 Jul 2014 in reply to Segev Link to this post

    I had a bug in the code, so the previous comment has a fix for it.
    It's related to the conversion to an hour with AM or PM.

    Guy.
Back to Top