Event Calendar - Inconsistant behavior when event spans multiple days

I render a custom label using labelContentTemplate.

Inside of this template I render my own title with it’s own tooltip

The tooltip works fine if the event spans no more than 1 day

But if the event spans more than 1 day, the tooltip no longer renders:

Anyone had this issue?

Hello @Jacques_Hache :wave:

Can you share some of your relevant code so I can see the exact usage?

The tooltip does not appear if the cursor hovers overs the event on days other than the start day:

Here is the template:

here’s an animation

mobiscrollBug

Hi @Jacques_Hache

With the code you shared, I don’t have enough context to see what might be causing the issue. I’ve created a sample using a popup with a custom event label:


<mbsc-page>
  <mbsc-eventcalendar
    [view]="{ calendar: { type: 'month' } }"
    (onEventHoverIn)="handleEventHoverIn($event)"
    (onEventHoverOut)="handleEventHoverOut()"
    [labelContentTemplate]="labelContentTemplate"
  ></mbsc-eventcalendar>
  <mbsc-popup #popup [anchor]="popupAnchor" [options]="popupOptions">
    <div>Hello World</div>
  </mbsc-popup>
</mbsc-page>

<ng-template #labelContentTemplate let-label>
  <div *ngIf="label">
    <span> {{label.title}} </span>
  </div>
</ng-template>
export class AppComponent {
  @ViewChild('popup', { static: false }) popup!: MbscPopup;
  popupAnchor: HTMLElement | undefined;

  popupOptions: MbscPopupOptions = {
    display: 'anchored',
    showOverlay: false,
  };

  handleEventHoverIn(args: any): void {
    this.popupAnchor = args.domEvent.target;
    this.popup.open();
  }

  handleEventHoverOut(): void {
    this.popup.close();
  }
}

Let me know if this helps.