Browse Source

fe-07 完成日历图标

master
Chunxian Zhang 2 years ago
parent
commit
ed20685013
1 changed files with 50 additions and 0 deletions
  1. +50
    -0
      lazy-timer-fe/src/pages/Charts/Calendar.jsx

+ 50
- 0
lazy-timer-fe/src/pages/Charts/Calendar.jsx View File

@ -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

Loading…
Cancel
Save