From ed2068501300788074f9ed61740c92e60f7e39cb Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Mon, 30 May 2022 00:56:50 +0800
Subject: [PATCH] =?UTF-8?q?fe-07=20=E5=AE=8C=E6=88=90=E6=97=A5=E5=8E=86?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lazy-timer-fe/src/pages/Charts/Calendar.jsx | 50 +++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 lazy-timer-fe/src/pages/Charts/Calendar.jsx

diff --git a/lazy-timer-fe/src/pages/Charts/Calendar.jsx b/lazy-timer-fe/src/pages/Charts/Calendar.jsx
new file mode 100644
index 0000000..ac202e9
--- /dev/null
+++ b/lazy-timer-fe/src/pages/Charts/Calendar.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule'
+import { DatePickerComponent } from '@syncfusion/ej2-react-calendars'
+
+import { scheduleData } from '../data/dummy'
+import { Header } from '../components'
+
+// eslint-disable-next-line react/destructuring-assignment
+const PropertyPane = props => <div className="mt-5">{props.children}</div>
+
+const Scheduler = () => {
+    const [scheduleObj, setScheduleObj] = useState()
+
+    const change = args => {
+        scheduleObj.selectedDate = args.value
+        scheduleObj.dataBind()
+    }
+
+    const onDragStart = arg => {
+        // eslint-disable-next-line no-param-reassign
+        arg.navigation.enable = true
+    }
+
+    return (
+        <div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
+            <Header category="App" title="Calendar" />
+            <ScheduleComponent height="650px" ref={schedule => setScheduleObj(schedule)} selectedDate={new Date(2021, 0, 10)} eventSettings={{ dataSource: scheduleData }} dragStart={onDragStart}>
+                <ViewsDirective>
+                    {['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'].map(item => (
+                        <ViewDirective key={item} option={item} />
+                    ))}
+                </ViewsDirective>
+                <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
+            </ScheduleComponent>
+            <PropertyPane>
+                <table style={{ width: '100%', background: 'white' }}>
+                    <tbody>
+                        <tr style={{ height: '50px' }}>
+                            <td style={{ width: '100%' }}>
+                                <DatePickerComponent value={new Date(2021, 0, 10)} showClearButton={false} placeholder="Current Date" floatLabelType="Always" change={change} />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </PropertyPane>
+        </div>
+    )
+}
+
+export default Scheduler