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

How to change background color of current date in rad scheduler week view mode

3 Answers 153 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Brajesh
Top achievements
Rank 1
Brajesh asked on 02 May 2012, 10:31 AM
i am attaching screen shot regarding it. i need same background of current date like orange in attached document.

3 Answers, 1 is accepted

Sort by
0
Ivana
Telerik team
answered on 02 May 2012, 06:42 PM
Hello Brajesh,

The following JavaScript and CSS code color the current day in RadScheduler  in week, month, and timeline view:
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";
                }
            }
        }
    });
}
<telerik:RadScheduler ID="RadScheduler1" runat="server" SelectedView="WeekView">
</telerik:RadScheduler>
.rsTodayCell
{
    background-color: Yellow;
}

I hope this will help.

All the best,
Ivana
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
John
Top achievements
Rank 1
answered on 13 Nov 2013, 10:31 AM
is it possible to color the whole date column?
0
Boyan Dimitrov
Telerik team
answered on 18 Nov 2013, 09:34 AM
Hello John,

An easy and convenient way of achieving such functionality would be using the RadScheduler TimeSlotCreated server-side event and apply a css class to all time slot objects associated with a specific date as shown in the code snippet below:
//markup code
<telerik:RadScheduler runat="server" ID="RadScheduler1" OnTimeSlotCreated="RadScheduler1_TimeSlotCreated">         
    </telerik:RadScheduler>
//code behind
protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
        if (RadScheduler1.SelectedView == SchedulerViewType.WeekView)
        {
            if (e.TimeSlot.Start.Date.Day == 23 )
            {
                e.TimeSlot.CssClass = "red";
            }
        }
    }

//css
<style type="text/css">
       html .RadScheduler .red {
           background: red;
       }
   </style>



Regards,
Boyan Dimitrov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Scheduler
Asked by
Brajesh
Top achievements
Rank 1
Answers by
Ivana
Telerik team
John
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or