How To

Prioritize the color for resource events

By default top level resource color will be applied for the events. If user wants to apply specific resource color to events irrespective of its parent resource color, it can be achieved by resourceColorField field within eventSettings property as shown below.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" currentView="WorkWeek" selectedDate="new DateTime(2018, 2, 15)" navigating="onNavigating">
                <e-schedule-group byGroupID="false" resources="@ViewBag.Resources"></e-schedule-group>
                <e-schedule-resources>
                    <e-resource dataSource="@ViewBag.Projects" field="ProjectId" title=" Choose Project" name="Projects" textField="text" idField="id" colorField="color"></e-resource>
                    <e-resource dataSource="@ViewBag.Categories" field="CategoryId" title="Category" name="Categories" textField="text" idField="id" colorField="color" allowMultiple="true"></e-resource>
                </e-schedule-resources>
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
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 ActionResult resource-color()
        {
            ViewBag.datasource = new ScheduleData().GetResourceTeamData();

            List<ProjectResource> projects = new List<ProjectResource>();
            projects.Add(new ProjectResource { text = "PROJECT 1", id = 1, color = "#cb6bb2" });
            projects.Add(new ProjectResource { text = "PROJECT 2", id = 2, color = "#56ca85" });
            ViewBag.Projects = projects;

            List<CategoryResource> categories = new List<CategoryResource>();
            categories.Add(new CategoryResource { text = "Development", id = 1, color = "#1aaa55" });
            categories.Add(new CategoryResource { text = "Testing", id = 2, color = "#7fa900" });
            ViewBag.Categories = categories;

            ViewBag.Resources = new string[] { "Projects", "Categories" };
            return View();
        }
    }
    public class ProjectResource
    {
        public string text { set; get; }
        public int id { set; get; }
        public string color { set; get; }
    }
    public class CategoryResource
    {
        public string text { set; get; }
        public int id { set; get; }
        public string color { set; get; }
    }
}

The resourceColorField field value should be as same as the name field value given with in resources property.

Manually open the event editor

Schedule allows user to manually open the event editor on specific time or on certain events using openEditor method as shown below.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div>
            <ejs-button id="btn1" content="Click to open Editor"></ejs-button>
            <ejs-button id="btn2" content="Click to open Event Editor"></ejs-button>
        </div>
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        document.getElementById('btn1').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var cellData = {
                startTime: new Date(2018, 1, 15, 10, 0),
                endTime: new Date(2018, 1, 15, 11, 0),
            };
            scheduleObj.openEditor(cellData, 'Add');
        };
        document.getElementById('btn2').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var eventData = {
                Id: 4,
                Subject: 'Meteor Showers in 2018',
                StartTime: new Date(2018, 1, 14, 13, 0),
                EndTime: new Date(2018, 1, 14, 14, 30)
            };
            scheduleObj.openEditor(eventData, 'Save');
        };
    </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 ActionResult event-editor()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Set different work hours

By default, the work hours of the Scheduler is highlighted based on the start and end values provided within the workHours property which remains same for all days. To highlight different work hours range for different days,setWorkHours method can be used as follows.

[src/app/app.ts]

