Edit this page

Getting Started

This tutorial will walk you through the creation of a sample application that contains RadScheduleView.

Assembly References

In order to use the RadScheduleView control in your projects, you have to add references to the following assemblies:

  • Telerik.Windows.Controls
  • Telerik.Windows.Controls.Input
  • Telerik.Windows.Controls.Navigation
  • Telerik.Windows.Controls.ScheduleView
  • Telerik.Windows.Data

Adding RadScheduleView to the Project

Before proceeding with adding RadScheduleView to your project, make sure the required assembly references are added to the project.

You can add RadScheduleView manually by writing the XAML code in Example 1. You can also add the control by dragging it from the Visual Studio Toolbox and dropping it over the XAML view.

Example 1: Adding RadScheduleView in XAML

<telerik:RadScheduleView />     

In order to use RadScheduleView in XAML you have to add the following namespace declaration:

Example 2: Declaring Telerik Namespace


If you run the application, you will see an empty ScheduleView with a message saying that AppointmentsSource should be provided as demonstrated in Figure 1.

Figure1: The empty ScheduleView generated by the code in Example 1

Populating with Data

In order to populate RadScheduleView with data, you should bind its AppointmentsSource property to a collection of Appointment objects. First, create a ViewModel class containing an ObservableCollection of Appointments as shown in Example 3.

Example 3: View Model containing an ObservableCollection of Appointments

public class MyViewModel
{
    private ObservableCollection<Appointment> appointments;

    public ObservableCollection<Appointment> Appointments
    {
        get
        {
            if (this.appointments == null)
            {
                this.appointments = this.CreateAppointments();
            }
            return this.appointments;
        }         
    }

    private ObservableCollection<Appointment> CreateAppointments()
    {
        ObservableCollection<Appointment> apps = new ObservableCollection<Appointment>();

        var app1 = new Appointment()
        {
            Subject = "Front-End Meeting",
            Start = DateTime.Today.AddHours(9),
            End = DateTime.Today.AddHours(10)
        };
        apps.Add(app1);

        var app2 = new Appointment()
        {
            Subject = "Planning Meeting",
            Start = DateTime.Today.AddHours(11),
            End = DateTime.Today.AddHours(12)
        };
        apps.Add(app2);

    return apps;
    }   
}
Public Class MyViewModel

    Private m_appointments As ObservableCollection(Of Appointment)

    Public ReadOnly Property Appointments() As ObservableCollection(Of Appointment)
        Get
            If Me.m_appointments Is Nothing Then
                Me.m_appointments = Me.CreateAppointments()
            End If
            Return Me.m_appointments
        End Get
    End Property

    Private Function CreateAppointments() As ObservableCollection(Of Appointment)
        Dim apps As New ObservableCollection(Of Appointment)()

        Dim app1 As New Appointment() With {
            .Subject = "Front-End Meeting",
            .Start = DateTime.Today.AddHours(9),
            .[End] = DateTime.Today.AddHours(10)
        }
        apps.Add(app1)

        Dim app2 = New Appointment() With {
            .Subject = "Planning Meeting",
            .Start = DateTime.Today.AddHours(11),
            .[End] = DateTime.Today.AddHours(12)
        }
        apps.Add(app2)

        Return apps
    End Function
End Class

Now that you have prepared the needed sample data, it is time to bind RadScheduleView to it. For that purpose, you should set the RadScheduleView's AppointmentsSource property to the collection of Appointments.

Example 4 demonstrates how you can bind the AppointmentsSource collection in XAML. The local namespace in the example corresponds to the namespace where MyViewModel resides.

Example 4: Bind RadScheduleView

<Grid.Resources>
    <local:MyViewModel x:Key="MyViewModel" />
</Grid.Resources>
<telerik:RadScheduleView DataContext="{StaticResource MyViewModel}"  AppointmentsSource="{Binding Appointments}" />

If you run the application at this stage, you will again see an empty ScheduleView with a message saying that a View Definition should be selected as shown in Figure 2.

Figure2: The empty ScheduleView generated by the code in Example 4

Adding ViewDefinitions

Example 5 demonstrates how you can add a DayViewDefinition to the RadScheduleView control:

Example 5: Add DayViewDefinition

<telerik:RadScheduleView DataContext="{StaticResource MyViewModel}" AppointmentsSource="{Binding Appointments}">
    <telerik:RadScheduleView.ViewDefinitions>
        <telerik:DayViewDefinition />
    </telerik:RadScheduleView.ViewDefinitions>
</telerik:RadScheduleView>

You can add more than one ViewDefinition. There are four view definitions available:

  • DayViewDefinition
  • WeekViewDefinition
  • TimelineViewDefinition
  • MonthViewDefinition

For additional details, see the ViewDefinitions Overview topic.

Running the application containing the code from Examples 1 - 5 will result in a populated RadScheduleView, similar to Figure 3.

Figure 3: RadScheduleView bound to a collection of Appointments

Resources, Grouping

Using Resources you can associate additional information with the Appointments. Moreover, you can group the Appointments in RadScheduleView according to the Resources assigned to them. For detailed information on this functionality, see the Resources topic.

Setting a Theme

The controls from our suite support different themes. You can see how to apply a theme different than the default one in the Setting a Theme help article.

Changing the theme using implicit styles will affect all controls that have styles defined in the merged resource dictionaries. This is applicable only for the controls in the scope in which the resources are merged.

To change the theme, you can follow the steps below:

  • Choose between the themes and add reference to the corresponding theme assembly (ex: Telerik.Windows.Themes.Windows8.dll). You can see the different themes applied in the Theming examples from our WPF Controls Examples application.

  • Merge the ResourceDictionaries with the namespace required for the controls that you are using from the theme assembly. For RadScheduleView, you will need to merge the following resources:

    • Telerik.Windows.Controls
    • Telerik.Windows.Controls.Input
    • Telerik.Windows.Controls.Navigation
    • Telerik.Windows.Controls.ScheduleView

Example 8 demonstrates how to merge the ResourceDictionaries so that they are applied globally for the entire application.

Example 8: Merge the ResourceDictionaries

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/System.Windows.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.ScheduleView.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

Figure 4 shows RadScheduleView with the Windows8 theme applied.

Figure 4: RadScheduleView with the Windows8 theme

RadScheduleView with Windows8 theme

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy