Tutorial 1: Getting Started

This tutorial will show you how to create a simple timetable application with Scheduling for WPF.

1. Create a new WPF application project

Select File -> New -> Project from the Visual Studio menu. In the dialog that appears, select Visual C# -> Windows from the tree on the left, then WPF Application from the list on the right. Type in the name (of your project the tutorial uses Tutorial1) and click 'OK'.

2. Add the Calendar control to the main window

Before using the Calendar control, it must be added it to the toolbox. Display the toolbox by selecting View -> Toolbox from the menu. Then select the appropriate category for the control and right-click on it. From the context menu choose 'Choose Items...'. In the "Customize Toolbox Items" dialog select the WPF Components tab and click the 'Browse...' button. Then navigate to the control assembly file - MindFusion.Scheduling.WPF.dll. This file is usually found in the 'c:\Program Files\MindFusion\MindFusion.Scheduling for WPF' folder or in the folder where you have installed the product. Once the dll is added to the list of components, click 'OK'. A Calendar item should appear in the selected category in the toolbox. Click on this item and drag it to the window's working area. This creates a new Scheduling for WPF Calendar control on the window.

3. Setting the control's properties

Select the newly created control and click View -> Properties Window from the menu. In the Properties window change the name of the control to 'calendar' and set Margin to 0. Change CurrentView to Timetable. The timetable view displays rows of cells corresponding to the time of the day, and the cells in each column correspond to a specific date. Change Theme to Silver.

The generated XAML code so far should look similar to the following:

XAML

<planner:Calendar Name="calendar" CurrentView="Timetable" Theme="Silver" />

In order to modify various view settings through the visual designer, create a new TimetableSettings object and assign it to the TimetableSettings property of the control. Set ShowCurrentTime to true. The code which does this is displayed below:

XAML

<planner:Calendar Name="calendar" CurrentView="Timetable" Theme="Silver">
  <planner:Calendar.TimetableSettings>
    <planner:TimetableSettings ShowCurrentTime="True" />
  </planner:Calendar.TimetableSettings>
</planner:Calendar>

An alternative way to modify the settings of the view is through code. The code equivalent the above XAML is illustrated here:

C#

calendar.TimetableSettings.ShowCurrentTime = true;

Visual Basic

calendar.TimetableSettings.ShowCurrentTime = True

Note, that when the assignment is done in code, there is no need to create and assign a new TimetableSettings object.

4. Adding more days to the Timetable

Initially the timetable displays only one day - usually the day when the control was added to the form. To change the set of displayed days, you must add few lines of code. For that purpose, double-click on the window's title bar in the designer area. This switches to source code view and automatically creates an event handler for the window's Load event (named Window_Load). Add the following lines to the body of the event handler.

C#

calendar.BeginInit();
calendar.TimetableSettings.Dates.Clear();

for (int i = 0; i < 5; i++)
{
    calendar.TimetableSettings.Dates.Add(
        DateTime.Today + new TimeSpan(i, 0, 0, 0));
}

calendar.EndInit();

Visual Basic

calendar.BeginInit()
calendar.TimetableSettings.Dates.Clear()

Dim i As Integer
For i = 0 To 4

    calendar.TimetableSettings.Dates.Add(DateTime.Today.AddDays(i))

Next i

calendar.EndInit()

The code above adds five days to the timetable view, starting from today.

The first and last methods called above are used together to enclose code, which contains series of modifications to the calendar. BeginInit disables the internal update logic of the control, while EndInit resumes the control's normal behavior and updates its internal state to reflect all changes made since the call to BeginInit.

5. Build and run

Compile and run the application. The result should look similar to the image below.