'how to display events side by side in fullcalendar
How can I display events side by side in fullCalendar? The first image is my output but I need it to be like the second image. This is a fullCalendar view (fullcalendar.js).
How do I set automatic width for the events without spacing?
Solution 1:[1]
FullCalendar is setting an inline CSS inset style on .fc-timegrid-event-harness, the second of which has a left value of 50% .. hence it starting half way over.
Try this for 4 on a row (25% each)
.fc-daygrid-event-harness, .fc-timegrid-event-harness { max-width: 25%; float: left; }
.fc-timegrid-event-harness:nth-child(1n) { inset: 0px 0% -21px 0% ! important; }
.fc-timegrid-event-harness:nth-child(2n) { inset: 0px 0% -21px 25% ! important; }
.fc-timegrid-event-harness:nth-child(3n) { inset: 0px 0% -21px 50% ! important; }
.fc-timegrid-event-harness:nth-child(4n) { inset: 0px 0% -21px 100% ! important; }
or for two on a row, try
.fc-daygrid-event-harness, .fc-timegrid-event-harness { max-width: 50%; float: left; }
.fc-timegrid-event-harness:nth-child(1n) { inset: 0px 0% -21px 0% ! important; }
.fc-timegrid-event-harness:nth-child(2n) { inset: 0px 0% -21px 50% ! important; }
This was previously an inline style, that I am overriding, the -21px bottom value came from my setup.. yours may need adjusting.
Will probably need a little adjustment to suit your sizes and styles
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Mike Irving |