React-big-calendar 仅显示当月和下个月答案

【问题标题】：React-big-calendar Show only current month and next monthReact-big-calendar 仅显示当月和下个月
【发布时间】：2018-01-16 14:09:24
【问题描述】：

如何使用 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 点的最小和最大小时数，如何将 max 和 min 设置为天？

【问题讨论】：

我没有看到任何关于此的内容，您是否尝试过只在没有时间的情况下度过几天？
我试过了，但它会显示日历的每一天，并且它认为这不起作用。还有什么我需要这个小时限制，所以我不能删除它

标签： javascript reactjs momentjs react-big-calendar

【解决方案1】：

我进行了一些研究，并在此处找到了一些 hack 的灵感：似乎没有像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，您可以轻松更改逻辑。

【讨论】：

【解决方案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

【讨论】：