Search code examples
htmlcssfullcalendarfullcalendar-4

Daygrid (FullCalendar) events to be shown inline

I use DayGrid to display monthly calendar on my site where events are displayed on each day. When there are more than one event in the same day i want the events to be shown as icons into same row (for example three events to fit in the same row for that day) not each event on different new row. I have tried many things with css but it doesn't seem to work. Any proposal would be helpful, thanks

Example:

enter image description here

I've used this CSS, but the inline-block property assigns all the events to the first day of the week, so i can't find a proper solution

a.fc-event { width: 15px; } 
div.fc-content-skeleton > table > tbody > tr { display: inline-block; }
Solution

  • The grid you see in the "dayGridMonth" view is actually made up of a HTML table whose rows span the entire set of days in each week. So if you inline those rows, they'll all go as far to the left as they can.

    There are not separate grids within each day (that's just a visual effect). The element inspector in your browser's developer tools will highlight the rows for you if you hover over them, so you can visualise the structure.

    What you're asking for is impossible without completely re-writing the underlying source code within fullCalendar which draws that grid.

    Your only option would be to create a custom view, perhaps by cloning the dayGrid code from fullCalendar's GitHub repo and re-writing it to your needs, but unless you are already familiar with the codebase that's likely to be a fairly major task and not something to be undertaken lightly - unless you have a lot of time and are prepared to put in a lot of effort for a relatively minor UX reward.