CODEWITHSUNDEEP
javascriptreactjsmomentjsreact-big-calendar
Konrad Uciechowski
Konrad Uciechowski

Reputation: 486

React-big-calendar Show only current month and next month

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

I have a component 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?

Upvotes: 2

Views: 7181

Answers (2)

Morris
Morris

Reputation: 1126

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 component 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.

Upvotes: 4

Jimmy Truong
Jimmy Truong

Reputation: 81

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

Upvotes: 1

Related Questions