Articles in this section
Category / Section

How to customize the Recurrence editor?

1 min read

The following steps shows the way to customize the recurrence editor.


Step 1:  Create a scheduler default sample and bind the appointmentWindowOpen event as shown below,  

$(function () {
                width: "100%",
                height: "525px",
                currentDate: new Date(2014, 4, 5),
                appointmentSettings: {
                    dataSource: [],
                    id: "Id",
                    subject: "Subject",
                    startTime: "StartTime",
                    endTime: "EndTime",
                    description: "Description",
                    allDay: "AllDay",
                    recurrence: "Recurrence",
                    recurrenceRule: "RecurrenceRule"
                appointmentWindowOpen: "OnAppointmentWindowOpen"


Step 2: Define the appointmentWindowOpen event function OnAppointmentWindowOpen which contains the code to customize the recurrence editor. The following code example shows the logic.

function OnAppointmentWindowOpen() {
    this._appointmentAddWindow.find(".e-recurrenceeditor").ejRecurrenceEditor({ frequencies: ["daily", "weekly", "monthly"] }); // Repeat field is customized
    if (this._appointmentAddWindow.find(".e-recurrenceeditor").children().eq(0).hasClass("e-floatright")) {
        var element = this._appointmentAddWindow.find(".e-recurrenceeditor").children();
        element[0].parentNode.replaceChild(element[0], element[1]);
        element[0].parentNode.insertBefore(element[1], element[0]);
    var recurEdit = this._appointmentAddWindow.find(".e-recurrenceeditor").data("ejRecurrenceEditor");
        change: function (args) {
            this.element.find('.monthposition').ejRadioButton({ checked: true });
            this.element.find('.e-recuruntil').ejRadioButton({ checked: true });
            // Every field is customized
            if (this._rRuleFreq != "WEEKLY")
                recurEdit._recurrenceContent.find("#" + recurEdit._id + "_every").addClass("custom");
                recurEdit._recurrenceContent.find("#" + recurEdit._id + "_every").removeClass("custom"); 
    // Ends fields are customized




Step 3: Run the above sample and the recurrence editor is customized as shown below.

Scheduler with customized recurrence editor in JavaScript

Figure 1: Scheduler with customized recurrence editor.

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment