Design a custom year view with 12 month slots - fullcalendar

Question

Sample View:
I would like to create a custom year view to show the timeline in every month slots. I can use fullcalendar-scheduler with a custom view and define like this:
views: {
timelineCustom: {
type: 'timeline',
buttonText: 'Year View',
duration: {year:1},
slotDuration: {month:1}
}
}
However, there is no way to set up a fiscal year view with month start at April 1st and end at March 31st next year. And also, a timeline bar will cover a whole month slot even though an event only starts from the second half of that month.

Answer 1

Your first problem - starting the view in April and ending in March of the following year, can be solved using the new "visibleRange" option. This lets you supply start/end dates for the view, relative to the "currentDate" (i.e. the date fullCalendar curently regards as being selected). You also have to set the "dateIncrement" option, to ensure that Next/Previous increment the current date by 1 year.
N.B. This requires fullCalendar 3.3.0 and Scheduler 1.6.0, or later.
timelineCustom: {
type: 'timeline',
buttonText: 'Year View',
dateIncrement: { years: 1 },
slotDuration: { months: 1 },
visibleRange: function(currentDate) {
return {
start: currentDate.clone().startOf('year').add({ months: 3}),
end: currentDate.clone().endOf("year").add({ months: 4})
};
}
}
See https://fullcalendar.io/docs/current_date/visibleRange/ and https://fullcalendar.io/docs/current_date/dateIncrement/ for more details
However, your issue where the timeline bar covers a whole month slot even though an event only starts in the second half of a month, is not really solvable in the way you want. The whole point of "slots" is to be the minimum time that an event can be displayed for in that particular view. If you want it to be more subtle than that, you would have to define shorter slots. The same thing happens in fullCalendar's default "Month" (non-timeline) view - all events cover a whole day even if they're timed, but you can see the times in the description. I see in your example you have already got the dates of those events displayed in the description, so it should be reasonably clear for your users.
I suggest your users click on the Month View to get a more detailed breakdown with the slot durations more accurately displayed. Either that or you have to compromise and set slotDuration to something smaller.