Edit this page

Configuration

RadScheduleView's four predefined ViewDefinitions have various properties, which can be set in order the views to be configured best. Some of them are common for all views, others are specific for each view. In the following section we will go through all common properties.

For more information about the view specific properties, check here.

Title

Gets or sets the title of the view.LargeChangeInterval

LargeChangeInterval

Gets or sets the date time interval with which the current will be increased or decreased when clicking on the navigation buttons in the header of the ScheduleView. The default values of the LargeChangeInterval property are:

  • 1d (1 day) for DayView

  • 7d (7 days) for WeekView

  • 1m (1 month) for MonthView

  • 7d (7 days) for TimelineView

The property is of type DateTimeInterval. In the following example the LargeChangeInterval property of DayView is set to 2 days and of MonthView is set of 2 months and 4 days.

Example 1: Setting the LargeChangeInterval property in XAML

<telerik:RadScheduleView x:Name="scheduleView" AppointmentsSource="{Binding Appointments}">
    <telerik:RadScheduleView.ViewDefinitions>
        <telerik:DayViewDefinition LargeChangeInterval="2d"/>
        <telerik:MonthViewDefinition LargeChangeInterval="2m 4d"/>
    </telerik:RadScheduleView.ViewDefinitions>
</telerik:RadScheduleView>

Example 2: Setting the LargeChangeInterval property in code

dayDefintion.LargeChangeInterval = new Telerik.Windows.Controls.ScheduleView.
DateTimeInterval(2, 0);
monthDefinition.LargeChangeInterval = new Telerik.Windows.Controls.ScheduleView.
DateTimeInterval(4, 2);

SmallChangeInterval

Gets or sets the small change interval of the ScheduleView. It indicates the date time interval with which the current will be increased or decreased when moving the scrollbar. The default values of the SmallChangeInterval are:

  • 7d (7 days) for MonthView

  • 1d (1 day) for TimelineView

Setting the SmallChangeInterval property of a DayViewDefiniton and WeekViewDefinition won’t change the behavior of the view. That is due to that using the vertical scrollbar will not navigate to the next set of days, but will scroll the current view.

The following example shows how to set the SmallChangeInterval property of a MonthViewDefinition to 11 days and of a TimelineViewDefinition to 3 days:

Example 3: Setting the SmallChangeInterval property in XAML

<telerik:RadScheduleView x:Name="scheduleView" AppointmentsSource="{Binding Appointments}">
    <telerik:RadScheduleView.ViewDefinitions>
        <telerik:MonthViewDefinition SmallChangeInterval="11d"/>
        <telerik:TimelineViewDefinition SmallChangeInterval="3d"/>
    </telerik:RadScheduleView.ViewDefinitions>
</telerik:RadScheduleView>

Example 4: Setting the SmallChangeInterval property in code

monthDefintion.SmallChangeInterval = new Telerik.Windows.Controls.ScheduleView.
DateTimeInterval(11, 0);
timelineDefinition.SmallChangeInterval = new Telerik.Windows.Controls.ScheduleView.
DateTimeInterval(3, 0);

DayStartTime

Gets or sets the time used to indicate the start of the TimeRuler. The default value of the DayStartTime for all views is 00:00:00 or 12:00 AM.

The DayStartTime is of type TimeSpan. It will not affect the look of the MonthView, since MonthView does not display time.

The following example illustrates how to set the DayStartTime for DayView, WeekView and TimelineView:

Example 5: Setting the DateStartTime property in XAML

<telerik:RadScheduleView x:Name="scheduleView" AppointmentsSource="{Binding Appointments}">
    <telerik:RadScheduleView.ViewDefinitions>
        <telerik:DayViewDefinition DayStartTime="07:30:00"/>
        <telerik:WeekViewDefinition DayStartTime="08:00:00"/>
        <telerik:TimelineViewDefinition DayStartTime="11:30:00"/>
    </telerik:RadScheduleView.ViewDefinitions>
