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.

4

Hi @Catalin_Cernat

I have some great news for you! We have just shipped Mobiscroll 5.30 which introduces the long-awaited feature for displaying events with variable heights on the Timeline.
​
This is useful when the content of the events varies, for example, rendering lists with various lengths or supporting multiple event types with different content templates. If you want to keep all content visible, regardless of the event length (width), the height will dynamically change when resized and not truncate depending on the available space.

We launched it as an experimental feature and can be enabled by setting the eventHeight: 'variable' property for the timeline inside the view option. It is experimental since the underlying rendering logic changed a bit, so we are looking for feedback.

You can learn more about variable event heights and see some demos as well: