3

I'm using FullCalendar v5 with react. I need to show a year view, like the one GoogleCalendar has: https://prnt.sc/vljfwj. I have seen that FullCalendar doesn't have a plugin or smth. What I'm trying to do, is creating a custom view, but I don't seem to manage it well. Can someone help me on how it is done?

<FullCalendar
    plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
    headerToolbar={false}
    initialView='timeGridWeek'
    views={{
        dayGridMonth: {
            type: 'month',
            duration: { months: 12 },
            monthMode: true,
            fixedWeekCount: true,
        }
    }}
    dayHeaderFormat={{ weekday: 'long', day: 'numeric', omitCommas: true }}
/>

I'm changing views on a button, which calls this code

changeSelectedGrid = selectedViewGrid => {
    if (this.fullCalendarRef.current) {
        const calendarApi = this.fullCalendarRef.current.getApi();
        calendarApi.changeView(selectedViewGrid, moment(this.state.selectedDate).startOf('year'), moment(this.state.selectedDate).endOf('year'));
    }
};
ADyson
  • 57,178
  • 14
  • 51
  • 63
wavelet
  • 41
  • 3
  • 1
    You can't do it simply by modifying the month view - that's a fixed grid. And even if you could, it would be far too big because of the large cells for each day. You'd need to create a completely custom view with new rendering code - see https://fullcalendar.io/docs/custom-view-with-js . That's probably quite a big job if you want to make it support all the features of fullCalendar properly. – ADyson Nov 18 '20 at 14:45
  • Yes, I want to support most of the features of FullCalendar. I was wondering if they are going to add this feature in the future or not. – wavelet Nov 18 '20 at 15:09
  • 1
    Have a read of https://fullcalendar.io/requesting-features, then. It tells how you look for existing feature requests, and how to make a new one, if your desired feature isn't already on the list. – ADyson Nov 18 '20 at 15:31

0 Answers0