React

Search results

Data Binding in React Schedule component

24 Jun 2022 / 11 minutes to read

The Scheduler uses DataManager, which supports both RESTful data service binding and JavaScript object array binding. The dataSource property of Scheduler can be assigned either with the instance of DataManager or JavaScript object array collection, as it supports the following two kind 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.

Source

Preview

index.jsx

index.html

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = [{
                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)
            }];
    }
    render() {
        return <ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: this.data }}>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
    </ScheduleComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';

class App extends React.Component<{}, {}> {
  private data: Object[] = [{
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)
  }];
render() {
    return <ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)}
    eventSettings={ { dataSource: this.data } }>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));

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

Any kind of remote data services can be bound to the Scheduler. To do so, create an instance of DataManager and provide the service URL to the url option of DataManager and then assign it to the dataSource property within eventSettings.

Using ODataV4Adaptor

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

Source

Preview

index.jsx

index.html

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
class App extends React.Component, ODataV4Adaptor {
    constructor() {
        super(...arguments);
        this.dataManager = new DataManager({
            url: 'https://ej2services.syncfusion.com/production/web-services/api/Schedule',
            adaptor: new ODataV4Adaptor
        });
    }
    render() {
        return <ScheduleComponent height='550px' selectedDate={new Date(2020, 9, 20)} readonly={true} eventSettings={{ dataSource: this.dataManager }}>
  <Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

class App extends React.Component<{}, {}>, ODataV4Adaptor {
  private dataManager: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Schedule',
adaptor: new ODataV4Adaptor
  });
  render() {
return <ScheduleComponent height='550px' selectedDate={new Date(2020, 9, 20)} readonly={true}
eventSettings={ { dataSource: this.dataManager } }>
  <Inject services={[Day, Week, WorkWeek, Month,Agenda]} />
</ScheduleComponent>
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));

}

Using custom adaptor

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

Source

Preview

index.jsx

index.html

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
class CustomAdaptor extends ODataV4Adaptor {
    processResponse() {
        let i = 0;
        // calling base class processResponse function
        let original = super.processResponse.apply(this, arguments);
        // adding event id
        original.forEach((item) => item['EventID'] = ++i);
        return original;
    }
}
class App extends React.Component, CustomAdaptor {
    constructor() {
        super(...arguments);
        this.dataManager = new DataManager({
            url: 'https://ej2services.syncfusion.com/production/web-services/api/Schedule',
            adaptor: new CustomAdaptor
        });
    }
    render() {
        return <ScheduleComponent height='550px' selectedDate={new Date(2020, 9, 20)} readonly={true} eventSettings={{ dataSource: this.dataManager }}>
  <Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

class CustomAdaptor extends ODataV4Adaptor {
  processResponse(): Object {
  let i: number = 0;
  // calling base class processResponse function
  let original: Object[] = super.processResponse.apply(this, arguments);
  // adding event id
  original.forEach((item: Object) => item['EventID'] = ++i);
  return original;
  }
}

class App extends React.Component<{}, {}>, CustomAdaptor {
  private dataManager: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Schedule',
adaptor: new CustomAdaptor
  });
  render() {
return <ScheduleComponent height='550px' selectedDate={new Date(2020, 9, 20)} readonly={true}
eventSettings={ { dataSource: this.dataManager } }>
  <Inject services={[Day, Week, WorkWeek, Month,Agenda]} />
</ScheduleComponent>
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));

}

Loading data via AJAX post

You can bind the event data through external ajax request and assign it to the dataSourceproperty 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.tsx]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { Ajax } from '@syncfusion/ej2-base';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

