ant-design/components/calendar/demo/notice-calendar.md

110 lines
2.5 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
2017-01-13 17:11:26 +08:00
order: 1
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
## zh-CN
2017-01-13 17:11:26 +08:00
一个复杂的应用示例,用 `dateCellRender``monthCellRender` 函数来自定义需要渲染的数据。
2016-08-15 11:23:19 +08:00
## en-US
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
```tsx
import type { BadgeProps } from 'antd';
2022-05-21 22:14:15 +08:00
import { Badge, Calendar } from 'antd';
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
const getListData = (value: Moment) => {
let listData;
switch (value.date()) {
case 8:
listData = [
{ 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;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
2017-10-16 20:12:21 +08:00
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
2019-05-07 14:57:32 +08:00
];
break;
case 15:
listData = [
{ 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;
default:
2015-11-13 22:34:49 +08:00
}
return listData || [];
};
2015-11-13 22:34:49 +08:00
const getMonthData = (value: Moment) => {
if (value.month() === 8) {
2015-11-13 22:34:49 +08:00
return 1394;
}
};
2015-11-13 22:34:49 +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
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;
list-style: none;
2015-11-13 22:34:49 +08:00
}
2017-10-16 20:12:21 +08:00
.events .ant-badge-status {
width: 100%;
2015-11-13 22:34:49 +08:00
overflow: hidden;
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;
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
```