javascriptfullcalendarfullcalendar-scheduler

Display multiple years in FullCalendar month timeline view?

I am trying to use the timeline view to have a slick and easy interface to move an event to a given month (I can handle the day of month logic). The issue I have is I am now stuck in a given year:

enter image description here

In this example I want to drag the event back to Dec 2021.

Unless I am missing something there is no way to show more than 12 months. If I could at least show the previous Dec and next Jan I could trigger a re-render of the view after the event drop and then drag again.

Any suggestions on how to implement this? I have the drop callback working just fine - just can't seem to figure out an easy way to

Solution

  • By creating a custom view using the various view settings, you can set the duration of the timeline to pretty much any length of time you wish.

    Here's an example which displays 2 years at a time:

    views: {
  resourceTimelineYears: {
    type: 'resourceTimeline',
    duration: { years: 2 },
    buttonText: '2 Years',
    slotDuration: { months: 1 }
  }
},

    Demo: https://codepen.io/ADyson82/pen/mdMeLbJ

    (N.B. This code assumes you're using fullCalendar 5.x, although similar code would work in earlier versions too.)