class App extends React.Component<{}, {}> {
  private dataManager: object = [];
  let ajax = new Ajax('Home/GetData', 'GET', false);
  ajax.onSuccess = function (value) {
dataManager = value;
  };
  ajax.send();
  render() {
return <ScheduleComponent height='550px' selectedDate={new Date(2017, 5, 11)
eventSettings={ { dataSource: this.dataManager } }>
  <Inject services={[Day, Week, WorkWeek, Month,Agenda]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));

[src/app/app.ts]

Definition for the controller method GetData can be referred here.

Passing additional parameters to the server

To send an additional custom parameter to the server-side post, you need to make use of the addParams method of Query. Now, assign this Query object with additional parameters to the query property of Scheduler.

Source

Preview

index.jsx

index.html

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataManager = new DataManager({
            url: 'https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData',
            adaptor: new ODataV4Adaptor
        });
        this.dataQuery = new Query().from("Events").addParams('readOnly', 'true');
    }
    render() {
        return <ScheduleComponent height='550px' readonly={true} eventSettings={{ dataSource: this.dataManager, query: this.dataQuery }} selectedDate={new Date(2017, 5, 11)}>
  <Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

class App extends React.Component<{}, {}> {
  private dataManager: DataManager = new DataManager({
url: 'https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData',
adaptor: new ODataV4Adaptor
  });
  private dataQuery: Query = new Query().from("Events").addParams('readOnly', 'true');
  render() {
return <ScheduleComponent height='550px' readonly= {true}
eventSettings= { { dataSource: this.dataManager, query: this.dataQuery } } selectedDate={new Date(2017, 5, 11)}>
  <Inject services={[Day, Week, WorkWeek, Month,Agenda]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));

The parameters added using the query property will be sent along with the data request sent to the server on every scheduler actions.

Handling failure actions

During the time of Scheduler interacting with server, there are chances that some server-side exceptions may occur. You can acquire those error messages or exception details in client-side using the actionFailure event of Scheduler.

The argument passed to the actionFailure event contains the error details returned from the server.

Source

Preview

index.jsx

index.html

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager } from '@syncfusion/ej2-data';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataManager = new DataManager({
            url: 'http://some.com/invalidUrl'
        });
    }
    onActionFailure() {
        let span = document.createElement('span');
        this.scheduleObj.element.parentNode.insertBefore(span, this.scheduleObj.element);
        span.style.color = '#FF0000';
        span.innerHTML = 'Server exception: 404 Not found';
    }
    render() {
        return <ScheduleComponent height='550px' ref={schedule => this.scheduleObj = schedule} selectedDate={new Date(2017, 5, 11)} actionFailure={this.onActionFailure.bind(this)} eventSettings={{ dataSource: this.dataManager }}>
  <Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, ViewsDirective, ViewDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager } from '@syncfusion/ej2-data';

class App extends React.Component<{}, {}> {
  private scheduleObj: ScheduleComponent;
  private dataManager: DataManager = new DataManager({
url: 'http://some.com/invalidUrl'
  });
  private onActionFailure(): void {
let span: HTMLElement = document.createElement('span');
this.scheduleObj.element.parentNode.insertBefore(span, this.scheduleObj.element);
span.style.color = '#FF0000'
span.innerHTML = 'Server exception: 404 Not found';
  }
  render() {
return <ScheduleComponent height='550px' ref={schedule => this.scheduleObj = schedule} selectedDate={new Date(2017, 5, 11)} actionFailure={this.onActionFailure.bind(this)} eventSettings= { { dataSource: this.dataManager } }>
  <Inject services={[Day, Week, WorkWeek, Month,Agenda]} />
</ScheduleComponent>
 }
};
ReactDOM.render(<App />, document.getElementById('schedule'));

The actionFailure event will be triggered not only on server returning errors, but also when there is an exception while processing any of the Scheduler CRUD actions.

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.

Source

Preview

index.jsx

index.html

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.calendarId = '5105trob9dasha31vuqek6qgp0@group.calendar.google.com';
        this.publicKey = 'AIzaSyD76zjMDsL_jkenM5AAnNsORypS1Icuqxg';
        this.dataManger = new DataManager({
            url: 'https://www.googleapis.com/calendar/v3/calendars/' + this.calendarId + '/events?key=' + this.publicKey,
            adaptor: new WebApiAdaptor,
            crossDomain: true
        });
    }
    onDataBinding(e) {
        let items = e.result.items;
        let scheduleData = [];
        if (items.length > 0) {
            for (let i = 0; i < items.length; i++) {
                let event = items[i];
                let when = event.start.dateTime;
                let start = event.start.dateTime;
                let 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;
    }
    render() {
        return <ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='550px' selectedDate={new Date(2018, 10, 14)} readonly={true} eventSettings={{ dataSource: this.dataManger }} dataBinding={this.onDataBinding.bind(this)}>
  <Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DataManager, WebApiAdaptor, Query } from '@syncfusion/ej2-data';

class App extends React.Component<{}, {}> {
  private scheduleObj: ScheduleComponent;
  private calendarId: string = '5105trob9dasha31vuqek6qgp0@group.calendar.google.com';
  private publicKey: string = 'AIzaSyD76zjMDsL_jkenM5AAnNsORypS1Icuqxg';
  private dataManger: DataManager = new DataManager({
  url: 'https://www.googleapis.com/calendar/v3/calendars/' + this.calendarId + '/events?key=' + this.publicKey,
  adaptor: new WebApiAdaptor,
  crossDomain: true
  });

  private onDataBinding(e: { [key: string]: Object }): void {
let items: { [key: string]: Object }[] = (e.result as { [key: string]: Object }).items as { [key: string]: Object }[];
let scheduleData: Object[] = [];
if (items.length > 0) {
    for (let i: number = 0; i < items.length; i++) {
        let event: { [key: string]: Object } = items[i];
        let when: string = (event.start as { [key: string]: Object }).dateTime as string;
        let start: string = (event.start as { [key: string]: Object }).dateTime as string;
        let end: string = (event.end as { [key: string]: Object }).dateTime as string;
        if (!when) {
            when = (event.start as { [key: string]: Object }).date as string;
            start = (event.start as { [key: string]: Object }).date as string;
            end = (event.end as { [key: string]: Object }).date as string;
        }
        scheduleData.push({
            Id: event.id,
            Subject: event.summary,
            StartTime: new Date(start),
            EndTime: new Date(end),
            IsAllDay: !(event.start as { [key: string]: Object }).dateTime
        });
    }
}
e.result = scheduleData;
  }
  render() {
return <ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%'
  height='550px' selectedDate={new Date(2018, 10, 14)} readonly={true}
  eventSettings={{ dataSource: this.dataManger }} dataBinding={this.onDataBinding.bind(this)}>
  <Inject services={[Day, Week, WorkWeek, Month,Agenda]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));

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

Contents

Binding local data
Binding remote data
Using ODataV4Adaptor
Using custom adaptor
Loading data via AJAX post
Passing additional parameters to the server
Handling failure actions
Scheduler CRUD actions
Configuring Scheduler with Google API service

Contents

Binding local data
Binding remote data
Using ODataV4Adaptor
Using custom adaptor
Loading data via AJAX post
Passing additional parameters to the server
Handling failure actions
Scheduler CRUD actions
Configuring Scheduler with Google API service

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!