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.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

constructor() { }

}

{% endhighlight %}

• 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}

Defines the collection of recurrence frequencies within Recurrence Editor such as Never, Daily, Weekly, Monthly, Yearly and Every Weekday.

• ["never", "daily", "weekly", "monthly", "yearly", "everyweekday"]

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public frequencies: any;
constructor() {
    this.frequencies = ["daily", "weekly", "monthly", "yearly", "everyweekday"];
}

}

{% endhighlight %}

{:#members:firstdayofweek}

Sets the starting day of the week.

• null

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

constructor() { }

}

{% endhighlight %}

{:#members:enablespinners}

When set to true, enables the spin button of numeric textboxes within the Recurrence Editor.

• true

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public EnableSpinners: boolean;
constructor() {
    this.EnableSpinners = false;
}

}

{% endhighlight %}

{:#members:startdate}

Sets the start date of the recurrence. The Recurrence Editor initially displays the current date as its start date.

• new Date()

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public StartDate: Date;
constructor() {
    this.StartDate = new Date(2017, 10, 5);
}

}

{% endhighlight %}

{:#members:locale}

Sets the specific culture to the Recurrence Editor.

• "en-US"

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

constructor() { }

}

{% endhighlight %}

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.

{:#members:dateformat}

Sets the date format for the datepickers available within the Recurrence Editor.

• ""

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

constructor() { }

}

{% endhighlight %}

{:#members:enablertl}

When set to true, renders the Recurrence Editor options from Right-to-Left direction.

• false

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public EnableRTL: boolean;
constructor() {
    this.EnableRTL = true;
}

}

{% endhighlight %}

{:#members:selectedrecurrencetype}

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.

• 0

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public SelectedRecurrenceType: number;
constructor() {
    this.SelectedRecurrenceType = 0;
}

}

{% endhighlight %}

{:#members:mindate}

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.

{:.param}

• new Date(1900, 01, 01)

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public StartDate: date;
public MinDate: date;
constructor() {
    this.StartDate = new Date(2017, 10, 05);
    this.MinDate = new Date(2017, 10, 01);
}

}

{% endhighlight %}

{:#members:maxdate}

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.

• new Date(2099, 12, 31)

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public StartDate: date;
public MaxDate: date;
constructor() {
    this.StartDate = new Date(2017, 10, 05);
    this.MaxDate = new Date(2017, 10, 07);
}

}

{% endhighlight %}

{:#members:cssclass }

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.

• ""

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

constructor() { }

}

{% endhighlight %}

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.

{:#methods:returns:}

string

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public StartDate: date;
constructor() {
    this.StartDate = new Date(2017, 10, 05);
}

}

{% endhighlight %}

{:#methods:recurrencedategenerator}

Generates the collection of date, that lies within the selected recurrence start and end date for which the recurrence pattern applies.

{:#methods:returns:}

object

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public StartDate: date;
constructor() {
    this.StartDate = new Date(2017, 10, 05);
}

}

{% endhighlight %}

{:#methods:recurrencerulesplit}

It splits and returns the recurrence rule string into object collection.

{:#methods:returns:}

object

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public StartDate: date;
constructor() {
    this.StartDate = new Date(2017, 10, 05);
}

}

{% endhighlight %}

{:#events:change}

Triggers whenever any of the Recurrence Editor's value is changed.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent {

public SelectedRecurrenceType: number;
constructor() {
    this.SelectedRecurrenceType = 0;
}

onChange(args) {
    /*Do your changes */
}

}

{% endhighlight %}