Recurrence Editor

21 Sep 20234 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,

jQuery - 1.7.1 and later versions
jsRender - to render the templates
jQuery.easing - to support animation effects in the components

The other required internal dependencies are tabulated below,

File	Description/Usage
ej.core.min.js	Must be referred always first before using all the JS controls.
ej.globalize.min.js	Must be referred to localize any of the JS control's text and content.
ej.recurrenceeditor.min.js	Schedule core file
ej.scroller.min.js ej.datepicker.min.js ej.checkbox.min.js ej.editor.min.js ej.dropdownlist.min.js ej.radiobutton.min.js	These files are referred for proper working of the sub-controls used within RecurrenceEditor.

NOTE

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

<template>
    <div>
        <ej-recurrence-editor id="RecurrenceEditor"></ej-recurrence-editor>
    </div>
</template>

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

HTML

<template>
    <div>
        <ej-recurrence-editor id="RecurrenceEditor"></ej-recurrence-editor>
    </div>
</template>

JAVASCRIPT

export class Schedule {
    constructor() {

    }
}

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

<template>
    <div>
        <ej-recurrence-editor id="RecurrenceEditor" e-selected-recurrence-type="2" e-on-create.trigger="onCreate($event)"></ej-recurrence-editor>
        <ej-button e-width="155px" e-height="35px" e-on-click.trigger="closeRecurrence($event)"></ej-button>
    </div>
</template>

JAVASCRIPT

export class RecurrenceEditor {
    onCreate() {
        this.element.find("#recurrencetype_wrapper").css("width", "33%");
    }
    closeRecurrence() {
        let obj = $("#RecurrenceEditor").data("ejRecurrenceEditor");
        alert(obj.getRecurrenceRule());
    }
    constructor() {

    }
    attached() {
        $("#RecurrenceEditor").after($("#donerecur1"));
    }
}