Merge pull request #13 from kmkrish001/main

Updated react scheduler sample to latest version.

package.json

@@ -1,21 +1,20 @@
 {
-  "name": "react-breadcrumb",
+  "name": "schedule-react",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@syncfusion/ej2-react-navigations": "^20.1.57",
-    "@syncfusion/ej2-react-schedule": "^20.1.57",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
+    "@syncfusion/ej2-react-schedule": "^27.1.53",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.1",
-    "@types/node": "^16.11.36",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.114",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
-    "typescript": "^4.7.2",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/index.html

@@ -9,7 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.css

@@ -1,38 +1,10 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
+@import "../node_modules/@syncfusion/ej2-calendars/styles/bootstrap5.css";
+@import "../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
+@import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
+@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
+@import "../node_modules/@syncfusion/ej2-react-schedule/styles/bootstrap5.css";

src/App.tsx

@@ -1,31 +1,37 @@
 import React from 'react';
 import './App.css';
-import { ScheduleComponent, Inject, Agenda, Day, Month, Week, WorkWeek, EventSettingsModel } from '@syncfusion/ej2-react-schedule';
-import { DataManager,WebApiAdaptor } from '@syncfusion/ej2-data';
-class App extends React.Component {
-  private localData: EventSettingsModel = {
-    dataSource: [{
-      EndTime: new Date(2019, 0, 11, 6, 30),
-      StartTime: new Date(2019, 0, 11, 4, 0)
-    }]
-  };
-  private remoteData = new DataManager({
-    url: 'https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData', 
-    adaptor: new WebApiAdaptor, 
-    crossDomain: true 
-  });
-
-
-  render() {
-    return (
-      <ScheduleComponent currentView='Month'
-      eventSettings={{ dataSource: this.remoteData }} selectedDate={new Date(2017, 5, 5)} > 
-        <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
-      </ScheduleComponent>  
-
-    );
-  }
+import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
+
+function App() {
+  const data = [
+    {
+    Id: 1,
+    Subject: 'Paris',
+    StartTime: new Date(2023, 1, 15, 10, 0),
+    EndTime: new Date(2023, 1, 15, 12, 30),
+  },
+  {
+    Id: 2,
+    Subject: 'Germany',
+    StartTime: new Date(2023, 1, 17, 12, 0),
+    EndTime: new Date(2023, 1, 17, 13, 30),
+  },
+  {
+    Id: 3,
+    Subject: 'England',
+    StartTime: new Date(2023, 1, 13, 9, 0),
+    EndTime: new Date(2023, 1, 13, 11, 0),
+  },
+];
+
+  const eventSettings = { dataSource: data }
+  return (
+    <div className="App">
+      <ScheduleComponent height='550px' selectedDate={new Date(2023, 1, 15)} eventSettings={eventSettings}>
+            <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
+          </ScheduleComponent>
+    </div>
+  );
 }
-
 
-export default App;
+export default App;

src/index.css

@@ -11,5 +11,3 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
-
-

src/index.tsx

@@ -3,9 +3,6 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { registerLicense } from '@syncfusion/ej2-base';
-
-registerLicense('ORg4AjUWIQA/Gnt2VVhhQlFaclhJWHxMYVF2R2FJeFRycF9FaEwgOX1dQl9hSXpTcEVmWn9feHVRQWY=');
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement

src/react-app-env.d.ts

@@ -1 +1 @@
-/// <reference types="react-scripts" />
+/// <reference types="react-scripts" />

tsconfig.json

@@ -1,26 +1,26 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}