Telerik UI for Windows 8 HTML

RadScheduler supports four types of views—day, week, month and agenda. This article will describe each view and will show you how to customize and edit events in different views.

This topic contains the following sections.

View Types

The following views are available in RadScheduler:

  • day: Displays the events in single day.

  • week: Displays the events in a whole week.

  • month: Displays the events in a single month.

  • agenda: Displays the events from the current date till next week (7 days).

By default, RadScheduler displays the day and week views. If you want to display a different set of views, set the views property to an array of objects describing the views. If you want to use the default settings for all views and simply change the available set of views, you can set the property to an array of strings as shown in Code Listing 1 below.

Code Listing 1: Changing the Available Views Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: [
        { start: new Date(2013, 8, 16, 9), end: new Date(2013, 8, 16, 10), title: "Breakfast with Marta" },
        { start: new Date(2013, 8, 16, 10, 30), end: new Date(2013, 8, 16, 11, 30), title: "Meeting with Paul West" },
        { start: new Date(2013, 8, 16, 12), end: new Date(2013, 8, 16, 13), title: "Lunch with Jane Peterson" }
    ],
    views: ["week", "agenda"]
});

Customizing Views

You can apply various settings to RadScheduler views. This section describes the basic options that you can use.

  • type: Sets the type of the view. The available views are: "day", "week", "month" and "agenda".

  • selected: Sets whether the view will be the default selected view. It is meaningful to set only one view's selected property to true. By default, the selected view is "day".

  • allDaySlot: Using this property, you can determine whether the current view will display a slot for all day events.

  • startTime: The start time of the view. The scheduler will display events starting after the start time.

  • endTime: The end time of the view. The scheduler will display events ending before the end time.

  • majorTick: The number of minutes represented by a major tick (major slot in the view). The majorTick option is supported when views.type is set to "day" or "week".

  • minorTickCount: The number of time slots to display per major tick. The majorTick option is supported when views.type is set to "day" or "week".

  • selectedDateFormat: The format used to display the selected date. The formats that you can use are listed in this article: Formatting. The format string contains two placeholders - "{0}" and "{1}" which represent the start and end date displayed by the view.

  • eventHeight: The height of the scheduler event rendered in month view.

Code Listing 2 below shows a RadScheduler with customized views. All of the options listed above are applied in the relevant views.

Code Listing 2: Customizing the Visible Views Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: data,
    date: new Date(2013, 8, 16),
    views: [
        {
            type: "day",
            startTime: new Date(2013, 8, 16, 9), // The time part only is taken into account.
            endTime: new Date(2013, 8, 16, 18), // The time part only is taken into account.
            majorTick: 120, // A major tick consists of 120 minutes.
            minorTickCount: 4, // A minor tick is available for every 30 minutes.
            selectedDateFormat: "{0:dd/MM/yyyy}"
        },
        {
            type: "week",
            startTime: new Date(2013, 8, 16, 9),
            endTime: new Date(2013, 8, 16, 18),
            selectedDateFormat: "{0:dd/MM/yyyy} - {1:dd/MM/yyyy}"
        },
        {
            type: "agenda",
            selected: true, // The default visible view is "agenda".
            startTime: new Date(2013, 8, 16, 9),
            endTime: new Date(2013, 8, 16, 18)
        },
        {
            type: "month",
            eventHeight: 50 // The box displaying the event in month view is 50px high.
        }
    ]
});

Changing Group Orientation

RadScheduler allows you to group its events by resource type. You can enable grouping using the group property of the control. This is described in more detail here:RadScheduler Grouping. Using the events settings, you can specify for each view separately whether grouping will be horizontal or vertical. To specify an orientation for groups, set the group.orientation property of the current view either to "horizontal" or "vertical". The agenda view is the only exception where grouping is always vertical.

CodeListing 3 shows how group orientation can be set on per view basis.

Code Listing 3: Modifying Group Orientation Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: data,
    date: new Date(2013, 8, 16),
    views: [
        {
            type: "day",
            startTime: new Date(2013, 8, 16, 9),
            group: {
                orientation: "vertical"
            }
        },
        {
            type: "week",
            startTime: new Date(2013, 8, 16, 9),
            group: {
                orientation: "horizontal"
            }
        },
        {
            type: "month",
            group: {
                orientation: "vertical"
            }
        }
    ],
    resources: [
        {
            field: "roomId",
            title: "Room",
            name: "Room",
            dataSource: [
              { text: "Small meeting room", value: 1, color: "pink" },
              { text: "Big meeting room", value: 2, color: "purple" }
            ]
        }
    ],
    group: {
        resources: ["Room"]
    }
});

Using Templates in Views

RadScheduler exposes templates for any part of the different views. They allow you to customize the look and content of the various parts of the different views. You can ready detailed information about templates here: RadScheduler View Templates.