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

Mark the current hour on the scheduler

3 Answers 4 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Segev
Top achievements
Rank 1
Segev asked on 02 Jul 2014, 01:31 PM
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.

3 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 07 Jul 2014, 12:01 PM
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.

 
0
Segev
Top achievements
Rank 1
answered on 16 Jul 2014, 10:28 AM
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";
                    }
                }
            });
        });
    }
}
0
Segev
Top achievements
Rank 1
answered on 16 Jul 2014, 10:30 AM
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.
Tags
Scheduler
Asked by
Segev
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Segev
Top achievements
Rank 1
Share this question
or