Recurrence Editor in ASP.NET MVC Scheduler

The Recurrence Editor is integrated into the Scheduler editor window by default to handle recurrence rule generation for events. Apart from this, it can also be used as an individual component referenced from the Scheduler repository to work with recurrence-related processes.

NOTE

All valid recurrence rule strings mentioned in the iCalendar specifications are supported by the Recurrence Editor.

Customizing the repeat type option in editor

By default, there are five repeat options available in the Recurrence Editor:

Never
Daily
Weekly
Monthly
Yearly

You can also customize the Recurrence Editor to display only specific repeat options, such as Daily and Weekly, by setting the frequencies option.

CSHTML
Data.cs
@using Syncfusion.EJ2.Schedule

@(Html.EJS().Schedule("schedule")
    .Width("100%")
    .Height("550px")
    .PopupOpen("onPopupOpen")
    .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
    .SelectedDate(new DateTime(2018, 2, 15))
    .Render()
)

<script type="text/javascript">
    function onPopupOpen(args) {
        if (args.type === 'Editor') {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            scheduleObj.eventWindow.recurrenceEditor.frequencies = ['none', 'daily', 'weekly'];
        }
    }
</script>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    List<ScheduleView> viewOption = new List<ScheduleView>()
    {
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Day },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.WorkWeek }
    };
    ViewBag.view = viewOption;
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    { Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2018, 2, 14, 9, 30, 0), EndTime = new DateTime(2018, 2, 14, 11, 0, 0) });
    return appData;
}
    
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

The other properties available in the Recurrence Editor are tabulated below:

Properties	Type	Description
`FirstDayOfWeek`	number	Sets the first day of the week in the Recurrence Editor.
`StartDate`	Date	Sets the date from which the recurrence event starts.
`DateFormat`	string	Sets the specific date format in the Recurrence Editor.
`Locale`	string	Sets the locale to be applied on the Recurrence Editor.
`CssClass`	string	Allows custom styling to be applied on the Recurrence Editor using class names.
`EnableRtl`	boolean	Allows the Recurrence Editor to render in RTL mode.
`MinDate`	Date	Sets the minimum date in the Recurrence Editor.
`MaxDate`	Date	Sets the maximum date in the Recurrence Editor.
`Value`	string	Sets the recurrence rule value on the Recurrence Editor.
`SelectedType`	number	Sets the specific repeat type on the Recurrence Editor.

Customizing the End type option in Editor

By default, there are three end options available in the Recurrence Editor:

Never
Until
Count

You can also customize the Recurrence Editor to display only specific end options, such as Until and Count, by setting the endTypes option.

CSHTML
Data.cs
@using Syncfusion.EJ2.Schedule
@(Html.EJS().RecurrenceEditor("RecurrenceEditor").SelectedType(1).Render())
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
    var recObject = document.getElementById('RecurrenceEditor').ej2_instances[0];
    recObject.endTypes = ["until", "count"];
        });
</script>
public ActionResult Index()
{
    return View();
}

Accessing the recurrence rule string

The recurrence rule is usually generated based on the options selected from the Recurrence Editor and follows the iCalendar specifications. The generated recurrence rule string is a valid value to be used with the Scheduler event’s recurrence rule field.

A Change event is available in the Recurrence Editor that triggers every time the fields of the Recurrence Editor change. Within this event argument, you can access the generated recurrence value through the value option as shown in the following code example.

CSHTML
Data.cs
@using Syncfusion.EJ2.Schedule
    
<div class="recurrence-editor-wrap">
    <div style="padding-bottom:15px;">
        <label>Rule Output</label>
        <div class="rule-output-container">
            <div id="rule-output">FREQ=DAILY;INTERVAL=1;</div>
        </div>
    </div>
    @Html.EJS().RecurrenceEditor("RecurrenceEditor").SelectedType(1).Change("onChange").Render()
</div>
    
<style>
    .recurrence-editor-wrap {
        margin: 0 25%;
    }

    .rule-output-container {
        height: auto;
        border: 1px solid #969696;
    }

    #rule-output {
        padding: 8px 4px;
        text-align: center;
        min-height: 20px;
        overflow: hidden;
        overflow-wrap: break-word;
    }

    @@media (max-width: 580px) {
        .recurrence-editor-wrap {
            margin: 0 5%;
        }
    }
</style>

<script type="text/javascript">
    function onChange(args) {
        var outputElement = document.querySelector('#rule-output');
        if(args.value == "") {
            outputElement.innerText = 'Select Rule';
        } else {
            outputElement.innerText = args.value;
        }
    }
</script>
public ActionResult Index()
{
    return View();
}

Set specific value on Recurrence Editor

It is possible to display the Recurrence Editor with specific options loaded initially, based on the rule string you provide. The fields of the Recurrence Editor will update their values accordingly when you provide a particular rule through the setRecurrenceRule method.

CSHTML
Data.cs
@using Syncfusion.EJ2.Schedule

<div class="recurrence-editor-wrap">
    <div style="padding-bottom:15px;">
        <label>Rule Output</label>
        <div class="rule-output-container">
            <div id="rule-output"></div>
        </div>
    </div>
    @Html.EJS().RecurrenceEditor("RecurrenceEditor").Change("onChange").Render()
