CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Mehul Velani
Mehul Velani

Reputation: 761

how to display events side by side in fullcalendar

enter image description here enter image description here

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?

Upvotes: 0

Views: 1216

Answers (1)

Mike Irving
Mike Irving

Reputation: 1628

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 enter image description here

Upvotes: 1

Related Questions