ejRecurrenceEditor
11 Jul 201815 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.
Syntax
$(element).ejRecurrenceEditor()
Example
<div id="RecurrenceEditor"></div>
<script>
$('#RecurrenceEditor').ejRecurrenceEditor();
</script>
Requires
- module:jQuery
- module:jquery.easing.min.js
- module:jsrender.min.js
- module:ej.globalize.min.js
- module:ej.core.js
- module:ej.recurrenceeditor.js
- module:ej.scroller.js
- module:ej.radiobutton.js
- module:ej.editor.js
- module:ej.dropdownlist.js
- module:ej.checkbox.js
- module:ej.datepicker.js
Members
frequencies array
Defines the collection of recurrence frequencies within Recurrence Editor such as Never, Daily, Weekly, Monthly, Yearly and Every Weekday.
Default Value
- [“never”, “daily”, “weekly”, “monthly”, “yearly”, “everyweekday”]
Example - To set frequencies for Recurrence Editor.
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
frequencies: ["daily", "weekly", "monthly", "yearly", "everyweekday"]
});
});
</script>
firstDayOfWeek string
Sets the starting day of the week.
Default Value
- null
Example - To set Tuesday as starting day of the week.
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
firstDayOfWeek: "Tuesday"
});
});
</script>
enableSpinners boolean
When set to true, enables the spin button of numeric textboxes within the Recurrence Editor.
Default Value
- true
Example - To disable the spin button of numeric textboxes within Recurrence Editor.
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
enableSpinners: false
});
});
</script>
startDate object
Sets the start date of the recurrence. The Recurrence Editor initially displays the current date as its start date.
Default Value
- new Date()
Example - To set the specific starting date of Recurrence Editor.
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
startDate:new Date(2014,4,5)
});
});
</script>
locale string
Sets the specific culture to the Recurrence Editor.
Default Value
- “en-US”
Example - To set the French culture on Recurrence Editor, set its locale as fr-FR.
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
locale: "fr-FR"
});
});
</script>
To set any culture for Recurrence Editor, refer to the required minified globalize files of the specific culture. For example, to use fr-FR culture in Recurrence Editor, refer to the globalize.culture.fr-FR.min.js script file. Also define the locale words of that specific culture properly. For example, define the locale words for fr-FR culture in a variable ej.RecurrenceEditor.Locale[“fr-FR”] = { }; under script section.
dateFormat string
Sets the date format for the datepickers available within the Recurrence Editor.
Default Value
- ””
Example - To set the date format for Recurrence Editor.
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
dateFormat: "yyyy-MM-dd"
});
});
</script>
enableRTL boolean
When set to true, renders the Recurrence Editor options from Right-to-Left direction.
Default Value
- false
Example - To set the enableRTL property for Recurrence Editor.
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
enableRTL: true
});
});
</script>
selectedRecurrenceType number
Sets the active/current repeat type(frequency) on Recurrence Editor based on the index value provided. For example, setting the value 1 will initially set the repeat type as Daily
and display its related options.
Default Value
- 0
Example - To set the specific recurrence type for Recurrence Editor.
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
selectedRecurrenceType: 0
});
});
</script>
minDate object
Sets the minimum date limit to display on the datepickers defined within the Recurrence Editor. Setting minDate with specific date value disallows the datepickers within Recurrence Editor to navigate beyond that date.
Default Value
- new Date(1900, 01, 01)
Example - To set the minimum date on the Recurrence Editor.
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
startDate: new Date(2014, 04, 05),
minDate: new Date(2014, 04, 03),
});
});
</script>
maxDate object
Sets the maximum date limit to display on the datepickers used within the Recurrence Editor. Setting maxDate with specific date value disallows the datepickers within the Recurrence Editor to navigate beyond that date.
Default Value
- new Date(2099, 12, 31)
Example - To set the maximum date on the Recurrence Editor.
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
startDate: new Date(2014, 04, 05),
maxDate: new Date(2014, 04, 06),
});
});
</script>
cssClass string
Accepts the custom CSS class name, that defines user-defined styles and themes to be applied on partial or complete elements of the Recurrence Editor.
Default Value
- ””
Example - To simply customize the background color of Recurrence Editor by using custom CSS class name.
<div id="RecurrenceEditor"></div>
<style type="text/css">
.customStyle .e-textlabel {
background-color: Teal;
}
</style>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
cssClass: "customStyle",
});
});
</script>
For more information on applying custom themes to Syncfusion controls, refer here.
Methods
getRecurrenceRule()
Generates the recurrence rule with the options selected within the Recurrence Editor.
Returns:
string
Example
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
startDate: new Date(2014, 04, 05)
});
});
var schObj = $("#RecurrenceEditor").data("ejRecurrenceEditor");
schObj.getRecurrenceRule();
alert(schObj._recRule);
</script>
recurrenceDateGenerator(recurrenceString, startDate)
Generates the collection of date, that lies within the selected recurrence start and end date for which the recurrence pattern applies.
Name | Type | Description |
---|---|---|
recurrenceString | string | It refers the recurrence rule. |
startDate | object | It refers the start date of the recurrence. |
Returns:
object
Example
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
startDate: new Date(2014, 04, 05)
});
});
var schObj = $("#RecurrenceEditor").data("ejRecurrenceEditor");
var recurrenceString = "FREQ=DAILY;INTERVAL=1;COUNT=10";
var startDate = new Date();
schObj.recurrenceDateGenerator(recurrenceString,startDate);
</script>
recurrenceRuleSplit(recurrenceRule,exDate)
It splits and returns the recurrence rule string into object collection.
Name | Type | Description |
---|---|---|
recurrenceRule | string | It refers the recurrence rule string. |
exDate | object | It refers the appointment dates (ExDate) to be excluded |
Returns:
object
Example
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
startDate: new Date(2014, 04, 05)
});
});
var schObj = $("#RecurrenceEditor").data("ejRecurrenceEditor");
var recurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=10";
var exDate ="11/2/2016"
schObj.recurrenceRuleSplit(recurrenceRule,exDate);
</script>
Events
change
Triggers whenever any of the Recurrence Editor’s value is changed.
Name | Type | Description |
---|---|---|
cancel | boolean | When set to true, event gets canceled. |
model |
|
Returns the Recurrence Editor model |
type | string | Returns the name of the event |
recurrenceRule | string | Returns the recurrence rule value. |
Example
<div id="RecurrenceEditor"></div>
<script type="text/javascript">
$(function () {
$("#RecurrenceEditor").ejRecurrenceEditor({
selectedRecurrenceType: 0,
change: function(args)
{
/*Do your changes */
}
});
});
</script>