[英]React-big-calendar Show only current month and next month
如何使用React大日历仅显示当前月份和下个月并使其每天动态更改?
我有一个看起来像这样的组件:
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)'*/ } />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.