Search results

Resources

The Scheduler provides Resources support, with which the single Scheduler is shared by multiple resources simultaneously. Each resource in the Scheduler is arranged in a column/row wise, with individual spacing to display all its respective appointments on a single page. It also supports the grouping of resources, thus enabling the categorization of resources in a hierarchical structure and shows it either in expandable groups (Horizontal view) or else vertical hierarchy one after the other (Vertical view).

One or more resources can be assigned to the Scheduler appointments by making selection of the resource options available in the appointment window.

Resources fields

The default options available within the resources collection are as follows,

field (String)

A value that binds to the resource field of event object.

title (String)

It holds the title name of the resource field to be displayed on the Schedule appointment window.

name (String)

A unique resource name used for differentiating various resource objects while grouping.

allowMultiple (Boolean)

When set to true, allows multiple selection of resource names, thus creating multiple instances of same appointment for the selected resources.

resourceColorField (String)

Binds the resource level name, whose color will be applied to events.

dataSource (Object)

Assigns the resource dataSource, where data can be passed either as an array of JavaScript objects, or else can create an instance of DataManager in case of processing remote data and can be assigned to the dataSource property. With the remote data assigned to dataSource, check the available adaptors to customize the data processing.

query (Query)

Defines the external query that will be executed along with the data processing.

idField (String)

Binds the id field name from the dataSource.

textField (String)

Binds the text field name from the dataSource.

groupIDField (String)

Binds the group-id field name from the dataSource.

colorField (String)

Binds the color field name from the dataSource.

startHourField (String)

Binds the start hour field name from the dataSource.

endHourField (String)

Binds the end hour field name from the dataSource.

workDaysField (String)

Binds the work days field name from the dataSource.

cssClassField (String)

Binds the custom CSS class field name from the dataSource.

Multiple resources (without grouping)

It is possible to display the Scheduler in default look without visually showcasing all the resources on it, but it allow the user to assign the required resources to the appointments through the appointment window resource options.

The appointments belonging to all the resources will be displayed on the Scheduler which will be differentiated based on the resource color assigned in the resources (depicting to which resource that particular appointment belongs).