</div>
    
<style>
    .recurrence-editor-wrap {
        margin: 0 25%;
    }

    .rule-output-container {
        height: auto;
        border: 1px solid #969696;
    }

    #rule-output {
        padding: 8px 4px;
        text-align: center;
        min-height: 20px;
        overflow: hidden;
        overflow-wrap: break-word;
    }

    @@media (max-width: 580px) {
        .recurrence-editor-wrap {
            margin: 0 5%;
        }
    }
</style>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var recObject = document.getElementById('RecurrenceEditor').ej2_instances[0];
        recObject.setRecurrenceRule('FREQ=DAILY;INTERVAL=2;COUNT=8');
    });
    function onChange(args) {
        var outputElement = document.querySelector('#rule-output');
        if(args.value == "") {
            outputElement.innerText = 'Select Rule';
        } else {
            outputElement.innerText = args.value;
        }
    }
</script>
public ActionResult Index()
{
    return View();
}

Recurrence date generation

You can parse the RecurrenceRule of an event to generate the date instances on which that particular event occurs, using the getRecurrenceDates method. It generates the dates based on the RecurrenceRule that you provide. The parameters to be passed to the 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	Maximum number of dates to be generated. It is optional.
`viewDate`	Date	Current view range’s first date. It is optional.

CSHTML
Data.cs
@using Syncfusion.EJ2.Schedule

<div>
    <div style="padding-bottom:15px;">
        <label id="rule-label">Rule Output</label>
        <div class="rule-output-container">
            <div id="rule-output"></div>
        </div>
    </div>
    @Html.EJS().RecurrenceEditor("RecurrenceEditor").Render()
</div>

<style>
    .recurrence-editor-wrap {
        margin: 0 25%;
    }

    .rule-output-container {
        height: auto;
        border: 1px solid #969696;
    }

    #rule-output {
        padding: 8px 4px;
        text-align: center;
        min-height: 20px;
        overflow: hidden;
        overflow-wrap: break-word;
    }

    #RecurrenceEditor {
        display: none;
    }
</style>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var outputElement = document.querySelector('#rule-output');
        var labelElement = document.querySelector('#rule-label');
        var recObject = new ej.schedule.RecurrenceEditor();
        var dates = recObject.getRecurrenceDates(new Date(2018, 0, 7, 10, 0), 'FREQ=DAILY;INTERVAL=1', '20180108T114224Z,20180110T114224Z', 4, new Date(2018, 0, 7))
        labelElement.innerText = 'Date Collections';
        outputElement.innerHTML = '';
        for (var index = 0; index < dates.length; index++) {
            outputElement.appendChild(new ej.base.createElement('div', { innerHTML: new Date(dates[index]).toString() }));
        }
    });
</script>
public ActionResult Index()
{
    return View();
}

NOTE

The above example will generate two dates, January 7, 2018 and January 9, 2018, by excluding the in-between dates January 8, 2018 and January 10, 2018, since those dates were specified in the exclusion list. The generated dates can then be used to create appointments.

Recurrence date generation on the server-side

It is also possible to generate recurrence date instances on the server-side by referring to the RecurrenceHelper class, which is specifically written and referenced from the application end to handle the date generation process.

NOTE

Refer here for the step-by-step procedure to achieve date generation on the server-side.

Restrict date generation with a specific count

If the rule is given in the “NEVER ENDS” category, you can specify the maximum count at which date generation should stop, 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.

CSHTML
Data.cs
@using Syncfusion.EJ2.Schedule

<div>
    <div style="padding-bottom:15px;">
        <label id="rule-label">Rule Output</label>
        <div class="rule-output-container">
            <div id="rule-output"></div>
        </div>
    </div>
    @Html.EJS().RecurrenceEditor("RecurrenceEditor").Render()
</div>

<style>
    .recurrence-editor-wrap {
        margin: 0 25%;
    }

    .rule-output-container {
        height: auto;
        border: 1px solid #969696;
    }

    #rule-output {
        padding: 8px 4px;
        text-align: center;
        min-height: 20px;
        overflow: hidden;
        overflow-wrap: break-word;
    }

    #RecurrenceEditor {
        display: none;
    }
</style>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var outputElement = document.querySelector('#rule-output');
        var labelElement = document.querySelector('#rule-label');
        var recObject = new ej.schedule.RecurrenceEditor();
        var dates = recObject.getRecurrenceDates(new Date(2018, 0, 7, 10, 0), 'FREQ=DAILY;INTERVAL=1; COUNT=30', '20180108T114224Z,20180110T114224Z', 10, new Date(2018, 0, 7));
        labelElement.innerText = 'Date Collections';
        outputElement.innerHTML = '';
        for (var index = 0; index < dates.length; index++) {
            outputElement.appendChild(new ej.base.createElement('div', { innerHTML: new Date(dates[index]).toString() }));
        }
    });
</script>
public ActionResult Index()
{
    return View();
}

NOTE

You can refer to our ASP.NET MVC Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Scheduler example to know how to present and manipulate data.

Search docs

Ask Syncfusion AI Assistant