Setting background color of date in raddatepicker only shows the background color when the date is hovered unless the rendermode is changed

[Gavin]

If I set the background color of dates in a raddatepicker the background color will show when I hover over the date but not before I do.

If I set the render mode to lightweight the background color does show upon the raddatepicker showing.

Does anyone else have this problem?

Here is the control

<telerik:RadDatePicker ID="rdpPickUpDate" runat="server"  >
   <Calendar OnDayRender="Calendar_OnDayRender" ></Calendar>
</telerik:RadDatePicker>

 

Here is the code to set the background color to red for Mondays

        protected void Calendar_OnDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
        {
            if (e.Day.Date.DayOfWeek == DayOfWeek.Monday)
            {
                RadCalendarDay calendarDay = new RadCalendarDay();
                calendarDay.Date = e.Day.Date;

                calendarDay.ItemStyle.BackColor = System.Drawing.Color.Red;


                calendarDay.Repeatable = Telerik.Web.UI.Calendar.RecurringEvents.DayAndMonth;

                rdpPickUpDate.Calendar.SpecialDays.Add(calendarDay);
            }
        }

 

Does anyone have any ideas

[Vasko]

Hello Gavin,

You can try targeting the cell of the current calendar day and add a custom CSS class to ensure the color changes when the Calendar is rendered: 

html body .RadCalendar .myClass {
    background-color: red;
}

protected void Calendar_OnDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
{
    if (e.Day.Date.DayOfWeek == DayOfWeek.Monday)
    {
        e.Cell.CssClass += " myClass";
    }
}

Regards,
Vasko
Progress Telerik

[Gavin]

Thank you very much! That works really well. 

There is only 1 thing. It seems to do the 6 weeks only. A couple of weeks before todays date and then 4 weeks after todays date. (by the looks of it)

Sometimes I have a date picked that can be months in Advance. Is there any way to make all of the specific days red, regardless of the current date?

Below is an example where the selected date is the 17th of July and you can just see the last week of June and the first week of July as red for Wednesday and Sunday.

 

[Vasko]

Hi Gavin,

Since the Calendar renders 6 rows, it is expected that the DayRender event to cover only these specific rows. To work around this, you can create a separate function that adds the custom CSS class to the Calendar:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        HighlightSpecialDays();
    }
}

private void HighlightSpecialDays()
{
    // Define the date range you want to check (e.g., 1 year back and 1 year forward)
    DateTime startDate = DateTime.Today.AddMonths(0);
    DateTime endDate = DateTime.Today.AddMonths(3);

    for (DateTime date = startDate; date <= endDate; date = date.AddDays(1))
    {
        if (date.DayOfWeek == DayOfWeek.Monday)
        {
            RadCalendarDay calendarDay = new RadCalendarDay();
            calendarDay.Date = date;
            calendarDay.ItemStyle.CssClass += " myClass";
            calendarDay.Repeatable = RecurringEvents.DayAndMonth;
            rdpPickUpDate.Calendar.SpecialDays.Add(calendarDay);
        }
    }
}

Regards,
Vasko
Progress Telerik

[Gavin]

That works perfectly!!! 

Thank you!

Here is how it looks