javascript - React-big-calendar Show only current month and next month - Stack Overflow

admin管理员组

文章数量:1394211

How can I display only current month and next month using react big calendar and make it change dynamically every day?

I have a ponent that looks like this:

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;

But it only show minimum and maximum hours from 8AM to 8PM, how to set max and min to days?

How can I display only current month and next month using react big calendar and make it change dynamically every day?

I have a ponent that looks like this:

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;

But it only show minimum and maximum hours from 8AM to 8PM, how to set max and min to days?

• javascript
• reactjs
• momentjs
• react-big-calendar

Share Improve this question Follow asked Aug 8, 2017 at 20:58 Konrad UciechowskiKonrad Uciechowski 48611 gold badge1010 silver badges3030 bronze badges 2

• Im not seeing anything about that, have you tried passing days only with no hours? – canaan seaton Commented Aug 8, 2017 at 21:19
• I tried but then it displays every day of calendar and it seens that doesn't work. Whats more I Need this hours limits so I can't delete it – Konrad Uciechowski Commented Aug 9, 2017 at 5:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I've done some research and found a little inspiration for a hack here: there doesn't seem to be anything readily available like minDate or maxDate. But there's a prop called date which is an instance of JS Date(). And date decides the visible calendar range. There's another prop called onNavigate of type function. So you should make sure your state has an initial key-value pair like:

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

Then as two props for MyCalendar ponent you can write:

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
    });
  }
}}

In my example, user can click the buttons back and next but I have successfully restricted the calendar to only show this week and the following week. User cannot view previous weeks or more than 1 week down the road. If you want monthly restriction instead of weekly, you can change the logic easily.

I don't quite understand your entire question.

But if you want to hide away days that fall outside the current month, you can do it with css

.rbc-off-range {
    /* color: #999999; */
    color: transparent;
    pointer-events: none;
}

Please see attached.

If you want to dynamical display the date, just pass in a date that's a javascript date string.

<BigCalendar
  {...allYourProps}
  date={new Date('9-8-1990')
        /*evaluates to 'Sat Sep 08 1990 00:00:00 GMT-0400 (EDT)'*/
       }
/>

enter image description here

本文标签： javascriptReactbigcalendar Show only current month and next monthStack Overflow