Event cards overlapping or surpassing the row height

Event calendars & schedulers
,
1

Hello, Mobiscrollers!

I use the Timeline event calendar in a VueJS 2.x application and I have a weird behaviour.

My calendar options are as follows:

mobiscroll.setOptions({
        theme: "windows",
        themeVariant: "light",
        clickToCreate: false,
        dragToCreate: false,
        dragToMove: false,
        dragToResize: false,
        eventDelete: false,
        dateFormat: 'DDDD',
        showEventTooltip: false            
      });

And the view options of the timeline:

view: {
          timeline: {
            type: "week",
            allDay: true,
            labels: "all",
            startDay: 1, // Monday
            endDay: 5, // Friday
            eventList: true,
            size: 2,
            weekNumbers: true                               
          }

My renderScheduleEvent()

renderScheduleEvent: function (data) {
          var ev = data.original;
          var color = data.color;
          var currentResource = data.currentResource;
          var isParent =
            Array.isArray(currentResource.children) &&
            currentResource.children.length;

          if (isParent) {
            return (
               '<div class="flex-rectangle-resource-event">' +
              "<span>" +
              '<span><i class=""></i></span>' +
              "Werkbonnen: " +
              ev.countworkorders +
              "</span>" +
              '<span><span><i class=""></i></span>' +
              "Tot. Opp.: " +
              ev.amount +
              "</span></div>"            
            );
          }
          return (
            '<div class="md-timeline-template">' +
            '<div class="md-timeline-template-event-cont">' +
                '<ol class="fa-ul">' +
                    '<li><span class="fa-li"><i class="fas fa-map-marker"></i></span>Amsterdam 234234532543254325643256345634256345</li>' +
                    '<li><span class="fa-li"><i class="fas fa-solid fa-circle-info"></i></span>Opp: 2344</li>' +
                    '<li><span class="fa-li"><i class="fas fa-cloud-sun-rain"></i></span>15% 234mm/m2</li>' +
                    '<li><span class="fa-li"><i class="fas fa-square"></i></span>Insides</li>' +
                '</ol>' +
               '</div></div>' 
          );
        }

Finally the css:

.md-timeline-template {
height: auto;
background: #e4e4e4;
border-radius: 10px;
color: black;
font-size: 12px;
margin: 5px;

}
.md-timeline-template-event-cont {
height: 80px;
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
}

I can’t figure out though why my events are overlapping like this::

image
image1222×861 68.4 KB

Can someone point me in the right direction? I need some space between the events on the same day and also for the events to be in their parent container, and not overlapping on the next row.

2

Hi @Catalin_Cernat,

Thanks for reaching out!

The source of the problem here is that currently the timeline view supports only one event height, and based on the screenshot that is causing the problems for you. The row height are calculated based on the event heights, and for that it will use the first event’s height(loaded to the page) and that is why the row heights are not correct for those event which are taller.

Can you please share some details about why you are using different event heights? I’m askign because I would like to understand the use case better.