Prevent overlapping the events when the height of the event varies

Event calendars & schedulers
1

Hi, I want to fully customize the events in the timeline view.
This is a sample of my scheduleEventTemplate.

<ng-template #customScheduleEventTemplate let-data>
    <div class="md-timeline-template">
        <div class="md-timeline-template-event-cont">
            <ng-container *ngIf="!data.original.allDay">
                <div>{{ data.original.title }}</div>
            </ng-container>
            <ng-container *ngIf="data.original.isTemporary">
                <div>temporary</div>
            </ng-container>
            <ng-container *ngIf="data.original.staffName">
                <div>staff</div>
            </ng-container>
            <ng-container
            *ngIf="
                data.original.equipId &&
                data.original.equipId !== data.currentResource.id
            "
            >
                <ng-container *ngIf="data.original.equipName">
                    <div>equip</div>
                </ng-container>
            </ng-container>
            <ng-container *ngIf="data.original.type === 3">
                <div>message</div>
            </ng-container>
        </div>
    </div>
</ng-template>

and css.


.md-timeline-template {
    height: auto;
    background-color: aliceblue;
    border: 1px solid black;
}

.md-timeline-template-event-cont {
    height: auto;
}

I set rowHeight: 'variable', but the events are overlapping.

1
1887×142 10.9 KB

When I change css like this,


.md-timeline-template {
    height: auto;
    background-color: aliceblue;
    border: 1px solid black;
}

.md-timeline-template-event-cont {
    height: 100px;  /* change here */
}

it seems OK.

In reality, however, the height of the event varies, and the height cannot be fixed.
Can I prevent overlapping the events when the height of the event varies?

Thanks.

2

Hi @Kimiko and welcome to the forum!

The timeline view does not support events that are of different height. All the events need to have the same height for it to work.

1 Like