[Solved] style day in weekly column header

[Leadeng Leadeng]

Hi

Is it possible to style only today's day in weekly view column header?
If so, please provide a sample.

Thanks much

[Peter]

Hello Leadeng,

Please, see the following kb article and let us know if you need further help:
http://www.telerik.com/support/kb/aspnet-ajax/scheduler/setting-special-days-or-time-slots-in-radscheduler.aspx


Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Leadeng Leadeng]

Thanks for your answer.

This is not what I was looking for.
I would like to highlight only the current day header not the timeslot.

Current Day header where it displays for ex. Fri, 29. 
Is it possible to change the background color for current day?

Thanks

[Peter]

Hello Leadeng,

Please, try the following code and let us know if it helps:

protected void Page_Load(object sender, EventArgs e)
    {
        if (RadScheduler1.SelectedDate.AddDays(-4) < DateTime.Now & DateTime.Now < RadScheduler1.SelectedDate.AddDays(4))
        {
            string todaysDate = DateTime.Now.ToString(RadScheduler1.WeekView.ColumnHeaderDateFormat);
            StringBuilder sb = new StringBuilder();

            sb.Append("<script type='text/javascript'>function pageLoad(){");
            sb.Append("var $ = $telerik.$;");
            sb.Append("var $ = $telerik.$;");
            sb.Append("$('.rsDateHeader:contains(");
            sb.Append(todaysDate);
            sb.Append(")').parent().css('background', 'green');} </script>");
            RegisterStartupScript("key", sb.ToString());
        }
    }
    protected void RadScheduler1_NavigationComplete(object sender, SchedulerNavigationCompleteEventArgs e)
    {
        if (RadScheduler1.SelectedDate.AddDays(-4) < DateTime.Now & DateTime.Now < RadScheduler1.SelectedDate.AddDays(4))
        {
            string todaysDate = DateTime.Now.ToString(RadScheduler1.WeekView.ColumnHeaderDateFormat);
            StringBuilder sb = new StringBuilder();

            sb.Append("<script type='text/javascript'>function pageLoad(){");
            sb.Append("var $ = $telerik.$;");
            sb.Append("var $ = $telerik.$;");
            sb.Append("$('.rsDateHeader:contains(");
            sb.Append(todaysDate);
            sb.Append(")').parent().css('background', 'green');} </script>");
            RegisterStartupScript("key", sb.ToString());
        }
    }

Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Leadeng Leadeng]

Thanks for your reply.

That solution worked.

However, I tried the following and is not applying css.  Can you shed some light on it?

sb.Append("<script type='text/javascript'>function pageLoad(){");
                sb.Append("var $ = $telerik.$;");
                sb.Append("var $ = $telerik.$;");
                sb.Append("$('.rsDateHeader:contains(");
                sb.Append(todaysDate);
                sb.Append(")').parent().css({'background':'black', 'color':'white'});} </script>");

[Peter]

Hello Leadeng,

Calling the parent() method will return the 'th' element which contains the date's link. Try applying the color to the link element directly:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (RadScheduler1.SelectedDate.AddDays(-4) < DateTime.Now & DateTime.Now < RadScheduler1.SelectedDate.AddDays(4))
            {
                string todaysDate = DateTime.Now.ToString(RadScheduler1.WeekView.ColumnHeaderDateFormat);
                StringBuilder sb = new StringBuilder();

                sb.Append("<script type='text/javascript'>function pageLoad(){");
                sb.Append("var $ = $telerik.$;");
                sb.Append("$('.rsDateHeader:contains(");
                sb.Append(todaysDate);
                sb.Append(")').css({'color':'white'});");
                sb.Append("$('.rsDateHeader:contains(");
                sb.Append(todaysDate);
                sb.Append(")').parent().css({'background':'black'});} </script>");
                RegisterStartupScript("key", sb.ToString());
            }
        }
    }

Also notice that you should do a if (!IsPostBack) check, which I forgot to include in my previous reply.


All the best,
Peter
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.