经过尝试, 貌似官网提供的api无法做到只显示当前月份的日期
以上红圈选中的都是我们不想显示的,但是博主没有发现(改源码之外)的方法去除,没关系,我们也可以在渲染数据的时候,过滤掉下一个月份的数据:
getListData = value => {
const { dayList } = this.props.boardForm
let t = moment(value._d)
.format('YY-MM-DD')
.substring(0, 5)
let curr_t = new Date()
let listData
curr_t = moment(curr_t)
.format('YY-MM-DD')
.substring(0, 5)
// console.log('t, curr_t', t, curr_t)
if (t === curr_t) {
// 过滤掉非本月的数据
dayList &&
dayList.forEach(it => {
if (value.date() === it.day - 0) {
listData = [
{ type: 'warning', content: it.expend, key: it.id },
{ type: 'warning', content: it.income, key: it.id },
{ type: 'warning', content: it.signContractAmount, key: it.id },
{ type: 'warning', content: it.signContractCount, key: it.id },
]
}
})
}
return listData || []
}
dateCellRender = value => {
const listData = this.getListData(value)
return (
<ul className={styles.events}>
{listData.map(item => (
<li key={Math.random() * 1000}>
<Badge status={item.type} text={item.content} />
</li>
))}
</ul>
)
}
render() {
const { packageList, contractList } = this.props.boardForm
const { timeLength } = this.state
return (
<div>
<h4>日历看板</h4>
<Calendar
dateCellRender={this.dateCellRender}
monthCellRender={this.monthCellRender} />
</div>
)
}