You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.2 KiB
102 lines
3.2 KiB
import React from 'react';
|
|
import { Calendar, Col, Radio, Row, Select, Typography } from 'antd';
|
|
import type { Dayjs } from 'dayjs';
|
|
import dayjs from 'dayjs';
|
|
import 'dayjs/locale/zh-cn';
|
|
import dayLocaleData from 'dayjs/plugin/localeData';
|
|
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
|
|
|
|
dayjs.extend(dayLocaleData);
|
|
|
|
const App: React.FC = () => {
|
|
const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
|
|
console.log(value.format('YYYY-MM-DD'), mode);
|
|
};
|
|
|
|
return (
|
|
<div className="site-calendar-customize-header-wrapper">
|
|
<Calendar
|
|
fullscreen={false}
|
|
headerRender={({ value, type, onChange, onTypeChange }) => {
|
|
const start = 0;
|
|
const end = 12;
|
|
const monthOptions = [];
|
|
|
|
let current = value.clone();
|
|
const localeData = value.localeData();
|
|
const months = [];
|
|
for (let i = 0; i < 12; i++) {
|
|
current = current.month(i);
|
|
months.push(localeData.monthsShort(current));
|
|
}
|
|
|
|
for (let i = start; i < end; i++) {
|
|
monthOptions.push(
|
|
<Select.Option key={i} value={i} className="month-item">
|
|
{months[i]}
|
|
</Select.Option>,
|
|
);
|
|
}
|
|
|
|
const year = value.year();
|
|
const month = value.month();
|
|
const options = [];
|
|
for (let i = year - 10; i < year + 10; i += 1) {
|
|
options.push(
|
|
<Select.Option key={i} value={i} className="year-item">
|
|
{i}
|
|
</Select.Option>,
|
|
);
|
|
}
|
|
return (
|
|
<div style={{ padding: 8 }}>
|
|
<Typography.Title level={4}>Custom header</Typography.Title>
|
|
<Row gutter={8}>
|
|
<Col>
|
|
<Radio.Group
|
|
size="small"
|
|
onChange={e => onTypeChange(e.target.value)}
|
|
value={type}
|
|
>
|
|
<Radio.Button value="month">Month</Radio.Button>
|
|
<Radio.Button value="year">Year</Radio.Button>
|
|
</Radio.Group>
|
|
</Col>
|
|
<Col>
|
|
<Select
|
|
size="small"
|
|
dropdownMatchSelectWidth={false}
|
|
className="my-year-select"
|
|
value={year}
|
|
onChange={newYear => {
|
|
const now = value.clone().year(newYear);
|
|
onChange(now);
|
|
}}
|
|
>
|
|
{options}
|
|
</Select>
|
|
</Col>
|
|
<Col>
|
|
<Select
|
|
size="small"
|
|
dropdownMatchSelectWidth={false}
|
|
value={month}
|
|
onChange={newMonth => {
|
|
const now = value.clone().month(newMonth);
|
|
onChange(now);
|
|
}}
|
|
>
|
|
{monthOptions}
|
|
</Select>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
}}
|
|
onPanelChange={onPanelChange}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
|