Articles in this section
Category / Section

How to customize the recurrence editor fields?

1 min read

The following steps shows the way to customize the Recurrence window.


Step 1:  Create an MVC application and include the EJMVC Schedule control in it by referring the following KB link,


Step 2:  Define the AppointmentWindowOpen event for Scheduler with appropriate handler. When the appointment window is opened, this event will raise where we can customize the recurrence window.




        .CurrentDate(new DateTime(2016, 10, 25))

        .AppointmentSettings(fields => fields.Datasource(ViewBag.datasource)









            .ScheduleClientSideEvents(evt =>




Step 3: OnAppointmentWindowOpen is an event handler function within which the code to customize the recurrence window is defined like how to change the frequencies, make end date read only, hide the radio buttons available to select end date as shown in the below code example.

function OnAppointmentWindowOpen() {

        this._appointmentAddWindow.find(".e-recurrenceeditor").ejRecurrenceEditor({ frequencies: ["daily", "weekly", "monthly"] });

        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("#endsonuntil").find("#" + this._id + "_daily").ejDatePicker({ readOnly: true });

                this.element.find(".recurcount").ejNumericTextbox({ value: 5, readOnly: true });

                this.element.find('.monthposition').ejRadioButton({ checked: true });

                if (this._rRuleFreq != "WEEKLY")

                    recurEdit._recurrenceContent.find("#" + recurEdit._id + "_every").addClass("custom");


                    recurEdit._recurrenceContent.find("#" + recurEdit._id + "_every").removeClass("custom");








Step 4: Add the below class under style section to hide the specific controls from UI.


    .custom {

        display: none !important;





Step 5: Run the above sample and the recurrence window will be customized as shown below.

Customized recurrence window

Figure 1: Customized recurrence window.

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