React-big-calendar: How to get visible date range?

[mattfordham]

I am hoping to fetch events for the given view from the server with every "navigate" event. Is it possible to retrieve the visible date range from the component? Thanks!

[greenya]

onNavigate is called with two arguments: current date and the view (_week_, _agenda_ etc.). Check it like so

onNavigate={(date, view) => {
            console.log('#### onNavigate');
            console.log('#### date=', date);
            console.log('#### view=', view);
            //this.setState({currentDate: date});
          }}

It is possible to calculate range like so:

1. if view is _day_: from moment(date).startOf('day') to moment(date).endOf('day');
2. if view is _week_: from moment(date).startOf('isoWeek') to moment(date).endOf('isoWeek');
3. if view is _month_: from moment(date).startOf('month').subtract(7, 'days') to moment(date).endOf('month').add(7, 'days'); i do additional 7 days math because you can see adjacent weeks on month view (that is the way how i generate my recurrent events for the Big Calendar, but if you need only start-end of month - just remove that math);
4. if view is _agenda_: from moment(date).startOf('day') to moment(date).endOf('day').add(1, 'month');

Don't forget onNavigate is not called when user changes only view, so you also need to handle onView like so:

onView={(view) => {
            console.log('#### onView');
            console.log('#### view=', view);
            //this.setState({currentView: view});
          }}

[mattfordham]

Thanks! Your approach was where I ended up. The "adjacent weeks on month" part was what I wasn't sure was appropriate (thinking there might be a more direct way of getting that info).

[stevenkaspar]

For future viewers, I created a full example Gist using @greenya's method above

https://gist.github.com/stevenkaspar/23098c255689cc623f82141564dc41cc

[wasabigeek]

You should be able to use the library's own utils. For example, to retrieve the first and last visible day for a month view:

import dates from 'react-big-calendar/lib/utils/dates';

...
    onNavigate = (date, view, action) => {
        console.log(dates.firstVisibleDay(date), dates.lastVisibleDay(date));
    }
...

There are different functions used for different views though.

[felgeekpe]

@wasabigeek that' seems to be the best way! Thanks.

Also form month view if you are using moment you can do something like this:

onNavigate={(date, view) => {
  let start, end;

  if (view === 'month') {
    start = moment(date).startOf('month').startOf('week')
    end = moment(date).endOf('month').endOf('week')
  }

  return { start, end };
}}

[ash-PS]

When displaying as week view using moment(date).startOf('isoWeek') to moment(date).endOf('isoWeek') yields a week spanning Mon-Sun but my calendar is showing Sun-Sat. In the jQuery implementation of Full Calendar it is trivial to access the start and end dates of the current view e.g. https://stackoverflow.com/questions/32777017/how-to-get-current-displayed-date-range-in-full-calendar-jquery. Does the same concept not exist for React-Big-Calendar?

[felgeekpe]

@ash-PS have you tried with .startOf('week') ?

[ash-PS]

@felgeekpe yes that works well thanks! I'm still a little surprised that users need to reimplement this logic every time they use Big Calendar, I'm assuming the date range is already getting calculated somewhere to drive the rendering of the calendar.