Search results

Recurrence editor

Recurrence rule generation

The recurrence rule can be generated based on the options selected from the Recurrence editor and it usually follows the iCalendar specifications. The generated recurrence rule string is a valid one to be used with the Schedule event’s recurrence rule field.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper 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>
            <ejs-recurrenceeditor id="RecurrenceEditor" selectedType="1" change="onChange"></ejs-recurrenceeditor>
        </div>
    </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 element = document.querySelector('#rule-output');
            element.innerText = args.value;
        }
    </script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult rule-generation()
        {
            return View();
        }
    }
}

Recurrence date generation

You can parse the recurrenceRule of an appointment using getRecurrenceDates method which generates the date based on the recurrenceRule. The parameters available are as follows.

Field name Type
startDate Date
rule String
excludeDate String
maximumCount Number
viewDate Date
tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper recurrence-editor-wrap">
            <div style="padding-bottom:15px;">
                <label id="rule-label">Date Collections</label>
                <div class="rule-output-container">
                    <div id="rule-output"></div>
                </div>
            </div>
            <ejs-recurrenceeditor id="RecurrenceEditor"></ejs-recurrenceeditor>
        </div>
    </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 = document.getElementById('RecurrenceEditor').ej2_instances[0];
            var dates = recObject.getRecurrenceDates(new Date(2018, 0, 7, 10, 0), 'FREQ=DAILY;INTERVAL=1', '20180108T114224Z,20180110T114224Z', 4, new Date(2018, 0, 7));
            var dateCollection = [];
            for (var index = 0; index < dates.length; index++) {
                dateCollection.push(new Date(dates[index]));
            }
            outputElement.innerText = dateCollection;
        });
    </script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult date-genaration()
        {
            return View();
        }
    }
}

Above demo will generate two dates January 7 & 9 by excluding the January 8 & 10 since those dates were given in exclusion list. Generated dates are good to create appointment collections.