[Solved] Highlight Today

[Christopher Ronak]

Is it possible to set the calendar so that it automatically highlights the current date?
I think this question may have been asked one way or another in this forum, but just to clarify, it'd be ideal to always indicate 'today' on the calendar - no matter how much they browse around the dates. Like, change the colour or font slightly.
Because, even if you set the initial value of the date to be today's date, that gets lost as they browse around.

Thanks for any help!

Chris

[Dimo]

Hello Christopher,

You can achieve the desired behavior like this. Instead of adding the "t-widget" CSS class to the today's table cell, you can add any other class and define custom styles.

<%= Html.Telerik().Calendar()
        .Name("Calendar")
        .ClientEvents(ev => ev.OnLoad("attachHandler"))
%>

function attachHandler(e)
{
    var d = new Date();
    var that = this;

    highlightToday(that, d);

    $(".t-header", that).click(function(){
        window.setTimeout(function() {
            highlightToday(that, d);
        }, 500);
    });

    $(".t-meta-view", that).live("click", function(){
        window.setTimeout(function() {
            highlightToday(that, d);
        }, 500);
    });

}

function highlightToday(c, d)
{
    if ($(c).data("tCalendar").viewedMonth.value.getMonth() == d.getMonth()) {
        $('.t-content .t-link', c).each(function(index, element) {
            if ($(element).text() == d.getDate() && !($(element).parent().hasClass("t-other-month"))) {
                $(element).parent().addClass("t-widget");
            }
        })
    }
}

Regards,
Dimo
the Telerik team

[Dmitry]

Hello Dimo,

your sample uses Calender widget, but I need to manage the DatePicker to highlight the current date.

I coudn't get it working for DateTime :(

Could you help me?

[Dimo]

Hello Dmitry,

When using a DatePicker, the code should be changed mainly because "this" and "that" no longer represent a Calendar element.

.t-calendar .todayClass
{
    background:red;
}

.t-calendar .todayClass .t-link
{
    color:yellow;
}

function highlightToday(c, d)
{
    if ($(c).data("tCalendar").viewedMonth.value.getMonth() == d.getMonth()) {
        $('.t-content .t-link', c).each(function(index, element) {
            if ($(element).text() == d.getDate() && !($(element).parent().hasClass("t-other-month"))) {
                $(element).parent().addClass("todayClass");
            }
        })
    }
}

function attachHandler(e)
{
    var d = new Date();
    var that = this,
        cal = $(that).data("tDatePicker").dateView.$calendar[0];

    window.setTimeout(function(){
        highlightToday(cal, d);
    }, 1);

    $(".t-header", cal).click(function(){
        window.setTimeout(function() {
            highlightToday(cal, d);
        }, 500);
    });

    $(".t-meta-view", cal).live("click", function(){
        window.setTimeout(function() {
            highlightToday(cal, d);
        }, 500);
    });

}

Html.Telerik().DatePicker()
    .ClientEvents(ev => ev.OnOpen("attachHandler"))

Greetings,
Dimo
the Telerik team

[Dmitry]

Thank you, Dimo

it works!

But I have an additional question :)

how I can use this method in Grid DateTime fields and in Grid Filter dialogs?
I've just opened a support ticket on this topic, but may be you're the best specialist on it :)

[Dimo]

Hello Dmitry,

In order to customize a Grid editor widget and use its events, you will need to use a server or client editor template.

Regards,
Dimo
the Telerik team