React Scheduler - Web API Service

DevExtreme provides the DevExtreme.AspNet.Data extension to access an ASP.NET Web API service. This extension consists of two parts: the server-side part implements data processing on the server according to the protocol the Scheduler uses; the client-side part creates and configures a CustomStore to access the server from the client. The following code shows how to use the extension's client-side createStore method.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Scheduler from 'devextreme-react/scheduler';
  • import { createStore } from 'devextreme-aspnet-data-nojquery';
  • const serviceUrl = "http://url/to/my/service";
  • const dataSource = createStore({
  • key: "ID",
  • loadUrl: serviceUrl + "/GetAction",
  • insertUrl: serviceUrl + "/InsertAction",
  • updateUrl: serviceUrl + "/UpdateAction",
  • deleteUrl: serviceUrl + "/DeleteAction"
  • });
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Scheduler
  • dataSource={dataSource}
  • />
  • );
  • }
  • }
  • export default App;

View Demo