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