</telerik:RadScheduleView>

Example 6: Setting the DateStartTime property in code

dayDefintion.DayStartTime = new TimeSpan(7, 30, 00);
weekDefinition.DayStartTime = new TimeSpan(8, 0, 0);
timelineDefinition.DayStartTime = new TimeSpan(11, 30, 0);

DayEndTime

Gets or sets the time used to indicate the end of the view. The default values of the DayStartTime for the view are:

  • 1.00:00:00 (1 day) for DayView

  • 1.00:00:00 (1 day) for WeekView

  • 1.00:00:00 (1 day) for TimelineView

The DayEndTime property is of type TimeSpan. The MonthView will be affected in the following manner – if there are appointments out of the displayed time range, they won’t be displayed in the MonthView also.

The following example illustrates how to set the DayStartTime for DayView, WeekView and TimelineView:

Example 7: Setting the DayEndTime property in XAML

<telerik:RadScheduleView x:Name="scheduleView" AppointmentsSource="{Binding Appointments}">
    <telerik:RadScheduleView.ViewDefinitions>
        <telerik:DayViewDefinition DayEndTime="17:30:00"/>
        <telerik:WeekViewDefinition DayEndTime="18:00:00"/>
        <telerik:TimelineViewDefinition DayEndTime="21:30:00"/>
    </telerik:RadScheduleView.ViewDefinitions>
</telerik:RadScheduleView>

Example 8: Setting the DayEndTime property in code

dayDefintion.DayEndTime = new TimeSpan(17, 30, 00);
weekDefinition.DayEndTime = new TimeSpan(18, 0, 0);
timelineDefinition.DayEndTime = new TimeSpan(21, 30, 0);

VisibleDays

Gets or sets the visible dates in the view. It indicates the count of the dates that will be shown in the view. The default values of the VisibleDays property are:

  • 1 day for DayView

  • 7 days for WeekView

  • 42 days for MonthView

  • 7 days for TimelineView

The following code-snippet illustrates how to set the VisibleDays property in XAML and in code-behind for all predefined views:

Example 9: Setting the VisibleDays property in XAML

<telerik:RadScheduleView x:Name="scheduleView" AppointmentsSource="{Binding Appointments}">
    <telerik:RadScheduleView.ViewDefinitions>
        <telerik:DayViewDefinition VisibleDays="4"/>
        <telerik:WeekViewDefinition VisibleDays="11"/>
        <telerik:MonthViewDefinition VisibleDays="21" />
        <telerik:TimelineViewDefinition VisibleDays="9"/>
    </telerik:RadScheduleView.ViewDefinitions>
</telerik:RadScheduleView>

Example 10: Setting the VisibleDays property in code

dayDefintion.VisibleDays = 4;
weekDefinition.VisibleDays = 11;
monthDefintion.VisibleDays = 21;
timelineDefinition.VisibleDays = 9;

And the result is shown on the next figure for DayViewDefinition:

Figure 1: RadScheduleView with VisibleDays set

radschedule View viewdefinitions configuration 01

FirstDayOfWeek

Gets or sets the first weekday with which the week will start according to the view. It affects only the WeekView and MonthView. Once set, it will override the FirstDayOfWeek property of the ScheduleView and the one that is default for the culture.

StretchGroupHeaders

If set to True (default value) and there is more available space in the ViewDefintion left, it will be distributed among the groups.

The following code-snippet shows how to set StretchGroupHeaders to DayViewDefinition:

Example 11: Setting the StretchGroupHeaders property

<telerik:RadScheduleView x:Name="scheduleView" AppointmentsSource="{Binding Appointments}" >        
    <telerik:RadScheduleView.ViewDefinitions>
        <telerik:DayViewDefinition VisibleDays="3" StretchGroupHeaders="False"  />           
    </telerik:RadScheduleView.ViewDefinitions>
</telerik:RadScheduleView>

The next figure displays the how DayViewDefinition will look depending on the StretchGroupHeaders property:

