Navigating in FullCalendar with previous/next when CustomView has a visibleRange

Question

My Calendar has a specific view : it shows 31 days (display 4 days before the current day, and 27 days after)

Therefore, I have a dynamic visibleRange for my view

let INIT = moment().subtract(4, 'days').format('YYYY-MM-DD');
let INIT_END = moment(INIT).add(31,'days').format('YYYY-MM-DD');

[...]

  type: 'resourceTimeline',
  visibleRange: {
    start: INIT,
    end: moment(INIT).add(31,'days').format('YYYY-MM-DD')
  },
  buttonText: '31 jours'
}

and previous/next don't seem to work when visibleRange is defined for a custom view.

I tried something involving jQuery and it mostly works, except you have to click first twice on prev/next to change the visibleRange (and you also have to click twice when you go from next to previous or vice-versa).

And I wanted for this :

calendar.setOption('visibleRange', {
  start: INIT, 
  end: INIT_END
})

to work, but in my implementation, it only works once and when it's triggered, clicking on buttons doesn't work anymore.

You can find the code on this CodePen

Can you help me ?

Answer 1

Okay so a colleague of a colleague led me to the solution, thanks a lot to him.

Instead of using visibleRange and trying to manipulate FullCalendar's data with jQuery (very gross), I calculate the difference between my two moments in order to have a duration :

const INIT = moment().subtract(4, 'days');
const INIT_END = moment(INIT).add(31,'days');
let duration = INIT_END.diff(INIT, 'days')

Then I use this duration in the settings of my customView :

resourceTimelineRollingMonth: {
  type: 'resourceTimeline',
  duration: { days: duration },
  buttonText: '31 jours'
}

and for my view to start 4 days before the current day, in the Calendar object, I set :

[...]
defaultDate: INIT.format('YYYY-MM-DD'),
[...]

Which now works flawlessly.