Data binding in EJ2 JavaScript Scheduler control

29 Jan 202524 minutes to read

The Scheduler uses DataManager, which supports both RESTful data service binding and JavaScript object array binding. The dataSource property of the Scheduler can be assigned either with an instance of DataManager or JavaScript object array collection. The Scheduler supports two types of data binding methods:

  • Local data
  • Remote data

Binding local data

To bind local JSON data to the Scheduler, you can simply assign a JavaScript object array to the dataSource option of the scheduler within the eventSettings property. The JSON object dataSource can also be provided as an instance of DataManager and assigned to the Scheduler dataSource property.

var scheduleData = [{
    Id: 1,
    Subject: 'Explosion of Betelgeuse Star',
    StartTime: new Date(2018, 1, 15, 9, 30),
    EndTime: new Date(2018, 1, 15, 11, 0)
}, {
    Id: 2,
    Subject: 'Thule Air Crash Report',
    StartTime: new Date(2018, 1, 12, 12, 0),
    EndTime: new Date(2018, 1, 12, 14, 0)
}, {
    Id: 3,
    Subject: 'Blue Moon Eclipse',
    StartTime: new Date(2018, 1, 13, 9, 30),
    EndTime: new Date(2018, 1, 13, 11, 0)
}, {
    Id: 4,
    Subject: 'Meteor Showers in 2018',
    StartTime: new Date(2018, 1, 14, 13, 0),
    EndTime: new Date(2018, 1, 14, 14, 30)
}];

var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">
<head>
        <title>Schedule Typescript Control</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Schedule Control">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>
        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="text/javascript"></script>
</body>
</html>

By default, DataManager uses JsonAdaptor for binding local data.

You can also bind different field names to the default event fields as well as include additional custom fields to the event object collection which can be referred here.

Binding remote data

You can bind any kind of remote data service to the Scheduler. To do this:

  1. Create an instance of DataManager.
  2. Provide the service URL to the url option of DataManager.
  3. Assign the DataManager instance to the dataSource property within eventSettings.

Using ODataV4Adaptor

ODataV4 is a standardized protocol for creating and consuming data. To connect with ODataV4 service end points, it is necessary to make use of ODataV4Adaptor within DataManager. Refer to the following code example to retrieve the data from ODataV4 service using the DataManager.

var dataManager = new ej.data.DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
    adaptor: new ej.data.ODataV4Adaptor(),
    crossDomain: true
});

var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    selectedDate: new Date(1996, 6, 9),
    eventSettings: {
        dataSource: dataManager,
        fields: {
            id: 'Id',
            subject: { name: 'ShipName' },
            location: { name: 'ShipCountry' },
            description: { name: 'ShipAddress' },
            startTime: { name: 'OrderDate' },
            endTime: { name: 'RequiredDate' },
            recurrenceRule: { name: 'ShipRegion' }
        }
    },
    readonly: true
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>Schedule Typescript Control</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Schedule Control">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="text/javascript"></script>
</body>

</html>

Filter events using the in-built query

To enable server-side filtering based on predetermined conditions, set the includeFiltersInQuery API to true. This constructs a filter query using the start date, end date, and recurrence rule, allowing the request to be filtered accordingly.

This method greatly improves the component’s performance by reducing the data transferred to the client side. As a result, the component’s efficiency and responsiveness are significantly enhanced, resulting in a better user experience. However, it is important to consider the possibility of longer query strings, which may cause issues with the maximum URL length or server limitations on query string length.

var dataManager = new ej.data.DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
    adaptor: new ej.data.ODataV4Adaptor(),
    crossDomain: true
});

var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    selectedDate: new Date(1996, 6, 9),
    currentView: 'Month',
    eventSettings: {
        query: new ej.data.Query(),
        includeFiltersInQuery: true, dataSource: dataManager, fields: {
            id: 'Id',
            subject: { name: 'ShipName' },
            location: { name: 'ShipCountry' },
            description: { name: 'ShipAddress' },
            startTime: { name: 'OrderDate' },
            endTime: { name: 'RequiredDate' },
            recurrenceRule: { name: 'ShipRegion' }
        }
    },
    readonly: true
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>Schedule Typescript Control</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Schedule Control">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="text/javascript"></script>
</body>

</html>

The following image represents how the parameters are passed using ODataV4 filter.

ODataV4 filter

Using custom adaptor

You can create your own custom adaptor by extending the built-in available adaptors. The following example demonstrates custom adaptor usage and how to add a custom field EventID for appointments by overriding the processResponse method of the ODataV4Adaptor.

class CustomAdaptor extends ej.data.ODataV4Adaptor {
    processResponse() {
        var i = 0;
        // calling base class processResponse function
        var original = super.processResponse.apply(this, arguments);
        // adding employee id
        original.forEach(function (item) { item['EmpID'] = ++i });
        return original;
    }
}

