Question

如何使用反应大日历仅显示当前月份和下个月并使其每天动态更改？

我有一个看起来像这样的组件：

<div id="A">
    <div id="B">
        <div id="D"></div>
    </div>
    <div id="C"></div>
</div>

但它只显示从早上8点到晚上8点的最短和最长时间，如何将最大和最小值设置为天？

Answer 1

我做了一些研究，并在这里找到了一些黑客的灵感：似乎没有像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而不是AppSettingsProvider.cs，则可以轻松更改逻辑。

Answer 2

我不太了解你的整个问题。

但是如果你想隐藏当月以外的日子，你可以用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)'*/
       }
/>

enter image description here

React-big-calendar仅显示当前月份和下个月

2 个答案: