如何使用 React Big Calendar 仅显示当月和下个月并使其每天动态变化?
我有一个如下所示的组件:
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
的 prop,它是 JS Date()
的一个实例。 date
决定可见的日历范围。
还有另一个名为 onNavigate
的 prop,其类型为 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
});
}
}}
在我的示例中,用户可以单击按钮后退
和下一步
,但我已成功限制日历仅显示本周
和下周
。用户无法查看前几周
或 future 1 周以上
。如果您想要每月限制
而不是每周
,您可以轻松更改逻辑。
关于javascript - React-big-calendar 仅显示当前月份和下个月,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45577913/