var dataManager = new ej.data.DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
    adaptor: new CustomAdaptor
});

var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    selectedDate: new Date(1996, 6, 9),
    readonly: true,
    eventSettings: {
        dataSource: dataManager,
        fields: {
            id: 'Id',
            subject: { name: 'ShipName' },
            location: { name: 'ShipCountry' },
            description: { name: 'ShipAddress' },
            startTime: { name: 'OrderDate' },
            endTime: { name: 'RequiredDate' },
            recurrenceRule: { name: 'ShipRegion' }
        }
    }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>Schedule Typescript Control</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Schedule Control">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="text/javascript"></script>
</body>

</html>

Loading data via AJAX post

You can bind the event data through external ajax request and assign it to the dataSource property of Scheduler. In the following code example, we have retrieved the data from server with the help of ajax request and assigned the resultant data to the dataSource property of Scheduler within the onSuccess event of Ajax.

[src/app/app.ts]

import { Ajax } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let dataManager: object = [];
let ajax = new Ajax('Home/GetData', 'GET', false);
ajax.onSuccess = function (value) {
    dataManager = value;
};
ajax.send();
let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2017, 5, 11),
    eventSettings: { dataSource: dataManager }
});
scheduleObj.appendTo('#Schedule');

Definition for the controller method GetData can be referred here.

Passing additional parameters to the server

To send additional custom parameters to the server-side post:

  1. Use the addParams method of Query.
  2. Assign the Query object with additional parameters to the query property of the Scheduler.
var dataManager = new ej.data.DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
    adaptor: new ej.data.ODataV4Adaptor(),
    crossDomain: true
});
var dataQuery = new ej.data.Query().addParams('readOnly', 'true');

var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    selectedDate: new Date(1996, 6, 9),
    readonly: true,
    eventSettings: {
        dataSource: dataManager, query: dataQuery,
        fields: {
            id: 'Id',
            subject: { name: 'ShipName' },
            location: { name: 'ShipCountry' },
            description: { name: 'ShipAddress' },
            startTime: { name: 'OrderDate' },
            endTime: { name: 'RequiredDate' },
            recurrenceRule: { name: 'ShipRegion' }
        }
    }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>Schedule Typescript Control</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Schedule Control">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="text/javascript"></script>
</body>

</html>

Parameters added using the query property will be sent with every data request to the server for all Scheduler actions.

Handling failure actions

You can handle server-side exceptions and error messages on the client-side using the Scheduler’s actionFailure event. The event argument contains the error details returned from the server.

var dataManager = new ej.data.DataManager({
    url: 'http://some.com/invalidUrl'
});

var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    selectedDate: new Date(2017, 5, 11),
    eventSettings: { dataSource: dataManager },
    actionFailure: function () {
        var span = document.createElement('span');
        scheduleObj.element.parentNode.insertBefore(span, scheduleObj.element);
        span.style.color = '#FF0000'
        span.innerHTML = 'Server exception: 404 Not found';
    }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>Schedule Typescript Control</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Schedule Control">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="text/javascript"></script>
</body>

</html>

The actionFailure event triggers not only when the server returns errors but also when there’s an exception while processing any Scheduler CRUD action.

Scheduler CRUD actions

The CRUD (Create, Read, Update and Delete) actions can be performed easily on Scheduler appointments using the various adaptors available within the DataManager. Most preferably, we will be using UrlAdaptor for performing CRUD actions on scheduler appointments.

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let dataManager: DataManager = new DataManager({
       url: 'Home/GetData', // 'controller/actions'
       crudUrl: 'Home/UpdateData',
       adaptor: new UrlAdaptor
   });

let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2017, 5, 5),
    eventSettings: { dataSource: dataManager }
});
scheduleObj.appendTo('#Schedule');

The server-side controller code to handle the CRUD operations are as follows.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ScheduleSample.Models;

