Formatting cells

RadScheduler uses a logical layer for storing appointments and view data, and the visual elements that represent this data are occasionally being refreshed. Thus, you might lose some of the properties you have set to the visual elements. In order to customize the properties of the cell elements, you should use the CellFormatting event.

This event is fired after a SchedulerCellElement has been created, and when the cell needs to be displayed. The arguments of this event contain a reference to the cell element itself, so you can modify its properties. The samples below demonstrate how you can programmatically change various properties of the RadScheduler cells. Before these samples, we are going to provide some useful information about the RadScheduler cells types.

Figure 1: Visual Elements

RadScheduler Data Cells

RadScheduler data cells are of type SchedulerCellElement. This type of cell provides several useful properties:

• Date: Returns the date of the cell.

• IsToday: Indicates whether the date of the cells is today.

• IsWorkTime: Gets or sets whether the cell represents a work time slot.

• IsWholeHour: Indicates whether the cell represents a whole hour.

RadScheduler Header Cells

RadScheduler header cells are of type SchedulerHeaderCellElement. This type derive from SchedulerCellElement, so the properties mentioned above are valid here as well. SchedulerHeaderCellElement exposes one more property that you may find useful:

• IsVertical: Returns whether the cell element is vertical or not.

The interesting fact about SchedulerHeaderCellElement is that cells of this type are used for two different operations. For example, let's get the DayView. You can see that there is a header cell with text for each of the days. The cell below, which allows for hosting all-day appointments, is of type SchedulerHeaderCellElement as well. If you need to programmatically differentiate the first cell from the second, you can do this by the Parent property of the cell. The header cells that contain text are contained by an element of type DayViewHeader. The cells that can contain all-day appointments are contained by an element of type DayViewAllDayHeader.

Still wondering what type of cell is the cell that you want to format? You can employ RadControlSpy for this task.

Formatting Data Cells

Let's now format some data cells. We will make red the SchedulerCellElements that represent a specific day, for example Apr 13. Let's note that SchedulerHeaderCellElement derive from SchedulerDataElement, so we need to include an 'if' clause that prevents the header cells from being painted:

Data Cells

• C#
• VB.NET

void radScheduler1_CellFormatting1(object sender, Telerik.WinControls.UI.SchedulerCellEventArgs e)
{
    if (e.CellElement.Date.Month == 4 && e.CellElement.Date.Day == 13)
    {
        if (!(e.CellElement is SchedulerHeaderCellElement))
        {
            e.CellElement.BackColor = Color.Red;
        }                
    }
}

Private Sub radScheduler1_CellFormatting1(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.SchedulerCellEventArgs)
    If e.CellElement.Date.Month = 4 AndAlso e.CellElement.Date.Day = 13 Then
        If Not (TypeOf e.CellElement Is SchedulerHeaderCellElement) Then
            e.CellElement.BackColor = Color.Red
        End If
    End If
End Sub

We have the desired result. The data cells of April 13 are red.

Figure 2: Formatted Cells

However, what will happen if we navigate left or right in order to see the next/previous days of the days that are currently into view? Here is the result.

Figure 3: Formatting Incorrect Result

As you can see, undesired cells become red as well. RadScheduler is using elements recycling which means that the elements are reused and this is why other cells appear red also. To avoid this you should add an 'else' clause that will reset the BackColor property:

Reset Loaclly Set Values

• C#
• VB.NET

void radScheduler1_CellFormatting2(object sender, Telerik.WinControls.UI.SchedulerCellEventArgs e)
{
    if (e.CellElement.Date.Month == 4 && e.CellElement.Date.Day == 13)
    {
        if (!(e.CellElement is SchedulerHeaderCellElement))
        {
            e.CellElement.BackColor = Color.Red;
        }    
    }
    else
    {
        if (!(e.CellElement is SchedulerHeaderCellElement))
        {
            e.CellElement.ResetValue(VisualElement.BackColorProperty, ValueResetFlags.Local);
        }
    }
}

Private Sub radScheduler1_CellFormatting2(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.SchedulerCellEventArgs)
    If e.CellElement.Date.Month = 4 AndAlso e.CellElement.Date.Day = 13 Then
        If Not (TypeOf e.CellElement Is SchedulerHeaderCellElement) Then
            e.CellElement.BackColor = Color.Red
        End If
    Else
        If Not (TypeOf e.CellElement Is SchedulerHeaderCellElement) Then
            e.CellElement.ResetValue(VisualElement.BackColorProperty, ValueResetFlags.Local)
        End If
    End If
End Sub

As you can see in the screenshot below, the styling is now correct, because if the red cells now represent a day different from April 13, the red color is removed.

Figure 4: Formatting Correct Result

Formatting Header Cells.

We are going to make the header cells that displays the text orange, while the header cell that contains all-day appointment will become dark red:

Header Cells.

• C#
• VB.NET

void radScheduler1_CellFormatting3(object sender, Telerik.WinControls.UI.SchedulerCellEventArgs e)
{
    if (e.CellElement is SchedulerHeaderCellElement)
    {
        if (e.CellElement.Date.Month == DateTime.Now.Month && e.CellElement.Date.Day == DateTime.Now.Day)
        {
            if (e.CellElement.Parent is DayViewHeader)
            {
                e.CellElement.Text = "Birthday!";
                e.CellElement.BackColor = Color.Yellow;
                e.CellElement.GradientStyle = GradientStyles.Solid;
                e.CellElement.DrawFill = true;
            }
            else if (e.CellElement.Parent is DayViewAllDayHeader && e.CellElement.Text != "Local")
            {
                e.CellElement.DrawFill = true;
                e.CellElement.BackColor = Color.DarkRed;
            }
            else
            {
                e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
                e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
                e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
            }
        }
        else
        {
            e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
        }
    }
}

Private Sub radScheduler1_CellFormatting3(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.SchedulerCellEventArgs)
    If TypeOf e.CellElement Is SchedulerHeaderCellElement Then
        If e.CellElement.[Date].Month = DateTime.Now.Month AndAlso e.CellElement.[Date].Day = DateTime.Now.Day Then
            If TypeOf e.CellElement.Parent Is DayViewHeader Then
                e.CellElement.Text = "Birthday!"
                e.CellElement.BackColor = Color.Yellow
                e.CellElement.GradientStyle = GradientStyles.Solid
                e.CellElement.DrawFill = True
            ElseIf TypeOf e.CellElement.Parent Is DayViewAllDayHeader AndAlso e.CellElement.Text <> "Local" Then
                e.CellElement.DrawFill = True
                e.CellElement.BackColor = Color.DarkRed
            Else
                e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local)
                e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local)
                e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local)
            End If
        Else
            e.CellElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local)
            e.CellElement.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local)
            e.CellElement.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local)
        End If
    End If
End Sub

The result of the code snippet above is shown below:

Figure 5: Formatted Header Cells