Recurrence Editor

9 Oct 20173 minutes to read

The Recurrence Editor includes the entire recurrence related information in a separate portable manner which can be either utilized as a separate widget or else can be embed within the appointment window of Scheduler to enable recurrence options within it. The recurrence rule can be easily generated based on the frequency selected. The customizations like changing the labels of the recurrence editor is also possible to achieve through its properties. The frequencies available are Never, Daily, Weekly, Monthly, Yearly and Every weekday.

Getting Started

To render the Recurrence Editor control as a separate widget, the following list of external dependencies are needed,

The other required internal dependencies are tabulated below,




Must be referred always first before using all the JS controls.


Must be referred to localize any of the JS control's text and content.


Schedule core file







These files are referred for proper working of the sub-controls used within RecurrenceEditor.


Recurrence Editor uses one or more sub-controls, therefore refer the ej.web.all.min.js (which encapsulates all the ej controls and frameworks in a single file) in the application instead of referring all the above specified internal dependencies.

To get the real appearance of the Recurrence Editor, the dependent CSS file ej.web.all.min.css (which includes styles of all the widgets) should also needs to be referred.

Control Initialization

Create a div element within the body section of the HTML document, where the Recurrence Editor needs to be rendered.

  • HTML
  • <body>
    	<ej:recurrenceEditor id="RecurrenceEditor"></ej:recurrenceEditor>

    Initialize the Recurrence Editor control, by adding the following script code to the body section of the HTML document.

  • HTML
  • <body>
        <!-- div for RecurrenceEditor creation -->
        <ej:recurrenceEditor id="RecurrenceEditor"></ej:recurrenceEditor>

    Generating Recurrence Rule

    The Recurrence Editor can be used to generate the recurrence rule as a string, based on the repeat options selected.

    The following code example depicts the way to generate the recurrence rule.

  • HTML
  • <ej:recurrenceEditor id="RecurrenceEditor" selectedRecurrenceType="0" create="onCreate"></ej:recurrenceEditor>
    <ej:button id="donerecur1" size="normal" text="Recurrence String" click="onRuleGenerator"></ej:button>
  • function onCreate() {
        this.element.find("#recurrencetype_wrapper").css("width", "33%");
    function closeRecurrence() {
        var obj = $("#RecurrenceEditor").data("ejRecurrenceEditor");