namespace ScheduleSample.Controllers
{
    public class HomeController : Controller
    {
        ScheduleDataDataContext db = new ScheduleDataDataContext();
        public ActionResult Index()
        {
            return View();
        }  
        public JsonResult LoadData()  // Here we get the Start and End Date and based on that can filter the data and return to Scheduler
        {
            var data = db.ScheduleEventDatas.ToList();
            return Json(data, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public JsonResult UpdateData(EditParams param)
        {
            if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments
            {
                var value = (param.action == "insert") ? param.value : param.added[0];
                int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1;
                DateTime startTime = Convert.ToDateTime(value.StartTime);
                DateTime endTime = Convert.ToDateTime(value.EndTime);
                ScheduleEventData appointment = new ScheduleEventData()
                {
                    Id = intMax + 1,
                    StartTime = startTime.ToLocalTime(),
                    EndTime = endTime.ToLocalTime(),
                    Subject = value.Subject,
                    IsAllDay = value.IsAllDay,
                    StartTimezone = value.StartTimezone,
                    EndTimezone = value.EndTimezone,
                    RecurrenceRule = value.RecurrenceRule,
                    RecurrenceID = value.RecurrenceID,
                    RecurrenceException = value.RecurrenceException
                };
                db.ScheduleEventDatas.InsertOnSubmit(appointment);
                db.SubmitChanges();
            }
            if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment
            {
                var value = (param.action == "update") ? param.value : param.changed[0];
                var filterData = db.ScheduleEventDatas.Where(c => c.Id == Convert.ToInt32(value.Id));
                if (filterData.Count() > 0)
                {
                    DateTime startTime = Convert.ToDateTime(value.StartTime);
                    DateTime endTime = Convert.ToDateTime(value.EndTime);
                    ScheduleEventData appointment = db.ScheduleEventDatas.Single(A => A.Id == Convert.ToInt32(value.Id));
                    appointment.StartTime = startTime.ToLocalTime();
                    appointment.EndTime = endTime.ToLocalTime();
                    appointment.StartTimezone = value.StartTimezone;
                    appointment.EndTimezone = value.EndTimezone;
                    appointment.Subject = value.Subject;
                    appointment.IsAllDay = value.IsAllDay;
                    appointment.RecurrenceRule = value.RecurrenceRule;
                    appointment.RecurrenceID = value.RecurrenceID;
                    appointment.RecurrenceException = value.RecurrenceException;
                }
                db.SubmitChanges();
            }
            if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) // this block of code will execute while removing the appointment
            {
                if (param.action == "remove")
                {
                    int key = Convert.ToInt32(param.key);
                    ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == key).FirstOrDefault();
                    if (appointment != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment);
                }
                else
                {
                    foreach (var apps in param.deleted)
                    {
                        ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == apps.Id).FirstOrDefault();
                        if (appointment != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment);
                    }
                }
                db.SubmitChanges();
            }
            var data = db.ScheduleEventDatas.ToList();
            return Json(data, JsonRequestBehavior.AllowGet);
        }

        public class EditParams
        {
            public string key { get; set; }
            public string action { get; set; }
            public List<ScheduleEventData> added { get; set; }
            public List<ScheduleEventData> changed { get; set; }
            public List<ScheduleEventData> deleted { get; set; }
            public ScheduleEventData value { get; set; }
        }
    }
}

Configuring Scheduler with Google API service

We have assigned our custom created Google Calendar url to the DataManager and assigned the same to the Scheduler dataSource. Since the events data retrieved from the Google Calendar will be in its own object format, therefore it needs to be resolved manually within the Scheduler’s dataBinding event. Within this event, the event fields needs to be mapped properly and then assigned to the result.

var calendarId = 'en.usa%23holiday@group.v.calendar.google.com';
var publicKey = 'AIzaSyBgbX_tgmVanBP4yafDPPXxWr70sjbKAXM';

var dataManager = new ej.data.DataManager({
    url: 'https://www.googleapis.com/calendar/v3/calendars/' + calendarId + '/events?key=' + publicKey,
    adaptor: new ej.data.WebApiAdaptor(),
    crossDomain: true
});

var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    eventSettings: { dataSource: dataManager },
    readonly: true,
    currentView: 'Month',
    timezone: 'UTC',
    dataBinding: function (e) {
        var items = e.result.items;
        var scheduleData = [];
        if (items.length > 0) {
            for (var i = 0; i < items.length; i++) {
                var event = items[i];
                var when = event.start.dateTime;
                var start = event.start.dateTime;
                var end = event.end.dateTime;
                if (!when) {
                    when = event.start.date;
                    start = event.start.date;
                    end = event.end.date;
                }
                scheduleData.push({
                    Id: event.id,
                    Subject: event.summary,
                    StartTime: new Date(start),
                    EndTime: new Date(end),
                    IsAllDay: !event.start.dateTime
                });
            }
        }
        e.result = scheduleData;
    }
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
        <title>Schedule Typescript Control</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Schedule Control">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet">
        <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id="container">
                <div id="Schedule"></div>
        </div>

        <script>
                var ele = document.getElementById('container');
                if (ele) {
                        ele.style.visibility = "visible";
                }   
        </script>
        <script src="index.js" type="text/javascript"></script>
</body>

</html>

See Also

Salesforce Integration

You can refer to our JavaScript Scheduler feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Scheduler example to knows how to present and manipulate data.