mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
2.5 KiB
2.5 KiB
| order | title | ||||
|---|---|---|---|---|---|
| 1 |
|
zh-CN
一个复杂的应用示例，用 dateCellRender 和 monthCellRender 函数来自定义需要渲染的数据。
en-US
This component can be rendered by using dateCellRender and monthCellRender with the data you need.
import React from 'react';
import { Calendar, Badge } from 'antd';
import type { BadgeProps } from 'antd';
import type { Moment } from 'moment';
const getListData = (value: Moment) => {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
];
break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
];
break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ 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.' },
];
break;
default:
}
return listData || [];
};
const getMonthData = (value: Moment) => {
if (value.month() === 8) {
return 1394;
}
};
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} />;
};
export default App;
.events {
margin: 0;
padding: 0;
list-style: none;
}
.events .ant-badge-status {
width: 100%;
overflow: hidden;
font-size: 12px;
white-space: nowrap;
text-overflow: ellipsis;
}
.notes-month {
font-size: 28px;
text-align: center;
}
.notes-month section {
font-size: 28px;
}