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

4 posts, 0 answers
  1. Brajesh
    Brajesh avatar
    1 posts
    Member since:
    May 2012

    Posted 02 May 2012 Link to this post

    i am attaching screen shot regarding it. i need same background of current date like orange in attached document.
  2. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 02 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    1 posts
    Member since:
    Jul 2013

    Posted 13 Nov 2013 Link to this post

    is it possible to color the whole date column?
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 18 Nov 2013 Link to this post

    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.
Back to Top