リアクションビッグカレンダー現在の月と翌月のみを表示

Question

リアクションビッグカレンダーを使用して現在の月と翌月のみを表示し、毎日動的に変更するにはどうすればよいですか？

私はこのようになりますコンポーネントがあります。

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という別の小道具があります。 だから、あなたはあなたの状態のような初期のキーと値のペアがあることを確認しなければならない。そして、あなたが書くことができMyCalendarコンポーネント用の2つの小道具として

{ 
    dayChosen: new Date() //just initalize as current moment 
} 

を：私の例では

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を表示できません。 weeklyの代わりにmonthly restrictionが必要な場合は、ロジックを簡単に変更できます。

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