feat: New calendar apis, headerRender method (#16535)
* added new calendar api, renderHeader now we can customize calendar header * fixed typo for tests * error handling for renderHeader * covering all cases with tests * fixed tests and change console error to warning * fixed feedbacks and code optimization * cleanup callback function arguments * removed unused changes * fixed tests * added extra classes * fixed some comments * tying to fix test for remote * tying to fix test for remote in my local machin it works fine * tying to fix test for remote in my local machin it works fine * tying to fix test for remote in my local machin it works fine * updated test snapshots * fixed comment * fixed linting * fixed some texts * added header for CN and added argument types * removed extra rowpull/16798/head
Harut
6 years ago
committed by
zombieJ
parent
0952696a8c
commit
982871522b
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,107 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 自定义头部
|
||||
en-US: Customize Header
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
自定义日历头部内容。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize Calendar header content.
|
||||
|
||||
```jsx
|
||||
import { Calendar, Select, Radio, Col, Row } from 'antd';
|
||||
|
||||
const { Group, Button } = Radio;
|
||||
|
||||
function onPanelChange(value, mode) {
|
||||
console.log(value, mode);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
|
||||
<Calendar
|
||||
fullscreen={false}
|
||||
headerRender={({ value, type, onChange, onTypeChange }) => {
|
||||
const start = 0;
|
||||
const end = 12;
|
||||
const monthOptions = [];
|
||||
|
||||
const current = value.clone();
|
||||
const localeData = value.localeData();
|
||||
const months = [];
|
||||
for (let i = 0; i < 12; i++) {
|
||||
current.month(i);
|
||||
months.push(localeData.monthsShort(current));
|
||||
}
|
||||
|
||||
for (let index = start; index < end; index++) {
|
||||
monthOptions.push(
|
||||
<Select.Option className="month-item" key={`${index}`}>
|
||||
{months[index]}
|
||||
</Select.Option>,
|
||||
);
|
||||
}
|
||||
const month = value.month();
|
||||
|
||||
const year = value.year();
|
||||
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: 10 }}>
|
||||
<div style={{ marginBottom: '10px' }}>Custom header </div>
|
||||
<Row type="flex" justify="space-between">
|
||||
<Col>
|
||||
<Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
|
||||
<Button value="month">Month</Button>
|
||||
<Button value="year">Year</Button>
|
||||
</Group>
|
||||
</Col>
|
||||
<Col>
|
||||
<Select
|
||||
size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
className="my-year-select"
|
||||
onChange={newYear => {
|
||||
const now = value.clone().year(newYear);
|
||||
onChange(now);
|
||||
}}
|
||||
value={String(year)}
|
||||
>
|
||||
{options}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col>
|
||||
<Select
|
||||
size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
value={String(month)}
|
||||
onChange={selectedMonth => {
|
||||
const newValue = value.clone();
|
||||
newValue.month(parseInt(selectedMonth, 10));
|
||||
onChange(newValue);
|
||||
}}
|
||||
>
|
||||
{monthOptions}
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
onPanelChange={onPanelChange}
|
||||
/>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
Loading…
Reference in New Issue