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 theej
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.
<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.
<template>
<div>
<ej-recurrence-editor id="RecurrenceEditor"></ej-recurrence-editor>
</div>
</template>
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.
<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>
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"));
}
}