title: Fullcalendar event invades bottom row on week view
body: <p><strong>Problem:</strong>
  I have a problem getting the event to use only one of the rows and not invade the others like it does now:</p>
  <p><a href="https://i.stack.imgur.com/HbuOy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HbuOy.png" alt="enter image description here" /></a></p>
  <p><strong>Objetive:</strong>
  My intention is to do single row events, there will only be one event for each row something like this:
  <a href="https://i.stack.imgur.com/fO7qr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fO7qr.png" alt="enter image description here" /></a></p>
  <p>I tried to do it with css but fullcalendar moves the event to the right and there is no ccs tag that identifies it to be able to move it with css, instead it uses inset and I don't really understand how to achieve it.</p>
  <p><strong>There are 2 alternatives:</strong></p>
  <ul>
  <li><p>Find a way for the rows to adapt to the size of the events.</p>
  </li>
  <li><p>Somehow move the event that fullcalendar moves to the right.</p>
  </li>
  </ul>
  <p>The problem is with my little knowledge, I don't know how to do it.</p>
  <p><strong>Code with events thinned:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendario');
      var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          timeZone: 'America/Guayaquil',
          headerToolbar: {
              start: 'today prev,next',
              center: 'title',
              end: 'dayGridMonth,timeGridWeek,listDay'
          },
          views: {
              timeGrid: {
                  type: 'timeGrid',
                  //slotEventOverlap: false,
                  displayEventEnd: true,
                  duration: { days: 7 },
                  allDaySlot: false,
                  slotDuration: '00:30:00',
                  slotLabelFormat: {
                      hour: 'numeric',
                      minute: '2-digit',
                      hour12: false,
                      meridiem: false
                  },
                  slotLabelInterval: '00:30:00', 
                  slotMinTime: '07:00:00',
                  slotMaxTime: '18:30:00',
                  expandRows: true,
                  buttonText: 'Semana',
                  nowIndicator: true,
              }
          },
  
          //Funciones
          dateClick: function(info){
              alert('Dia seleccionado: ' + info.dateStr);
              alert('Vista Actual: ' + info.view.type);
              info.dayEl.style.backgroundColor = '#F2F2F2';
  
              cFormAñadir('añadir', 'abrir');
          },
  
          //Eventos
          eventSources: [{
              events: [
                  {
                      title: 'Consulta ginecologia',
                      start: '2021-10-05T14:00:00',
                      duration: '2021-10-05T14:00:00',
                      allDay: false,
                      color: "#ed4245",
                      textColor: "#FFFFFF",
                      forceEventDuration: true
                  },
                  {
                      title: 'Consulta obstetricia',
                      start: '2021-10-05T13:00:00',
                      end: '2021-10-05T13:00:00',
                      allDay: false,
                      color: "#3AA95E",
                      textColor: "#FFFFFF"
                  },
                  {
                      title: 'Ecocardiograma',
                      start: '2021-10-05T13:30:00',
                      end: '2021-10-05T13:30:00',
                      allDay: false
                  },
                  {
                      title: 'Consulta obstetricia2',
                      start: '2021-10-06T13:00:00',
                      end: '2021-10-06T13:00:00',
                      allDay: false,
                      color: "#3AA95E",
                      textColor: "#FFFFFF"
                  },
              ],
              color: "#FAA61A",
              textColor: "#FFFFFF"
          }]
          
      });
      calendar.render();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fc-timegrid-col-events .fc-timegrid-event-harness{
      height: 34px!important;
      width: 100%!important;
  }
  .fc-timegrid-event-harness .fc-timegrid-event {
      position: static;
  }
  .fc-timegrid-event-harness .fc-timegrid-event .fc-event-main {
      line-height: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="calendario"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>