Telerik UI for Windows 8 HTML

RadScheduler's default event editing supports the basic event properties with well-targeted controls. The control also allows you to customize the edit form and add editing for custom event properties. This is done by assigning a template to the editable.template property. The following help article will provide an explanation and code samples of how to customize RadScheduler's event edit form.

Note that all templates accept a string template, a function returning a string or a function returning a DOM element as template value. For more information about templates in Telerik controls, see: Templates.

This topic contains the following sections.

Binding Event Properties to Input Elements

To customize RadScheduler's edit form, you have to create it anew. You need to provide the input elements, labels and titles the user will need to set values to the various event properties from the event model. To bind an input element to a certain event property, the input element's name attribute value has to match the name of the event property. Below is a list of the basic event properties from the scheduler data model:

  • title: The title of the event which is displayed by the scheduler control. This property is of type string. You can use a text input or a textarea element with name attribute value set to "title" to enable it for editing in the customized form.

  • description: A string containing the event description. This property is of type string. This property is identical to the title property with the difference that you should set a name attribute value of "description" to enable it for editing.

  • start: The date at which the scheduler event starts. The start date is mandatory. This property is of type Date. You can use a text input element with name attribute value set to "start" to enable it for editing in the customized form. The text input value should be in the format YYYY-MM-DDTHH:mm:ss.sssZ. You can use the toISOString() method on any Date object to convert it to this format.

  • end: A Date object representing the end date of the event. This property is identical to the start property. To enable it for editing, you should add a text input element with a name attribute value set to "end".

  • isAllDay: A Boolean property indicating whether the event is an all-day event or not. To enable this property for editing in a custom edit form, add a checkbox input element with a name attribute value set to "isAllDay".

  • recurrenceRule: The recurrence rule describing the recurring pattern of the event. This property is of type string. To include this property for editing in a custom edit form, add a text input element with a name attribute value set to "recurrenceRule". The text input value should be in the format described in the iCal specification.

  • recurrenceException: A list of dates that are exceptions to the recurrence rule. A string field containing a list of semicolon-separated dates formatted using the yyyyMMddTHHmmssZ format string. The dates must be encoded in UTC. To enable the user to change the recurrence exceptions, add a text input with a name attribute set to "recurrenceException".

In Code Listing 1 you can see an example of a simple template assigned as a string. The user can edit the title and the description of the event.

Code Listing 1: Setting a Basic String Editor Template Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.getElementById("schedulerWrapper"), {
    height: 600,
    date: new Date('2013/06/06'),
    startTime: new Date("2013/6/6 08:00"),
    endTime: new Date("2013/6/6 14:00"),
    dataSource: data,
    views: ["day","week","month","agenda"],
    editable: {
        enabled: true,
        template: [
            "<label for='title'>Title:</label>",
            "<input type='text' name='title' />",
            "<label for='description'>Description:</label>",
            "<input type='text' name='description' />"
        ].join("")
    }
});

You can also add custom properties to your events and add them in your customized editor UI. Code Listing 2 shows an example of scheduler events defined with a subtitle property. An input element with a name attribute of "subtitle" is added to the edit form template, so the user can edit the property.

Code Listing 2: Setting an Editor Template with a Custom Property Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.getElementById("schedulerWrapper"), {
    height: 600,
    date: new Date('2013/06/06'),
    startTime: new Date("2013/6/6 08:00"),
    endTime: new Date("2013/6/6 14:00"),
    dataSource: data,
    views: ["day", "week", "month", "agenda"],
    editable: {
        enabled: true,
        template: [
            "<label for='title'>Title:</label>",
            "<input type='text' name='title' />",
            "<label for='subtitle'>Subtitle:</label>",
            "<input type='text' name='subtitle' />"
        ].join("")
    }
});

Adding Controls in the Editor Template

Text input fields that accept only strings in a given format are not user friendly. In a real scenario it is preferable to have UI controls as a front and the input fields hidden. Because of the nature of the WinJS and the fact that the editor UI is in a popup that renders dynamically, you might have problems if you try to declare the UI controls in the template mark-up. It is advisable to initialize the controls in JavaScript in RadScheduler's edit event handler. Furthermore, you can declare them in a setTimeout() function with a minimal timeout to ensure there will be no problems with the DOM elements while expanding/collapsing editor pop-ups.

Code Listing 3: WinJS.Binding.Template Mark-up Copy imageCopy
<div id="editorTemplate" data-win-control="WinJS.Binding.Template">
    <div id="startDatePicker"></div>
    <div id="startTimePicker"></div>
    <input type="text" id="start" name="start" />
</div>
Code Listing 4: Initializing the Controls in RadScheduler's Edit Event Handler Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.getElementById("schedulerWrapper"), {
    height: 600,
    date: new Date('2013/06/06'),
    startTime: new Date("2013/6/6 08:00"),
    endTime: new Date("2013/6/6 14:00"),
    dataSource: data,
    views: ["day", "week", "month", "agenda"],
    editable: {
        enabled: true,
        template: document.getElementById("editorTemplate").winControl
    }
});

scheduler.addEventListener("edit", function (e) {

    setTimeout(function () {
        // initializing RadDatePicker
        var startDatePicker = new Telerik.UI.RadDatePicker(document.getElementById("startDatePicker"), {
            value: e.event.start
        });
        // initializing RadTimePicker
        var startTimePicker = new Telerik.UI.RadTimePicker(document.getElementById("startTimePicker"), {
            value: e.event.start
        });
    }, 100);
});

Setting a Value to the Input Elements Programmatically

There is a two way binding between the input elements and the corresponding property values. The two way binding mechanism is triggered when the change event is triggered on the input element. This happens automatically when the user types a value and the input element loses focus. The change event is not triggered when the text input value is changed programmatically. You need to trigger it manually. Due to the nature of RadScheduler you can do this only by calling jQuery's change() method on the input element.

Code Listing 5: Using RadDatePicker and RadTimePicker to Allow the User to Choose an Event Start Date Copy imageCopy
scheduler.addEventListener("edit", function (e) {
    var input = document.getElementById("start");
    // Getting the initial start date value and splitting into date and time parts.
    var startDate = e.event.start.toISOString().split("T")[0];
    var startTime = e.event.start.toISOString().split("T")[1];

    setTimeout(function () {

        var startDatePicker = new Telerik.UI.RadDatePicker(document.getElementById("startDatePicker"), {
            value: e.event.start,
            onchange: function (e) {
                // Getting the date value from RadDatePicker and merging it with the initial start time.
                var year = e.target.value.getFullYear();
                var month = ("0" + (e.target.value.getMonth() + 1)).slice(-2);
                var day = ("0" + e.target.value.getDate()).slice(-2);
                var date = new Date(year + "-" + month + "-" + day + "T" + startTime).toISOString();

                // Setting the datetime value to the input element and triggering the change event that 
                // triggers the two way binding mechanism.
                $(input).val(date).change();
            }
        });

        var startTimePicker = new Telerik.UI.RadTimePicker(document.getElementById("startTimePicker"), {
            value: e.event.start,
            onchange: function (e) {
                // Getting the time value from RadTimePicker and merging it with the inital start date.
                var time = e.target.value.toISOString().split("T")[1];
                var date = new Date(startDate + "T" + time).toISOString();

                // Setting the datetime value to the input element and triggering the change event that 
                // triggers the two way binding mechanism.
                $(input).val(date).change();
            }
        });
    }, 100);
});

See Also