Figure 2: RadScheduleView with StretchGroupHeaders set

Orientation

Gets or sets the orientation of the view. When the orientation is horizontal the TimeRuler is also horizontally oriented, but the GroupHeaders are oriented vertically and vice versa.

Values can be Vertical or Horizontal. Not present in MonthView. This is measured according to the position of the TimeRuler. The default values of Orientation property are:

  • Vertical for DayView

  • Vertical for WeekView

  • Horizontal for TimelineView

The following code-snippets show how to set the Orientation property in XAML and code-behind:

Example 12: Setting the Orientation property in XAML

<telerik:RadScheduleView x:Name="scheduleView" AppointmentsSource="{Binding Appointments}">
    <telerik:RadScheduleView.ViewDefinitions>
        <telerik:DayViewDefinition Orientation="Horizontal" />
        <telerik:WeekViewDefinition Orientation="Horizontal"/>
        <telerik:TimelineViewDefinition Orientation="Vertical"/>
    </telerik:RadScheduleView.ViewDefinitions>
</telerik:RadScheduleView>

Example 13: Setting the Orientation property in code

dayDefintion.Orientation = Orientation.Horizontal;
weekDefinition.Orientation = Orientation.Horizontal;
timelineDefinition.Orientation = Orientation.Vertical;

This is how the views look like after setting the Orientation property:

DayView with Orientation property set to Horizontal.

Figure 3: DayView with Horizontal Orientation

radschedule View viewdefinitions configuration 05

WeekView with Orientation property set to Horizontal.

Figure 4: WeekView with Horizontal Orientation

radschedule View viewdefinitions configuration 06

TimelineView with Orientation property set to Vertical.

Figure 5: TimelineView with Horizontal Orientation

radschedule View viewdefinitions configuration 07

GroupFilter

The GroupFilter property can be used when in a grouped scenario a given group needs to be excluded. It is a predicate that takes a given group as a parameter and returns a boolean value determining whether the group should take part in the grouping operation or not. The following example demonstrates how RadScheduleView can display only weekends or only working days through its GroupFilter.

Example 14: Defining the GroupFilter predicate in the view model

public class MyViewModel : ExampleViewModel<Appointment>
{
     private Func<object, bool> groupFilter;

     public MyViewModel()
     {
         this.groupFilter = new Func<object, bool>(this.GroupFilterFunc);
     }

     public Func<object, bool> GroupFilter
     {
         get
         {
             return this.groupFilter;
         }
         private set
         {
             if (this.groupFilter != value)
             {
                 this.groupFilter = value;
                 this.OnPropertyChanged(() => this.GroupFilter);
             }
         }
     }

     private bool GroupFilterFunc(object groupName)
     {
         if (groupName is DateTime)
         {
             return ((DateTime)groupName).DayOfWeek == DayOfWeek.Saturday
                 || ((DateTime)groupName).DayOfWeek == DayOfWeek.Sunday;
         }
         return true;
     }
}

Example 15: Applying the GroupFilter to a WeekView

<telerik:RadScheduleView AppointmentsSource="{Binding Appointments}">
        <telerik:RadScheduleView.ViewDefinitions>
            <telerik:WeekViewDefinition GroupFilter="{Binding GroupFilter}" DayStartTime="08:00" DayEndTime="20:00"/>
        </telerik:RadScheduleView.ViewDefinitions>

The result of setting the GroupFilter will be as in the following figure:

Figure 6: WeekView with applied GroupFilter

radschedule View viewdefinitions configuration 07

SubGroupsFilter

As of R2 2017 RadScheduleView exposes the SubGroupsFilter mechanism. It provides the option to control whether a given item should be visible in a particular group or not. The following example demonstrates how RadScheduleView can be populated with some sample Resources and how they can be visualized in a given group and hidden in another.

Example 16: Defining the SubGroupsFilter in the view model

public class MyViewModel : ExampleViewModel<Appointment>
{
     private Func<IGroupInfo, bool> subGroupsFilter;

