2016-03-31 09:40:55 +08:00
|
|
|
---
|
2017-01-13 17:11:26 +08:00
|
|
|
order: 1
|
2016-05-22 11:03:07 +08:00
|
|
|
title:
|
2017-01-13 17:11:26 +08:00
|
|
|
zh-CN: 通知事项日历
|
|
|
|
en-US: Notice Calendar
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2015-11-13 22:34:49 +08:00
|
|
|
|
2016-05-22 11:03:07 +08:00
|
|
|
## zh-CN
|
|
|
|
|
2017-01-13 17:11:26 +08:00
|
|
|
一个复杂的应用示例,用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
|
2016-05-22 11:03:07 +08:00
|
|
|
|
2016-08-15 11:23:19 +08:00
|
|
|
## en-US
|
2016-05-22 11:03:07 +08:00
|
|
|
|
2017-01-13 17:11:26 +08:00
|
|
|
This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
|
2015-11-13 22:34:49 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
```tsx
|
|
|
|
import type { BadgeProps } from 'antd';
|
2022-05-21 22:14:15 +08:00
|
|
|
import { Badge, Calendar } from 'antd';
|
2022-05-19 09:46:26 +08:00
|
|
|
import type { Moment } from 'moment';
|
2022-05-21 22:14:15 +08:00
|
|
|
import React from 'react';
|
2015-11-13 22:34:49 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const getListData = (value: Moment) => {
|
2015-11-25 17:35:49 +08:00
|
|
|
let listData;
|
2016-09-09 13:55:21 +08:00
|
|
|
switch (value.date()) {
|
2016-01-08 14:41:05 +08:00
|
|
|
case 8:
|
|
|
|
listData = [
|
2016-10-02 08:47:34 +08:00
|
|
|
{ type: 'warning', content: 'This is warning event.' },
|
2017-10-16 20:12:21 +08:00
|
|
|
{ type: 'success', content: 'This is usual event.' },
|
2019-05-07 14:57:32 +08:00
|
|
|
];
|
|
|
|
break;
|
2016-01-08 14:41:05 +08:00
|
|
|
case 10:
|
|
|
|
listData = [
|
2016-10-02 08:47:34 +08:00
|
|
|
{ type: 'warning', content: 'This is warning event.' },
|
2017-10-16 20:12:21 +08:00
|
|
|
{ type: 'success', content: 'This is usual event.' },
|
2016-10-02 08:47:34 +08:00
|
|
|
{ type: 'error', content: 'This is error event.' },
|
2019-05-07 14:57:32 +08:00
|
|
|
];
|
|
|
|
break;
|
2016-01-08 14:41:05 +08:00
|
|
|
case 15:
|
|
|
|
listData = [
|
2016-10-02 08:47:34 +08:00
|
|
|
{ type: 'warning', content: 'This is warning event' },
|
2017-10-16 20:12:21 +08:00
|
|
|
{ type: 'success', content: 'This is very long usual event。。....' },
|
2017-01-09 12:10:08 +08:00
|
|
|
{ type: 'error', content: 'This is error event 1.' },
|
|
|
|
{ type: 'error', content: 'This is error event 2.' },
|
|
|
|
{ type: 'error', content: 'This is error event 3.' },
|
|
|
|
{ type: 'error', content: 'This is error event 4.' },
|
2019-05-07 14:57:32 +08:00
|
|
|
];
|
|
|
|
break;
|
2016-01-08 14:41:05 +08:00
|
|
|
default:
|
2015-11-13 22:34:49 +08:00
|
|
|
}
|
|
|
|
return listData || [];
|
2022-05-19 09:46:26 +08:00
|
|
|
};
|
2015-11-13 22:34:49 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const getMonthData = (value: Moment) => {
|
2016-09-09 13:55:21 +08:00
|
|
|
if (value.month() === 8) {
|
2015-11-13 22:34:49 +08:00
|
|
|
return 1394;
|
|
|
|
}
|
2022-05-19 09:46:26 +08:00
|
|
|
};
|
2015-11-13 22:34:49 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const App: React.FC = () => {
|
|
|
|
const monthCellRender = (value: Moment) => {
|
|
|
|
const num = getMonthData(value);
|
|
|
|
return num ? (
|
|
|
|
<div className="notes-month">
|
|
|
|
<section>{num}</section>
|
|
|
|
<span>Backlog number</span>
|
|
|
|
</div>
|
|
|
|
) : null;
|
|
|
|
};
|
|
|
|
|
|
|
|
const dateCellRender = (value: Moment) => {
|
|
|
|
const listData = getListData(value);
|
|
|
|
return (
|
|
|
|
<ul className="events">
|
|
|
|
{listData.map(item => (
|
|
|
|
<li key={item.content}>
|
|
|
|
<Badge status={item.type as BadgeProps['status']} text={item.content} />
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
return <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
|
|
|
|
};
|
2015-11-13 22:34:49 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
export default App;
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|
2015-11-13 22:34:49 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```css
|
2015-11-13 22:34:49 +08:00
|
|
|
.events {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
2021-01-30 19:39:02 +08:00
|
|
|
list-style: none;
|
2015-11-13 22:34:49 +08:00
|
|
|
}
|
2017-10-16 20:12:21 +08:00
|
|
|
.events .ant-badge-status {
|
2021-01-30 19:39:02 +08:00
|
|
|
width: 100%;
|
2015-11-13 22:34:49 +08:00
|
|
|
overflow: hidden;
|
2021-01-30 19:39:02 +08:00
|
|
|
font-size: 12px;
|
2015-11-13 22:34:49 +08:00
|
|
|
white-space: nowrap;
|
2017-10-16 20:12:21 +08:00
|
|
|
text-overflow: ellipsis;
|
2015-11-13 22:34:49 +08:00
|
|
|
}
|
|
|
|
.notes-month {
|
2017-10-16 20:12:21 +08:00
|
|
|
font-size: 28px;
|
2021-01-30 19:39:02 +08:00
|
|
|
text-align: center;
|
2015-11-13 22:34:49 +08:00
|
|
|
}
|
|
|
|
.notes-month section {
|
|
|
|
font-size: 28px;
|
|
|
|
}
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|