Example: To display default Scheduler with multiple resource options in the appointment window,

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Group(group => group.ByGroupID(false).Resources(ViewBag.Resources)).Resources(res =>
       {
           res.AllowMultiple(false).DataSource(ViewBag.Rooms).Field("RoomId").Title("Room").Name("Rooms").TextField("RoomText").IdField("Id").GroupIDField("RoomGroupId").ColorField("RoomColor").Add();
           res.AllowMultiple(true).DataSource(ViewBag.Owners).Field("OwnerId").Title("Owner").Name("Owners").TextField("OwnerText").IdField("Id").GroupIDField("OwnerGroupId").ColorField("OwnerColor").Add();
       }).Views(view => { view.Option(View.Week).Add(); view.Option(View.Month).Add(); view.Option(View.Agenda).Add(); }).EventSettings(e => e.DataSource(ViewBag.datasource)).SelectedDate(new DateTime(2018, 4, 1)).Render()
        </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 Demo()
        {
            ViewBag.datasource = new ScheduleData().GetResourceData();

            List<RoomResources> rooms = new List<RoomResources>();
            rooms.Add(new RoomResources { RoomText = "ROOM 1", Id = 1, RoomColor = "#cb6bb2" });
            rooms.Add(new RoomResources { RoomText = "ROOM 2", Id = 2, RoomColor = "#56ca85" });
            ViewBag.Rooms = rooms;

            List<OwnerResources> owners = new List<OwnerResources>();
            owners.Add(new OwnerResources { OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" });
            owners.Add(new OwnerResources { OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" });
            owners.Add(new OwnerResources { OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" });
            ViewBag.Owners = owners;

            ViewBag.Resources = new string[] { "Rooms", "Owners" };
            return View();
        }
    }

    public class RoomResources
    {
        public string RoomText { set; get; }
        public int Id { set; get; }
        public string RoomColor { set; get; }
    }
    public class OwnerResources
    {
        public string OwnerText { set; get; }
        public int Id { set; get; }
        public string OwnerColor { set; get; }
    }
}

Setting allowMultiple to true in the above code snippet allows the user to select multiple resources in the appointment window and also creates multiple copies of the same appointment in the Scheduler for each resources while saving.

Group by levels

Scheduler supports both single and multiple levels of resource grouping that can be customized either in horizontal or vertical Scheduler views. In Vertical view - the levels are displayed in a tree structure one after the other, but in horizontal view – the levels are grouped in a vertically expandable/collapsible structure. Scheduler also provides

  • Option to group same child resource(s) under different parent resource(s).

  • Option to group resource(s) on day basis.

  • Option to edit all resource events simultaneously.

Single level

This type of grouping allows the Scheduler to display all the resources at a single level simultaneously. The appointments will make use of the colorField defined for the first resource instance as its background color.

Example: To display the Scheduler with single level resource grouping options,

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Group(group => group.Resources(ViewBag.Resources)).Resources(res => { res.AllowMultiple(true).DataSource(ViewBag.Owners).Field("OwnerId").Title("Owner").Name("Owners").TextField("OwnerText").IdField("Id").ColorField("OwnerColor").Add(); }).Views(view => { view.Option(View.Week).Add(); view.Option(View.Month).Add(); view.Option(View.Agenda).Add(); }).EventSettings(e => e.DataSource(ViewBag.datasource)).SelectedDate(new DateTime(2018, 4, 1)).Render()
        </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 single-level()
        {
            ViewBag.datasource = new ScheduleData().GetResourceData();
            List<OwnerResources> owners = new List<OwnerResources>();
            owners.Add(new OwnerResources { OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" });
            owners.Add(new OwnerResources { OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" });
            owners.Add(new OwnerResources { OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" });
            ViewBag.Owners = owners;
            string[] resources = new string[] { "Owners" };
            ViewBag.Resources = resources;
            return View();
        }
    }
    public class OwnerResources
    {
        public string OwnerText { set; get; }
        public int Id { set; get; }
        public string OwnerColor { set; get; }
    }
}

The name field mentioned in the resource object needs to be specified within the group property in order to enable the grouping option in Scheduler.

Multi-Level

This type of grouping displays the resources in the Scheduler at multiple levels with a set of resources grouped under each parent. The appointments will make use of the colorField defined for the first/top level resource instance as its background color.

Example: To display the Scheduler with multiple level resource grouping options,

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Group(group => group.ByGroupID(false).Resources(ViewBag.Resources)).Resources(res =>
       {
           res.AllowMultiple(false).DataSource(ViewBag.Rooms).Field("RoomId").Title("Room").Name("Rooms").TextField("RoomText").IdField("Id").GroupIDField("RoomGroupId").ColorField("RoomColor").Add();
           res.AllowMultiple(true).DataSource(ViewBag.Owners).Field("OwnerId").Title("Owner").Name("Owners").TextField("OwnerText").IdField("Id").GroupIDField("OwnerGroupId").ColorField("OwnerColor").Add();
       }).Views(view => { view.Option(View.Week).Add(); view.Option(View.Month).Add(); view.Option(View.Agenda).Add(); }).EventSettings(e => e.DataSource(ViewBag.datasource)).SelectedDate(new DateTime(2018, 4, 1)).Render()
        </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 Demo()
        {
            ViewBag.datasource = new ScheduleData().GetResourceData();

            List<RoomResources> rooms = new List<RoomResources>();
            rooms.Add(new RoomResources { RoomText = "ROOM 1", Id = 1, RoomColor = "#cb6bb2" });
            rooms.Add(new RoomResources { RoomText = "ROOM 2", Id = 2, RoomColor = "#56ca85" });
            ViewBag.Rooms = rooms;

            List<OwnerResources> owners = new List<OwnerResources>();
            owners.Add(new OwnerResources { OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" });
            owners.Add(new OwnerResources { OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" });
            owners.Add(new OwnerResources { OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" });
            ViewBag.Owners = owners;

            ViewBag.Resources = new string[] { "Rooms", "Owners" };
            return View();
        }
    }

    public class RoomResources
    {
        public string RoomText { set; get; }
        public int Id { set; get; }
        public string RoomColor { set; get; }
    }
    public class OwnerResources
    {
        public string OwnerText { set; get; }
        public int Id { set; get; }
        public string OwnerColor { set; get; }
    }
}

Group all child resources

This type of grouping displays the same child resources under different parent resource(s). To enable such grouping, it is necessary to set byGroupID to false within the group whereby allowing all the resources available in each child level to group under its parent resources. With this option available, we can avoid the need to provide multiple definitions of the same data to be grouped under different parent.

Example: To display the Scheduler with same set of child resource under different parent grouping options,

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").CurrentView(View.WorkWeek).SelectedDate(new DateTime(2018, 6, 5)).Group(group => group.ByGroupID(false).Resources(ViewBag.Resources)).Resources(res =>
       {
           res.DataSource(ViewBag.Projects).Field("ProjectId").Title("Project").Name("Projects").TextField("text").IdField("id").ColorField("color").Add();
           res.DataSource(ViewBag.Categories).Field("CategoryId").Title("Category").Name("Categories").TextField("text").IdField("id").ColorField("color").AllowMultiple(true).Add();
       }).EventSettings(e => e.DataSource(ViewBag.datasource)).Render()
        </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 group-child()
        {
            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; }
    }
}

Group by date

This type of grouping displays the resource group on day basis. To enable such grouping, it is necessary to set byDate to true within the group whereby allowing all the resource group under the date.

Example: To display the Scheduler with resource group under date option,

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Group(group => group.ByDate(true).Resources(ViewBag.Resources)).Resources(res => { res.DataSource(ViewBag.Owners).Field("OwnerId").Title("Assignee").Name("Owners").TextField("text").IdField("id").ColorField("color").AllowMultiple(true).Add(); }).Views(view => { view.Option(View.Week).Add(); view.Option(View.Month).Add(); view.Option(View.Agenda).Add(); }).EventSettings(e => e.Fields(f => f.Subject(sub => sub.Name("Subject").Title("Task")).Location(loc => loc.Name("Location").Title("Project Name")).Description(des => des.Name("Description").Title("Comments"))).DataSource(ViewBag.datasource)).SelectedDate(new DateTime(2018, 4, 1)).Render()
        </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 GroupByDate()
        {
            ViewBag.datasource = new ScheduleData().GetResourceData();
            
            List<OwnerRes> owners = new List<OwnerRes>();
            owners.Add(new OwnerRes { text = "Alice", id = 1, color = "#1aaa55" });
            owners.Add(new OwnerRes { text = "Smith", id = 2, color = "#7fa900" });
            ViewBag.Owners = owners;
            
            string[] resources = new string[] { "Owners" };
            ViewBag.Resources = resources;
            return View();
        }
    }
    public class OwnerRes
    {
        public string text { set; get; }
        public int id { set; get; }
        public string color { set; get; }
    }
}

Linked events

This type of option allow us to edit all resource events simultaneously and to enable such option, it is necessary to set allowGroupEdit to true within the group. With this property enabled, a single appointment object will be maintained within the appointment collection, even if it is shared by more than one resource – whereas the resource fields of such appointment object will hold the IDs of the multiple resources separated by commas. Any actions such as create, edit or delete held on any one of the event, will be reflected on all other related instances visible on the UI.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").CurrentView(View.WorkWeek).Group(group => group.AllowGroupEdit(true).Resources(ViewBag.Resources)).Resources(res => { res.DataSource(ViewBag.Conferences).Field("ConferenceId").Title("Attendees").Name("Conferences").TextField("text").IdField("id").ColorField("color").AllowMultiple(true).Add(); }).EventSettings(e => e.Fields(f => f.Subject(sub => sub.Name("Subject").Title("Conference Name")).Description(des => des.Name("Description").Title("Summary")).StartTime(st => st.Name("StartTime").Title("From")).EndTime(et => et.Name("EndTime").Title("To"))).DataSource(ViewBag.datasource)).Views(ViewBag.view).SelectedDate(new DateTime(2018, 6, 5)).Render()
        </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 GroupEditing()
        {
            ViewBag.datasource = new ScheduleData().GetResourceConferenceData();
            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;

            List<ConferenceRes> conferences = new List<ConferenceRes>();
            conferences.Add(new ConferenceRes { text = "Margaret", id = 1, color = "#1aaa55" });
            conferences.Add(new ConferenceRes { text = "Robert", id = 2, color = "#357cd2" });
            conferences.Add(new ConferenceRes { text = "Laura", id = 3, color = "#7fa900" });
            ViewBag.Conferences = conferences;

            string[] resources = new string[] { "Conferences" };
            ViewBag.Resources = resources;
            return View();
        }
    }
    public class ConferenceRes
    {
        public string text { set; get; }
        public int id { set; get; }
        public string color { set; get; }
    }
}

Setting different work days and hours

It is possible to assign different work-days and work-hours for each resources present within the Scheduler. The process of assigning different working days for every individual resources is applicable only for the vertical Scheduler mode and not for timeline view, whereas the customization of work-hours for each resources is applicable on both the Scheduler orientation.

Example: To display the Scheduler with each individual resources having different work-hours and work-days,

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Group(group => group.Resources(ViewBag.Resources)).Resources(res => { res.DataSource(ViewBag.Doctors).Field("DoctorId").Title("Doctor Name").Name("Doctors").TextField("text").IdField("id").ColorField("color").WorkDaysField("workDays").StartHourField("startHour").EndHourField("endHour").Add(); }).Views(view => { view.Option(View.WorkWeek).Add(); view.Option(View.Month).Add(); }).EventSettings(e => e.DataSource(ViewBag.datasource)).SelectedDate(new DateTime(2018, 4, 1)).Render()
        </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 custom-workdays()
        {
            ViewBag.datasource = new ScheduleData().GetDoctorData();
            List<DoctorRes> doctors = new List<DoctorRes>();
            doctors.Add(new DoctorRes { text = "Will Smith", id = 1, color = "#ea7a57", workDays = new List<int> { 1, 2, 4, 5 }, startHour = "07:00", endHour = "13:00" });
            doctors.Add(new DoctorRes { text = "Alice", id = 2, color = "rgb(53, 124, 210)", workDays = new List<int> { 1, 3, 5 }, startHour = "09:00", endHour = "17:00" });
            doctors.Add(new DoctorRes { text = "Robson", id = 3, color = "#7fa900", startHour = "08:00", endHour = "16:00" });
            ViewBag.Doctors = doctors;

            string[] resources = new string[] { "Doctors" };
            ViewBag.Resources = resources;
            return View();
        }
    }
    public class DoctorRes
    {
        public string text { set; get; }
        public int id { set; get; }
        public string color { set; get; }
        public List<int> workDays { set; get; }
        public string startHour { set; get; }
        public string endHour { set; get; }
    }
}

Dynamically add or remove resources to and from the Schedule layout

Initially Schedule is displayed with single resource with its related set of appointments. When the additional checkboxes given are checked and unchecked, the respective resources gets added up or removed from the schedule layout. To add new resources dynamically, addResource method is used which accepts the arguments such as resource object, resource name (within which level, the resource object to be added) and index (position where the resource needs to be added). To remove the resources dynamically, removeResource method is used which accepts the index (position from where the resource to be removed) and resource name (within which level, the resource object presents) as parameters.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <table id="property" title="Show / Hide Resource" style="width: 100%">
            <tbody>
                <tr style="height: 100%">
                    <td style="width: 25%">
                        @Html.EJS().CheckBox("personal").Change("onChange").Checked(true).Disabled(true).Label("My Calendar").Value("1").Render()
                    </td>
                    <td style="width: 25%">
                        @Html.EJS().CheckBox("company").Change("onChange").Checked(false).Label("Company").Value("2").Render()
                    </td>
                    <td style="width: 25%">
                        @Html.EJS().CheckBox("birthdays").Change("onChange").Checked(false).Label("Birthday").Value("3").Render()
                    </td>
                    <td style="width: 25%">
                        @Html.EJS().CheckBox("holidays").Change("onChange").Checked(false).Label("Holiday").Value("4").Render()
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="content-wrapper">
        @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Group(group => group.Resources(ViewBag.Resources)).Resources(res =>
            {
                res.DataSource(ViewBag.Calendars).Field("CalendarId").Title("Calendars").Name("Calendars").TextField("CalendarName").IdField("CalendarId").ColorField("CalendarColor").AllowMultiple(true).Add();
            }).EventSettings(e => e.DataSource(ViewBag.datasource)).Views(ViewBag.view).SelectedDate(new DateTime(2018, 4, 1)).Render()
    </div>
    <style>
        .property-panel-content .e-checkbox-wrapper.personal .e-label {
            color: #808080;
        }

        .property-panel-content .e-checkbox-wrapper.personal .e-frame {
            background-color: #c43081;
			border-color: transparent;
        }

        .property-panel-content .e-checkbox-wrapper.company .e-frame {
            background-color: #ff7f50;
			border-color: transparent;
        }

        .property-panel-content .e-checkbox-wrapper.birthday .e-frame {
            background-color: #AF27CD;
			border-color: transparent;
        }

        .property-panel-content .e-checkbox-wrapper.holiday .e-frame {
            background-color: #808000;
			border-color: transparent;
        }
		
		.e-schedule .e-month-view .e-appointment {
			border-color: transparent;
		}

        .highcontrast .property-panel-content .e-checkbox-wrapper .e-frame.e-check,
        .bootstrap .property-panel-content .e-checkbox-wrapper .e-frame.e-check {
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        function onChange(args) {
            var calendarCollections = [
                { CalendarName: 'My Calendar', CalendarId: 1, CalendarColor: '#c43081' },
                { CalendarName: 'Company', CalendarId: 2, CalendarColor: '#ff7f50' },
                { CalendarName: 'Birthday', CalendarId: 3, CalendarColor: '#AF27CD' },
                { CalendarName: 'Holiday', CalendarId: 4, CalendarColor: '#808000' }
            ];
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var value = parseInt(args.event.target.getAttribute('value'), 10);
            var resourceData = calendarCollections.filter(function (calendar) { return calendar.CalendarId === value; });
            if (args.checked) {
                scheduleObj.addResource(resourceData[0], 'Calendars', value - 1);
            } else {
                scheduleObj.removeResource(value, 'Calendars');
            }
        }
    </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 AddRemoveResources()
        {
            List<CalendarRes> calendarCollections = new List<CalendarRes>();
            calendarCollections.Add(new CalendarRes { CalendarName = "My Calendar", CalendarId = 1, CalendarColor = "#c43081" });
            ViewBag.Calendars = calendarCollections;

            ScheduleData data = new ScheduleData();
            List<ScheduleData.ResourceEventsData> holidayData = data.GetHolidayData();
            List<ScheduleData.ResourceEventsData> birthdayData = data.GetBirthdayData();
            List<ScheduleData.ResourceEventsData> companyData = data.GetCompanyData();
            List<ScheduleData.ResourceEventsData> personalData = data.GetPersonalData();
            ViewBag.datasource = holidayData.Concat(birthdayData).Concat(companyData).Concat(personalData);

            List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
            {
                new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
            };
            ViewBag.view = viewOption;

            string[] resources = new string[] { "Calendars" };
            ViewBag.Resources = resources;

            return View();
        }
        public class CalendarRes
        {
            public string CalendarName { set; get; }
            public int CalendarId { set; get; }
            public string CalendarColor { set; get; }
        }
    }
}