Custom horizon (5 months) with FullCalendar Timeline

Minos 0
Viewed 22

I'm working on a project where I have to create some particular views on FullCalendar 5 in timeline with React.

The idea is to display more or less long periods with duration slots per month.

Generally, the horizons will be by 6 months, but I can't find how to make custom views with a precise horizon (Ex: 01 April - 31 August).

I thought it was possible by defining a start + a duration, but obviously no way to do it dynamically, because the user must be able to change the horizon when needed.

Did I miss an option to do this? Or is FullCalendar really not made for this?

Thank you!

fullcalendar reactjs javascript
1 Answers

Make a custom view with 5 month duration, add the button to the header:

let calendar = new Calendar(calendarEl, {
  customButtons: {
    resourceTimelineSixMonths: {
      text: 'resourceTimelineSixMonths',
      click: () => {calendar.changeView('resourceTimelineSixMonths')},
    },
  },
  headerToolbar: {
    left:   'title',
    right:  'prev,today,next resourceTimelineSixMonths',
  },
  initialView: 'resourceTimelineSixMonths',
  views: {
    resourceTimelineFiveMonths: {
      duration: { months: 5 },
      type: 'resourceTimelineMonth',
    },
  },
};

You can tell the calendar what date to start on: https://fullcalendar.io/docs/initialDate

let calendar = new Calendar(calendarEl, {
  initialDate: '2022-09-28',
};

You can also play with adding this to the calendar object: https://fullcalendar.io/docs/visibleRange

let calendar = new Calendar(calendarEl, {
  visibleRange: {
    start: '2022-09-23',
    end: '2023-02-23',
  },
};
Invincibear0
Related