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

如何使用反應大日曆僅顯示當前月份和下個月並每天動態更改？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時，如何設置最大和最小到天？

來源

2017-08-08 Konrad Uciechowski

我沒有看到任何有關這方面的信息，你有沒有試過只有沒有幾個小時的日子？ –

我試過了，但它顯示日曆的每一天，它認爲不起作用。還有什麼我需要這個小時的限制，所以我不能刪除它 –

我做了一些研究，發現這裏一劈一點啓示：似乎有不被任何東西一應俱全像minDate或maxDate。但有一個名爲date的道具，它是JS Date()的一個實例。 date決定可見的日曆範圍。還有另一個道具function，稱爲onNavigate。所以你應該確保你的狀態有一個初始鍵值對，如：

{ 
    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，你可以很容易地改變邏輯。

來源

2018-01-02 06:23:20 Vic

我不完全理解你的整個問題。

但如果你要躲遠落在當月天外，你可以用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

來源

2017-11-10 07:01:08

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

回答

相關問題