Recurrence editor in React Schedule component
12 Jul 202424 minutes to read
The Recurrence editor is integrated into Scheduler editor window by default, to process the recurrence rule generation for events. Apart from this, it 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 recurrence editor such as,
- Never
- Daily
- Weekly
- Monthly
- Yearly
It is possible to customize the recurrence editor to display only the specific repeat options such as Daily
and Weekly
options alone by setting the appropriate frequencies
option.
import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData }
const onPopupOpen = (args) => {
if (args.type == 'Editor') {
scheduleObj.current.eventWindow.recurrenceEditor.frequencies = ['none', 'daily', 'weekly'];
}
}
return (<ScheduleComponent ref={scheduleObj} width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} popupOpen={onPopupOpen.bind(this)}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, PopupOpenEventArgs, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData }
const onPopupOpen = (args: PopupOpenEventArgs): void => {
if (args.type === 'Editor') {
scheduleObj.current.eventWindow.recurrenceEditor.frequencies = ['none', 'daily', 'weekly'];
}
}
return (<ScheduleComponent ref={scheduleObj} width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}
popupOpen={onPopupOpen.bind(this)}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="index.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-past-app {
background-color: chocolate !important;
}
.custom-class.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment,
.custom-class.e-schedule .e-vertical-view .e-day-wrapper .e-appointment,
.custom-class.e-schedule .e-month-view .e-appointment {
background: green;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
The other properties available in recurrence editor are tabulated below,
Properties | Type | Description |
---|---|---|
firstDayOfWeek | number | Sets the first day of the week. |
startDate | Date | Sets the start date |
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 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 as its output values. |
selectedType | number | Sets the current repeat type to be set 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 such as:
- Never
- Until
- Count
It is possible to customize the recurrence editor to display only the specific end options, such as the Until
and Count
options alone, by setting the appropriate endTypes
option.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { RecurrenceEditorComponent }
from '@syncfusion/ej2-react-schedule';
const App = () => {
const recObject = useRef(null);
useEffect(() => {
recObject.current.endTypes = ['until', 'count'];
}, []);
return (<div className='content-wrapper recurrence-editor-wrap'>
<div className='RecurrenceEditor'>
<RecurrenceEditorComponent id='RecurrenceEditor' ref={recObject}></RecurrenceEditorComponent>
</div>
</div>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { RecurrenceEditorComponent }
from '@syncfusion/ej2-react-schedule';
const App = () => {
const recObject = useRef<RecurrenceEditorComponent>(null);
useEffect(() => {
recObject.current.endTypes = ['until', 'count'];
}, []);
return (<div className='content-wrapper recurrence-editor-wrap'>
<div className='RecurrenceEditor'>
<RecurrenceEditorComponent id='RecurrenceEditor' ref={recObject}></RecurrenceEditorComponent>
</div>
</div>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Accessing the recurrence rule string
The recurrence rule is usually 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.
There is a change
event available in recurrence editor, that triggers on every time the fields of recurrence editor tends to change. Within this event argument, you can access the generated recurrence value through the value
option as shown in the following code example.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { RecurrenceEditorComponent } from '@syncfusion/ej2-react-schedule';
const App = () => {
const ruleOutput = useRef(null);
useEffect(() => {
let outputElement = ruleOutput.current;
outputElement.innerText = 'Select Rule';
}, []);
const onChange = (args) => {
let outputElement = ruleOutput.current;
if (args.value == "") {
outputElement.innerText = 'Select Rule';
}
else {
outputElement.innerText = args.value;
}
}
return (<div className='content-wrapper recurrence-editor-wrap'>
<div style=>
<label>Rule Output</label>
<div className='rule-output-container'>
<div ref={ruleOutput}></div>
</div>
</div>
<div className='RecurrenceEditor'>
<RecurrenceEditorComponent id='RecurrenceEditor' change={onChange}></RecurrenceEditorComponent>
</div>
</div>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { RecurrenceEditorComponent, RecurrenceEditorChangeEventArgs }
from '@syncfusion/ej2-react-schedule';
const App = () => {
const ruleOutput = useRef(null);
useEffect(() => {
let outputElement: HTMLElement = ruleOutput.current
outputElement.innerText = 'Select Rule';
}, []);
const onChange = (args: RecurrenceEditorChangeEventArgs): void => {
let outputElement: HTMLElement = ruleOutput.current;
if (args.value === "") {
outputElement.innerText = 'Select Rule';
} else {
outputElement.innerText = args.value;
}
}
return (<div className='content-wrapper recurrence-editor-wrap'>
<div style=>
<label>Rule Output</label>
<div className='rule-output-container'>
<div ref={ruleOutput}></div>
</div>
</div>
<div className='RecurrenceEditor'>
<RecurrenceEditorComponent id='RecurrenceEditor' change={onChange}></RecurrenceEditorComponent>
</div>
</div>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Set specific value on recurrence editor
It is possible to display the recurrence editor with specific options loaded initially, based on the rule string that we provide. The fields of recurrence editor will change its values accordingly, when we provide a particular rule through the setRecurrenceRule
method.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { RecurrenceEditorComponent, RecurrenceEditorChangeEventArgs }
from '@syncfusion/ej2-react-schedule';
const App = () => {
const recObject = useRef(null);
const ruleOutput = useRef(null);
useEffect(() => {
let outputElement = ruleOutput.current;
recObject.current.setRecurrenceRule('FREQ=DAILY;INTERVAL=2;COUNT=8');
outputElement.innerText = recObject.current.value;
}, []);
const onChange = (args) => {
let outputElement = ruleOutput.current;
outputElement.innerText = args.value;
}
return (<div className='content-wrapper recurrence-editor-wrap'>
<div style=>
<label>Rule Output</label>
<div className='rule-output-container'>
<div ref={ruleOutput}></div>
</div>
</div>
<div className='RecurrenceEditor'>
<RecurrenceEditorComponent id='RecurrenceEditor' ref={recObject} change={onChange}></RecurrenceEditorComponent>
</div>
</div>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { RecurrenceEditorComponent, RecurrenceEditorChangeEventArgs }
from '@syncfusion/ej2-react-schedule';
const App = () => {
const recObject = useRef<RecurrenceEditorComponent>(null);
const ruleOutput = useRef(null);
useEffect(() => {
let outputElement: HTMLElement = ruleOutput.current;
recObject.current.setRecurrenceRule('FREQ=DAILY;INTERVAL=2;COUNT=8');
outputElement.innerText = recObject.current.value as string;
}, []);
const onChange = (args: RecurrenceEditorChangeEventArgs): void => {
let outputElement: HTMLElement = ruleOutput.current;
outputElement.innerText = args.value;
}
return (<div className='content-wrapper recurrence-editor-wrap'>
<div style=>
<label>Rule Output</label>
<div className='rule-output-container'>
<div ref={ruleOutput}></div>
</div>
</div>
<div className='RecurrenceEditor'>
<RecurrenceEditorComponent id='RecurrenceEditor' ref={recObject} change={onChange}></RecurrenceEditorComponent>
</div>
</div>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Recurrence date generation
You can parse the recurrenceRule
of an event to generate the date instances on which that particular event is going to 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. |
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { RecurrenceEditorComponent }
from '@syncfusion/ej2-react-schedule';
const App = () => {
const recObject = useRef(null);
const ruleOutput = useRef(null);
const today = new Date()
useEffect(() => {
let dates = recObject.current.getRecurrenceDates(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
'FREQ=DAILY;INTERVAL=1', '20180108T114224Z,20180110T114224Z', 4, new Date(today.getFullYear(), today.getMonth(), today.getDate()));
let stringCollection = '';
for (let index = 0; index < dates.length; index++) {
stringCollection += new Date(dates[index]);
if (index + 1 !== dates.length) {
stringCollection += '\n';
}
}
let outputElement = ruleOutput.current;
outputElement.innerText = stringCollection;
}, []);
return (<div className='content-wrapper recurrence-editor-wrap'>
<div style=>
<label>Date Collections</label>
<div className='rule-output-container'>
<div ref={ruleOutput}></div>
</div>
</div>
<div className='RecurrenceEditor' style=>
<RecurrenceEditorComponent id='RecurrenceEditor' ref={recObject}></RecurrenceEditorComponent>
</div>
</div>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { RecurrenceEditorComponent }
from '@syncfusion/ej2-react-schedule';
const App = () => {
const recObject = useRef<RecurrenceEditorComponent>(null);
const ruleOutput = useRef(null);
const today: Date = new Date()
useEffect(() => {
let dates: number[] = recObject.current.getRecurrenceDates(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
'FREQ=DAILY;INTERVAL=1', '20180108T114224Z,20180110T114224Z', 4, new Date(today.getFullYear(), today.getMonth(), today.getDate()));
let stringCollection: string = '';
for (let index: number = 0; index < dates.length; index++) {
stringCollection += new Date(dates[index]);
if (index + 1 !== dates.length) {
stringCollection += '\n';
}
}
let outputElement: HTMLElement = ruleOutput.current;
outputElement.innerText = stringCollection;
}, []);
return (<div className='content-wrapper recurrence-editor-wrap'>
<div style=>
<label>Date Collections</label>
<div className='rule-output-container'>
<div ref={ruleOutput}></div>
</div>
</div>
<div className='RecurrenceEditor' style=>
<RecurrenceEditorComponent id='RecurrenceEditor' ref={recObject}></RecurrenceEditorComponent>
</div>
</div>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Above example will generate two dates January 7, 2018 & January 9 2018 by excluding the in between dates January 8 2018 & January 10 2018, since those dates were given in the exclusion list. Generated dates can then be utilised to create appointments.
Recurrence date generation in server-side
It is also possible to generate recurrence date instances from server-side by manually referring the RecurrenceHelper
class, which is specifically written and referred 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
In case, if the rule is given in “NEVER ENDS” category, then you can mention the maximum count when you actually want 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.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { RecurrenceEditorComponent } from '@syncfusion/ej2-react-schedule';
const App = () => {
const recObject = useRef(null);
const ruleOutput = useRef(null);
useEffect(() => {
let dates = recObject.current.getRecurrenceDates(new Date(2018, 0, 7, 10, 0), 'FREQ=DAILY;INTERVAL=1', null, 10, null);
let stringCollection = '';
for (let index = 0; index < dates.length; index++) {
stringCollection += new Date(dates[index]);
if (index + 1 !== dates.length) {
stringCollection += '\n';
}
}
let outputElement = ruleOutput.current;
outputElement.innerText = stringCollection;
}, []);
return (<div className='content-wrapper recurrence-editor-wrap'>
<div style=>
<label>Date Collections</label>
<div className='rule-output-container'>
<div ref={ruleOutput}></div>
</div>
</div>
<div className='RecurrenceEditor' style=>
<RecurrenceEditorComponent id='RecurrenceEditor' ref={recObject}></RecurrenceEditorComponent>
</div>
</div>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { RecurrenceEditorComponent }
from '@syncfusion/ej2-react-schedule';
const App = () => {
const recObject = useRef<RecurrenceEditorComponent>(null);
const ruleOutput = useRef(null);
useEffect(() => {
let dates: number[] = recObject.current.getRecurrenceDates(new Date(2018, 0, 7, 10, 0), 'FREQ=DAILY;INTERVAL=1', null, 10, null);
let stringCollection: string = '';
for (let index: number = 0; index < dates.length; index++) {
stringCollection += new Date(dates[index]);
if (index + 1 !== dates.length) {
stringCollection += '\n';
}
}
let outputElement: HTMLElement = ruleOutput.current;
outputElement.innerText = stringCollection;
}, []);
return (<div className='content-wrapper recurrence-editor-wrap'>
<div style=>
<label>Date Collections</label>
<div className='rule-output-container'>
<div ref={ruleOutput}></div>
</div>
</div>
<div className='RecurrenceEditor' style=>
<RecurrenceEditorComponent id='RecurrenceEditor' ref={recObject}></RecurrenceEditorComponent>
</div>
</div>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
You can refer to our React Scheduler feature tour page for its groundbreaking feature representations. You can also explore our React Scheduler example to knows how to present and manipulate data.