Now, run the application in the browser using the following command.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div>
            <ejs-button id="btn1" content="Change the work hours"></ejs-button>
        </div>
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-workhours highlight="true" start="9:00" end="11:00"></e-schedule-workhours>
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        document.getElementById('btn1').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var dates = [new Date(2018, 1, 15), new Date(2018, 1, 17)];
            scheduleObj.setWorkHours(dates, '11:00', '20:00');
        };
    </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 ActionResult different-workhours()
        {
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Customize the events dynamically before it renders on UI

The eventRendered event will be triggered before rendering the appointments on Schedule where it can be customized. In the below demo, custom field CategoryColor is added to the appointment collection and based on certain condition, appointment background color is changed with CategoryColor field value.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div>
            <ejs-button id="btn1" content="ADD"></ejs-button>
            <ejs-button id="btn2" content="EDIT"></ejs-button>
            <ejs-button id="btn3" content="DELETE"></ejs-button>
        </div>
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        document.getElementById('btn1').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var Data = [{
                Id: 1,
                Subject: 'Conference',
                StartTime: new Date(2018, 1, 12, 9, 0),
                EndTime: new Date(2018, 1, 12, 10, 0),
                IsAllDay: false
            }, {
                Id: 2,
                Subject: 'Meeting',
                StartTime: new Date(2018, 1, 15, 10, 0),
                EndTime: new Date(2018, 1, 15, 11, 30),
                IsAllDay: false
            }];
            scheduleObj.addEvent(Data);
        };
        document.getElementById('btn2').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var Data = {
                Id: 3,
                Subject: 'Testing-edited',
                StartTime: new Date(2018, 1, 11, 10, 0),
                EndTime: new Date(2018, 1, 11, 11, 0),
                IsAllDay: false
            };
            scheduleObj.saveEvent(Data);
        };
        document.getElementById('btn3').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            scheduleObj.deleteEvent(4);
        };
    </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 ActionResult dynamic-appointments()
        {
            ViewBag.datasource = GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
        public List<AppointmentData> GetScheduleData()
        {
            List<AppointmentData> appData = new List<AppointmentData>();
            appData.Add(new AppointmentData
            {
                Id = 3,
                Subject = "Testing",
                StartTime = new DateTime(2018, 2, 11, 9, 0, 0),
                EndTime = new DateTime(2018, 2, 11, 10, 0, 0),
                IsAllDay = false,
            });
            appData.Add(new AppointmentData
            {
                Id = 4,
                Subject = "Vacation",
                StartTime = new DateTime(2018, 2, 13, 9, 0, 0),
                EndTime = new DateTime(2018, 2, 13, 10, 0, 0),
                IsAllDay = false,
            });
            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; }
        public bool IsAllDay { get; set; }
    }
}

Prevent the date navigation while clicking on the date header

While navigating the views in Schedule, navigating event will be triggered where navigating to certain views can be prevented. In the below demo, navigating to other views is prevented when the current view is ‘Week’.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" currentView="WorkWeek" selectedDate="new DateTime(2018, 2, 15)" navigating="onNavigating">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        function onNavigating(args) {
            if (args.previousView === 'Week') {
                args.cancel = true;
            }
        }
    </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 ActionResult navigating()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Set default value for Subject field

Event window default fields name like Title, Location, etc.. can be customized and default value can be set to Subject field using default property which will be added if an appointment is created with empty subject.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource">
                    <e-eventsettings-fields>
                        <e-field-subject title="Event Name" name="Subject" default="Add Name"></e-field-subject>
                        <e-field-location title="Event Location" name="Location"></e-field-location>
                        <e-field-description title="Summary" name="Description"></e-field-description>
                        <e-field-starttime title="From" name="StartTime"></e-field-starttime>
                        <e-field-endtime title="To" name="EndTime"></e-field-endtime>
                    </e-eventsettings-fields>
                </e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}
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 ActionResult default-subject()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Set different event duration on appointment window

In event window, start/end time duration will be processed based on the interval value within the timeScale property. By default, interval value is 30, therefore in event window start/end time duration will be in 30 mins duration. You can set custom interval range to the start/end time in event window using popupOpen event as shown below.

tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" popupOpen="onPopupOpen" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        function onPopupOpen(args) {
            args.duration = 40;
        }
    </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 ActionResult event-duration()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
    }
}

Dynamically add, edit and remove appointments

CRUD actions can be manually performed on appointments using addEvent, saveEvent and deleteEvent methods as shown below.

  • Normal event
tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div>
            <ejs-button id="btn1" content="ADD"></ejs-button>
            <ejs-button id="btn2" content="EDIT"></ejs-button>
            <ejs-button id="btn3" content="DELETE"></ejs-button>
        </div>
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        document.getElementById('btn1').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var Data = [{
                Id: 1,
                Subject: 'Conference',
                StartTime: new Date(2018, 1, 12, 9, 0),
                EndTime: new Date(2018, 1, 12, 10, 0),
                IsAllDay: false
            }, {
                Id: 2,
                Subject: 'Meeting',
                StartTime: new Date(2018, 1, 15, 10, 0),
                EndTime: new Date(2018, 1, 15, 11, 30),
                IsAllDay: false
            }];
            scheduleObj.addEvent(Data);
        };
        document.getElementById('btn2').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var Data = {
                Id: 3,
                Subject: 'Testing-edited',
                StartTime: new Date(2018, 1, 11, 10, 0),
                EndTime: new Date(2018, 1, 11, 11, 0),
                IsAllDay: false
            };
            scheduleObj.saveEvent(Data);
        };
        document.getElementById('btn3').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            scheduleObj.deleteEvent(4);
        };
    </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 ActionResult dynamic-appointments()
        {
            ViewBag.datasource = GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
        public List<AppointmentData> GetScheduleData()
        {
            List<AppointmentData> appData = new List<AppointmentData>();
            appData.Add(new AppointmentData
            {
                Id = 3,
                Subject = "Testing",
                StartTime = new DateTime(2018, 2, 11, 9, 0, 0),
                EndTime = new DateTime(2018, 2, 11, 10, 0, 0),
                IsAllDay = false,
            });
            appData.Add(new AppointmentData
            {
                Id = 4,
                Subject = "Vacation",
                StartTime = new DateTime(2018, 2, 13, 9, 0, 0),
                EndTime = new DateTime(2018, 2, 13, 10, 0, 0),
                IsAllDay = false,
            });
            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; }
        public bool IsAllDay { get; set; }
    }
}
  • Recurrence event
tagHelper
data.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div>
            <ejs-button id="btn1" content="ADD"></ejs-button>
            <ejs-button id="btn2" content="EDIT"></ejs-button>
            <ejs-button id="btn3" content="DELETE"></ejs-button>
        </div>
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" height="550" views="@ViewBag.view" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
    <script type="text/javascript">
        document.getElementById('btn1').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var Data = [{
                Id: 1,
                Subject: 'Conference',
                StartTime: new Date(2018, 1, 15, 9, 0),
                EndTime: new Date(2018, 1, 15, 10, 0),
                IsAllDay: false,
                RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=2'
            }];
            scheduleObj.addEvent(Data);
        };
        document.getElementById('btn2').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var Data = {
                Id: 3,
                Subject: 'Testing-edited',
                RecurrenceID: 3,
                StartTime: new Date(2018, 1, 11, 10, 0),
                EndTime: new Date(2018, 1, 11, 11, 0),
                IsAllDay: false,
                RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=3'
            };
            scheduleObj.saveEvent(Data, 'EditOccurrence');
        };
        document.getElementById('btn3').onclick = function () {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var Data = {
                Id: 4,
                Subject: 'Vacation',
                RecurrenceID: 4,
                StartTime: new Date(2018, 1, 12, 11, 0),
                EndTime: new Date(2018, 1, 12, 12, 0),
                IsAllDay: false,
                RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=3'
            };
            scheduleObj.deleteEvent(Data, 'DeleteSeries');
        };
    </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 ActionResult DateHeader()
        {
            ViewBag.datasource = GetScheduleData();
            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;
            return View();
        }
        public List<AppointmentData> GetScheduleData()
        {
            List<AppointmentData> appData = new List<AppointmentData>();
            appData.Add(new AppointmentData
            {
                Id = 3,
                Subject = "Testing",
                StartTime = new DateTime(2018, 2, 11, 9, 0, 0),
                EndTime = new DateTime(2018, 2, 11, 10, 0, 0),
                IsAllDay = false,
                RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=3",
            });
            appData.Add(new AppointmentData
            {
                Id = 4,
                Subject = "Vacation",
                StartTime = new DateTime(2018, 2, 12, 11, 0, 0),
                EndTime = new DateTime(2018, 2, 12, 12, 0, 0),
                IsAllDay = false,
                RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=2"
            });
            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; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
    }
}

When a single occurrence of the recurrence appointment is edited, recurrenceID field will be added which holds the id value of its parent recurrence appointment. It is applicable only for the edited occurrence appointments. Therefore the collection passing to the saveEvent with action as EditOccurrence should have RecurrenceID field as shown above.