Recurrence editor in TypeScript Scheduler control
18 Nov 20185 minutes to read
The Recurrence editor is integrated into Scheduler editor window by default, to process the recurrence rule generation for events. Tt can also be used as an individual component referring from the Scheduler repository to work with the recurrence related processes.
All the valid recurrence rule string mentioned in the iCalendar specifications are applicable to use with the recurrence editor.
Customizing the repeat type option in editor
By default, there are 5 types of repeat options available in the Recurrence editor:
- Never
- Daily
- Weekly
- Monthly
- Yearly
The Recurrence editor can be customized to display only the specific repeat options such as Daily and Weekly options alone by setting the appropriate frequencies option.
The other properties available in recurrence editor are tabulated below,
| Properties | Type | Description |
|---|---|---|
| firstDayOfWeek | number | Sets the first day of the week on recurrence editor. |
| startDate | Date | Sets the start date from which date the recurrence event starts. |
| dateFormat | string | Sets the specific date format on recurrence editor. |
| locale | string | Sets the locale to be applied on recurrence editor. |
| cssClass | string | Allows styling to be applied on recurrence editor with custom class names. |
| enableRtl | boolean | Allows recurrence editor to render in RTL mode. |
| minDate | Date | Sets the minimum date on recurrence editor. |
| maxDate | Date | Sets the maximum date on recurrence editor. |
| value | string | Sets the recurrence rule value on recurrence editor. |
| selectedType | number | Sets the specific repeat type on the recurrence editor. |
Customizing the End Type Option in Editor
By default, there are 3 types of end options available in the Recurrence editor:
- Never
- Until
- Count
The Recurrence editor can be customized to display only the specific end options, such as the Until and Count options alone, by setting the appropriate endTypes option.
Accessing the recurrence rule string
The recurrence rule is generated based on the options selected from the recurrence editor and also it follows the iCalendar specifications. The generated recurrence rule string is a valid one to be used with the Scheduler event’s recurrence rule field.
The recurrence editor has a change event that triggers every time the fields are modified. The generated recurrence value can be accessed through the value option in the event argument.
Set specific value on recurrence editor
The Recurrence editor can be displayed with specific options loaded initially based on a provided rule string. The fields of the recurrence editor will change their values accordingly when you provide a particular rule through the setRecurrenceRule method.
Recurrence date generation
The recurrenceRule of an event can be parsed to generate the date instances on which that particular event will occur, using the getRecurrenceDates method. It generates the dates based on the recurrenceRule that we provide. The parameters to be provided for getRecurrenceDates method are as follows.
| Field name | Type | Description |
|---|---|---|
startDate |
Date | Appointment start date. |
rule |
String | Recurrence rule present in an event object. |
excludeDate |
String | Date collection (in ISO format) to be excluded. It is optional. |
maximumCount |
Number | Number of date count to be generated. It is optional. |
viewDate |
Date | Current view range’s first date. It is optional. |
Recurrence date generation in server-side
Recurrence date instances can also be generated from server-side by manually referring the RecurrenceHelper class, which is specifically written and referenced from application end to handle this date generation process.
Refer here for the step-by-step procedure to achieve date generation in server-side.
Restrict date generation with specific count
If the rule is given in the “NEVER ENDS” category, the maximum count can be specified to stop the date generation starting from the provided start date. To do so, provide the appropriate maximumCount value within the getRecurrenceDates method as shown in the following code example.
Refer to the JavaScript Scheduler feature tour page for its groundbreaking feature representations. Also explore JavaScript Scheduler example to learn how to present and manipulate data.