如何使用反应大日历仅显示当前月份和下个月并使其每天动态更改?
我有一个看起来像这样的组件:
import React, {Component} from 'react';
import 'react-big-calendar/lib/css/react-big-calendar.css'
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import 'moment/locale/pl';
class NewCalendar extends Component {
constructor(props, context) {
super(props, context);
BigCalendar.momentLocalizer(moment);
}
render() {
return (
<div {...this.props}>
<BigCalendar
messages={{next: "Następny", previous: "Poprzedni", today: "Dzisiaj", month: "Miesiąc", week: "Tydzień"}}
culture='pl-PL'
timeslots={1}
events={[]}
views={['month', 'week', 'day']}
min={new Date('2017, 1, 7, 08:00')}
max={new Date('2017, 1, 7, 20:00')}
/>
</div>
);
}
}
export default NewCalendar;
但它只显示从早上8点到晚上8点的最小和最大小时数,如何将最大值和最小值设置为天数?
我已经做了一些研究,并在这里找到了一个黑客的灵感:似乎没有像minDate
或maxDate
那样容易获得的东西。但是有一个名为date
的道具,它是JS Date()
的一个实例。而date
决定了可见的日历范围。还有另一个名为onNavigate
的function
道具。所以你应该确保你的州有一个初始的键值对,如:
{
dayChosen: new Date() //just initalize as current moment
}
然后作为MyCalendar
组件的两个道具你可以写:
date={this.state.dayChosen}
onNavigate={(focusDate, flipUnit, prevOrNext) => {
console.log("what are the 3 params focusDate, flipUnit, prevOrNext ?", focusDate, flipUnit, prevOrNext);
const _this = this;
const now = new Date();
const nowNum = now.getDate();
const nextWeekToday = moment().add(7, "day").toDate();
//I imported `moment.js` earlier
const nextWeekTodayNum = nextWeekToday.getDate();
if (prevOrNext === "NEXT"
&& _this.state.dayChosen.getDate() === nowNum){
_this.setState({
dayChosen: nextWeekToday
});
} else if (prevOrNext === "PREV"
&& _this.state.dayChosen.getDate() === nextWeekTodayNum){
_this.setState({
dayChosen: now
});
}
}}
在我的示例中,用户可以单击按钮back
和next
但我已成功将日历限制为仅显示this week
和the following week
。用户无法查看previous weeks
或more than 1 week down the road
。如果你想要monthly restriction
而不是weekly
,你可以轻松地改变逻辑。
我不太了解你的整个问题。
但是如果你想隐藏当月之外的日子,你可以用css来做
.rbc-off-range {
/* color: #999999; */
color: transparent;
pointer-events: none;
}
请参照附件。
如果要动态显示日期,只需传入一个javascript日期字符串的日期。
<BigCalendar
{...allYourProps}
date={new Date('9-8-1990')
/*evaluates to 'Sat Sep 08 1990 00:00:00 GMT-0400 (EDT)'*/
}
/>