I am using Angular 18 with the event calendar and trying to figure out a couple of issues.
When displaying events that span multiple days, the second day’s event is overlapping the new events for that day. It appears that the calendar handles the positioning automatically and should prevent this from occurring. I have tried adding [eventOverlap]="false"
and [exclusiveEndDates]="false" to the
`, but they do not appear to be having any effect. Is this expected behavior? Am I using these flags incorrectly or is there something else that stands out? Ideally, I would like the dates to honor the start/end times, and just not overlap with other events.
Sample component usage:
<mbsc-eventcalendar #calendar
[theme]="mbscTheme"
[themeVariant]="themeVariant"
[data]="filteredEvents"
[view]="calView"
[eventOverlap]="false"
[exclusiveEndDates]="true"
[headerTemplate]="customHeader"
[labelTemplate]="labelTemplate"
[eventTemplate]="eventTemplate"
[scheduleEventTemplate]="labelTemplate"
[(selectedDate)]="selectedDate"
[colors]="cellColors"
[showEventTooltip]="false"
(onSelectedDateChange)="onSelectedDateChange($event)"
(onEventClick)="onEventClick($event)"
class="md-custom-header"
>
Example of how the events are displaying: