Recolor SpecialDays and then reset colour

[Karl]

I have a schedule control and a calendar control on a form.

When a user clicks on a cell in the schedule control (in timeline view), the calendar updates to show, as specialdays, all the days for the month that has the day in it that the user selected.

The specialdays and focusedDate have a very similar colour and I want to recolour the special days and focuseddate colours so they are easily identifiable.

Ive started changing the special days color, but when a user clicks in a different scheduler cell, the background color of the calendar remains how it was set previously.

I'm using the ElementRender event of the calender control to see if its a special day, and if it is colour it. I'm not sure how to reset it if it isnt.

Code below, and any help greatly appreciated.

private void Calendar_ElementRender(object sender, RenderElementEventArgs e)
{
    foreach (RadCalendarDay date in ((RadCalendar)sender).SpecialDays)
    {
        if (e.Day.Date == date.Date)
        {
            e.Element.BackColor = Color.Red;
            return;
        }
    }
}

[Stefan]

Hi Karl,

Thank you for writing.

Here is a small application demonstrating how to set/reset the style for the SpecialDays in RadCalendar:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        radScheduler1.ActiveViewType = Telerik.WinControls.UI.SchedulerViewType.Timeline;

        radScheduler1.CellClick += new EventHandler<Telerik.WinControls.UI.SchedulerCellEventArgs>(radScheduler1_CellClick);
        radCalendar1.ElementRender += new RenderElementEventHandler(radCalendar1_ElementRender);
    }

    void radCalendar1_ElementRender(object sender, RenderElementEventArgs e)
    {
        if (radCalendar1.SpecialDays.Contains(e.Day, new MyComparer()))
        {
            e.Element.NumberOfColors = 1;
            e.Element.BackColor = Color.Red;
            e.Element.BorderColor = Color.Blue;
        }
        else
        {
            e.Element.ResetValue(LightVisualElement.NumberOfColorsProperty, ValueResetFlags.Local);
            e.Element.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
            e.Element.ResetValue(LightVisualElement.BorderColorProperty, ValueResetFlags.Local);

        }
    }

    void radScheduler1_CellClick(object sender, Telerik.WinControls.UI.SchedulerCellEventArgs e)
    {
        radCalendar1.SpecialDays.Add(new RadCalendarDay(e.CellElement.Date));
    }
}

class MyComparer : IEqualityComparer<RadCalendarDay>
{
    public bool Equals(RadCalendarDay day1, RadCalendarDay day2)
    {
        if (DateTime.Compare(day1.Date, day2.Date) == 0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    public int GetHashCode(RadCalendarDay day)
    {
        return day.GetHashCode();
    }
}

I hope this helps.

Let us know if you have any other questions.
 
Greetings,
Stefan
the Telerik team

[Karl]

This is almost exactly what I'm after, thank you, with just a couple of tweaks It'll be there.

How do I set it so the background colour of a special day is shaded, say light red at the top, dark at the bottom?
I tried using backcolor1, backcolor2 etc with very strange results. Can you point me at the documentation for these properties?

Also, is it possible to style the FocusedDate so it looks like a normal day (not highlighted)?

Thanks,
Karl

[Stefan]

Hello Karl,

Thank you for writing back.

Here is the modified code snippet:

void radCalendar1_ElementRender(object sender, RenderElementEventArgs e)
{
    if (radCalendar1.SpecialDays.Contains(e.Day, new MyComparer()))
    {
        e.Element.GradientStyle = GradientStyles.Linear;
        e.Element.BackColor = Color.Yellow;
        e.Element.BackColor2 = Color.Blue;
        e.Element.BorderColor = Color.Blue;
    }
    else if (radCalendar1.FocusedDate == e.Day.Date && e.Day.Date != DateTime.Now.Date)
    {
        e.Element.DrawFill = false;
        e.Element.DrawBorder = false;
        e.Element.ForeColor = Color.FromArgb(21, 66, 139);
    }
    else
    {
        e.Element.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
        e.Element.ResetValue(LightVisualElement.DrawBorderProperty, ValueResetFlags.Local);
        e.Element.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
        e.Element.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
        e.Element.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
        e.Element.ResetValue(LightVisualElement.BackColor2Property, ValueResetFlags.Local);
        e.Element.ResetValue(LightVisualElement.BorderColorProperty, ValueResetFlags.Local);
    }
}

and here is the documentation regarding these properties: http://www.telerik.com/help/winforms/tpf-primitives-fillprimitive.html.

If you think that there might be considerable amount of visual modifications that you want to apply, you can consider modifying the theme, instead of applying those via code.

Let me know if I can be of further assistance.
 
Regards,
Stefan
the Telerik team