Fullcalendar: How to keep just one event per line horizontally?

I have this calendar, with plugin fullcalendar 6.1.5:

Calendar

I want to show one event per line, horizontally. Example:

If event A starts on the 26th and event B starts on the 27th, event B should be on the bottom row, and so on.

Here is an example of how it should be:

enter image description here

One event per line, regardless of its start and end, only one per line, is it possible?

Here is what i tried:

1. I tried changing the CSS properties of the events to shift to the bottom, using margin-top: 30px and margin-bottom

2. I tried to use eventDidMount, eventPositioned, eventRender (some were not supported by the version I use.

3. I tried to create "invisible" events to try to scroll down

4. I tried changing the event width to shift all events on the same line down

But nothing worked...

Here is the code:

CDN:

<link href="bower_components/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet"> <script src="bower_components/moment/moment.js"></script> <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.5/index.global.min.js'></script>

`

if ($("#calendariotarefas").length) {
                    var tasks = retorno.tasks;
                    var calendar_events = [];
                    
                    tasks.forEach(function (element) {
                      var eventClass      = "";
                      var eventColorClass = element.eventColorClass;
                      var task = {
                        id: element.idtarefa,
                        title: element.title,
                        start: new Date(element.start),
                        end: new Date(element.end),
                        classNames: [eventClass,eventColorClass]
                      }
                      calendar_events.push(task);
                    });
                    
                    var calendarEl = document.getElementById('calendariotarefas');
                    
                    calendar = new FullCalendar.Calendar(calendarEl, {
                      slotEventOverlap: false,
                      initialView: 'dayGridWeek',
                      headerToolbar: {
                        left: 'prev,today,next',
                        center: 'title',
                        right: 'dayGridWeek,dayGridMonth'
                      },
                      buttonText: {
                        today: 'Hoje',
                        month: 'Mês',
                        week: 'Semana'
                      },
                      views: {
                        dayGridWeek: {
                          titleFormat: { year: 'numeric', month: 'long' },
                        }
                      },
                      eventClick: function(info) {
                        modalTarefa( idprojeto, info.event.id, 1 );
                      },
                      stickyFooterScrollbar: true,
                      locale: 'br',
                      displayEventTime: false,
                      events: calendar_events
                    });
                    calendar.render();
                }

`

Some parts of the code are in Portuguese, but I believe that nothing that affects your understanding. Thank you all.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/eqPQ0vr