     public MyViewModel()
     {
        this.subGroupsFilter = new Func<IGroupInfo, bool>(this.FilterSpeakersByRooms);
     }

    public Func<IGroupInfo, bool> SubGroupsFilter
    {
        get
        {
            return this.subGroupsFilter;
        }
        private set
        {
            this.subGroupsFilter = value;
            this.OnPropertyChanged(() => this.SubGroupsFilter);
        }
    }

    private bool FilterSpeakersByRooms(IGroupInfo groupInfo)
    {
        if (groupInfo != null)
        {
            var currentResource = groupInfo.Name as Resource;

            var parentResource = groupInfo.ParentGroupInfo.Name as Resource;

            if (currentResource != null && parentResource != null)
            {
                // John Steel has only Expert level subjects.
                if (currentResource.ResourceType == "Speaker")
                {
                    if (currentResource.ResourceName == "John Steel" && parentResource.ResourceName != "Expert")
                    {
                        return false;
                    }

                    // Howard Snyder has only Basic and Advanced level subjects.
                    if (currentResource.ResourceName == "Howard Snyder" && parentResource.ResourceName == "Expert")
                    {
                        return false;
                    }

                    // Martine Rance has only Basic level subjects.
                    if (currentResource.ResourceName == "Martine Rance" && parentResource.ResourceName != "Basic")
                    {
                        return false;
                    }

                    // Daniel Tonini has only Advanced level subjects.
                    if (currentResource.ResourceName == "Daniel Tonini" && parentResource.ResourceName != "Advanced")
                    {
                        return false;
                    }
                }
            }

            DateTime date;
            // Hide the Advanced subgroup for the days that have no advanced subjects.
            if (DateTime.TryParse(groupInfo.ParentGroupInfo.Name.ToString(), out date))
            {
                if (currentResource.ResourceName == "Basic" && (date.DayOfWeek >= DayOfWeek.Friday || date.DayOfWeek == DayOfWeek.Sunday))
                {
                    return false;
                }
            }
        }

        return true;
    }
}

Example 17: Populating RadScheduleView with Resources and binding the SubGroupsFilter

<telerik:RadScheduleView AppointmentsSource="{Binding Appointments}">
        <telerik:RadScheduleView.ViewDefinitions>
            <telerik:WeekViewDefinition SubGroupsFilter="{Binding SubGroupsFilter}"/>
        </telerik:RadScheduleView.ViewDefinitions>
        <telerik:RadScheduleView.ResourceTypesSource>
            <telerik:ResourceTypeCollection>
                <telerik:ResourceType Name="Speaker">
                    <telerik:Resource ResourceName="Sven Ottlieb" />
                    <telerik:Resource ResourceName="Martine Rance" />
                    <telerik:Resource ResourceName="Howard Snyder" />
                    <telerik:Resource ResourceName="Daniel Tonini" />
                    <telerik:Resource ResourceName="John Steel" />
                </telerik:ResourceType>
                <telerik:ResourceType Name="Level">
                    <telerik:Resource ResourceName="Basic" />
                    <telerik:Resource ResourceName="Advanced" />
                    <telerik:Resource ResourceName="Expert" />
                </telerik:ResourceType>
            </telerik:ResourceTypeCollection>
        </telerik:RadScheduleView.ResourceTypesSource>
        <telerik:RadScheduleView.GroupDescriptionsSource>
            <telerik:GroupDescriptionCollection >
                <telerik:DateGroupDescription />
                <telerik:ResourceGroupDescription ResourceType="Level" />
                <telerik:ResourceGroupDescription ResourceType="Speaker" />
            </telerik:GroupDescriptionCollection>
        </telerik:RadScheduleView.GroupDescriptionsSource>
    </telerik:RadScheduleView>

The end result will be as in the figure below:

Figure 7: WeekView with applied SubGroupsFilter

radschedule View viewdefinitions configuration 07

See Also