Updated react scheduler sample to latest version with typescript.

Author: kmkrish001

package.json

@@ -1,15 +1,20 @@
 {
-  "name": "scheduling-dashboard",
+  "name": "schedule-react",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@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.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.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -7,5 +7,4 @@
 @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";
-
+@import "../node_modules/@syncfusion/ej2-react-schedule/styles/bootstrap5.css";

src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/App.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import './App.css';
+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;

src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/react-app-env.d.ts

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

src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

tsconfig.json

@@ -0,0 +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"
+  ]
+}