Change date heading CSS in week view

[Rimma]

Hi, I'd like to show the date heading in a different style for today's date in week view.
Is it possible?  I've updated the CSS on the time slot and that only changes the actual timeslots, not the corresponding heading for that day.
Thanks!

[Princy]

Hi Rimma,

Try the following Javascript to style the today's date in week view.

Javascript:

<script type="text/javascript">
function pageLoad() {
    $telerik.$(".rsHorizontalHeaderTable th").each(function (index, item) {
        var childNode = item.childNodes[0];
        if (childNode != null) {
            var today = new Date();
            today.setHours(0); today.setMinutes(0); today.setSeconds(0);
            if (childNode.href != null) {
                var hrefDate = childNode.href.split('#')[1];
                var date = new Date(hrefDate);
                date.setHours(0); date.setMinutes(0); date.setSeconds(0);
                if (date.toDateString() == today.toDateString()) {
                    item.style.backgroundImage = "none";
                    item.style.backgroundColor = "yellow";
                }
            } else {
                var innerText = childNode.innerHTML.trim();
                var date = new Date(innerText);
                date.setHours(0); date.setMinutes(0); date.setSeconds(0);
                if (date.toDateString() == today.toDateString()) {
                    item.style.backgroundImage = "none";
                    item.style.backgroundColor = "yellow";
                }
            }
        }
    });
}
</script>

Thanks,
Princy.

[Mehmet]

Hi,

It does highlight the same day's name for all weeks-months.
So why does it happen?

[Boyan Dimitrov]

Hello,

I would like to clarify that solution provided by Princy highlights the today's date in week view's heading section. It does not highlight the date only in week view and does not highlight in same day for each month. It only colors the today's date this year.

Regards,
Boyan Dimitrov
Telerik

 

 

[Mehmet]

What is the solution to just highlight today's date on the current week rather than the all year's today date's name ?
Thank you

[Boyan Dimitrov]

Hello,

I guess that you want to color all time slots for today's date in the week view. You can achieve this by using the RadScheduler OnTimeSlotCreated event and sets custom class for all today's date time slots:
//code behind

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
        if (RadScheduler1.SelectedView == SchedulerViewType.WeekView && e.TimeSlot.Start.Date == DateTime.Now.Date)
        {
            e.TimeSlot.CssClass = "todaysDate";
        }
    }

Using css you can set the time slot element background color.

Regards,
Boyan Dimitrov
Telerik

 

 

[Mehmet]

Can you provide me a JS code of it?
Thank you

[Boyan Dimitrov]

Hello,

Please find the client-side solution below:
//JavaScript

function pageLoad() {
    var scheduler = $find("<%= RadScheduler1.ClientID %>");
    if (scheduler.get_selectedView() == 1) {
        var timeSlotsDOM = $telerik.$($telerik.$(".rsContentTable tr td"));
        for (var i = 0; i < timeSlotsDOM.length; i++) {
            var DOMElement = timeSlotsDOM[i];
            var date = $find("RadScheduler1").get_activeModel().getTimeSlotFromDomElement(DOMElement).get_startTime().toDateString();
            var todayDate = new Date().toDateString();
            if (date == todayDate) {
                $telerik.$(DOMElement).addClass("todaysClass");
            }

        }
    }

}

//css

.todaysClass {
            background-color:red;
        }

Regards,
Boyan Dimitrov
Telerik