React-big-calendar僅顯示當前月份和下個月

Question

如何使用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點的最小和最大小時數，如何將最大和最小時間設置為幾天？

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 ，則可以輕松更改邏輯。

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)'*/ } /> 

在此處輸入圖片說明