Telerik UI for Windows 8 HTML

The following help article will introduce you to the common properties of RadScheduler you can configure. The article provides property descriptions, available property values and configuration examples.

This topic contains the following sections.

Setting RadScheduler Size

Following are the two properties you can use to set RadScheduler's size.

  • height: Use this property to get or set the height of the control in pixels.

  • width: Use this property to get or set the width of the control in pixels.

Code Listing 1: Setting RadScheduler Size Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    width: 600,
    height: 480,
    dataSource: data
});

Hiding the All-Day Events Slot

Use the allDaySlot property if you want to hide the slot for all-day events in day and week views. You can do this by setting the property value to false. The default property value is true.

Code Listing 2: Hiding the All-Day Events Slot Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    allDaySlot: false,
    dataSource: data
});

You can also customize the appearance of all-day events by setting templates. For detailed information on how to do that, refer to the related topics at the bottom of the article.

Date and Time Properties

RadScheduler exposes a number of properties that allow you to modify the current date, set a starting and ending hour for the day and customize the major and minor time ticks. Below is a list of these properties with brief descriptions:

  • date: Use this property to set the current date of the control. This property accepts only valid Date objects.

  • startTime: Use this property to specify a starting hour and minutes for each day in RadScheduler. The property accepts a valid Date object and takes only the hours and minutes part. Only events that start after the start time, will be visualized in the scheduler.

  • endTime: Use this property to specify an ending hour and minutes for each day in RadScheduler. The property accepts a valid Date object and takes only the hours and minutes part. Only events that end before the end time, will be visualized in the scheduler.

  • majorTick: This property holds the amount of time in minutes between the major time ticks. They are shown only in week and day view. The default property value is 60 minutes.

  • minorTickCount: This property holds the number of minor ticks there are between two major ticks. The default property value is 2.

Code Listing 3: Configuring Date and Time Properties Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    // sets the scheduler's today date to be 6th June 2013.
    date: new Date("2013/6/6"),
    // sets the starting hour to be 8 AM. The hour will be applied to every day regardless of the date.
    startTime: new Date("2013/6/6 08:00"),
    // sets the ending hour to be 2 PM. The hour will be applied to every day regardless of the date.
    endTime: new Date("2013/6/6 14:00"),
    // sets the span between major ticks to be an hour and a half or 90 minutes.
    majorTick: 90,
    // sets the number of minor ticks between two major ticks to be three.
    minorTickCount: 3,
    dataSource: data
});

You can also customize the appearance of the major and minor time ticks, and the date headers in day and week view by setting templates. For detailed information on how to do that, refer to the related topics below.

See Also