Search code examples
fullcalendarscrollbarhorizontalscrollviewfullcalendar-premium

FullCalendar horizontal scroll bar

I need a way to add the horizontal scroll bar so the column names don't overlap.

<FullCalendar plugins={[ resourceTimeGridPlugin, scrollGridPlugin  ]} initialView="resourceTimeGridDay" schedulerLicenseKey= 'CC-Attribution-NonCommercial-NoDerivatives'
            resources={[
                { id: 1, title: 'Antonella Rossi', businessHours: {startTime: '09:00', endTime: '16:00'}},
                { id: 2, title: 'Mario rossi', businessHours: {startTime: '09:00', endTime: '18:00'}},
                { id: 3, title: 'Luca rossi'},
                { id: 4, title: 'Francesca Rossi' },
                { id: 5, title: '111 Rossi'},
                { id: 6, title: 'Mario rossi' },
                { id: 7, title: 'Luca rossi' },
                { id: 8, title: 'Francesca Rossi' },
                { id: 9, title: '222 Rossi'},
                { id: 10, title: 'Mario rossi' },
                { id: 11, title: 'Luca rossi' },
                { id: 12, title: 'Francesca Rossi' },
                { id: 13, title: 'An333tonella Rossi'},
                { id: 14, title: 'Mario rossi' },
                { id: 15, title: 'Luca rossi' },
                { id: 16, title: 'Francesca Rossi' },
                { id: 17, title: 'Antonella Rossi'},
                { id: 18, title: 'Mario rossi' },
                { id: 19, title: 'Luca rossi' },
                { id: 20, title: 'Francesca Rossi' }
            ]}
            nowIndicator={true}
            slotMinTime= "07:00"
            stickyFooterScrollbar= {true}
            height= '100vh'
            />

I tried using stickyFooterScrollbar, but nothing changed. Same thing with ScrollGrid Plugin. I'm using react

enter image description here

Solution

  • You can set the dayMinWidth option to force fullCalendar to make the columns wider.

    N.B. As per the documentation, the stickyFooterScrollbar option only takes effect when dayMinWidth is in use, because the calendar only shows any scrollbar at all in that situation. The "sticky" option just stops that scrollbar from moving out of the viewport, it does not cause it to appear in the first place.

    More info: