Mark the current hour on the scheduler

[Segev]

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.

[Boyan Dimitrov]

Hello Guy,

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



Regards,
Boyan Dimitrov
Telerik

 

 

[Segev]

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

[Segev]

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.