Event Calendar - Inconsistant behavior when event spans multiple days

Event calendars & schedulers
1

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:

image
image607×222 4.02 KB

Anyone had this issue?

2

Hello @Jacques_Hache :wave:

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

3

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

image
image959×784 44.6 KB

4

Here is the template:

image
image997×497 24.1 KB

5

here’s an animation

mobiscrollBug

6

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.

7

Hi @Lehel

Try using your own custom popup instead of the mobiscroll built-in one.

The problem we have is that mouse events on custom labelContent is not detected unless the mouse cursor is over the first day.

In fact, if you right click and inspect the html on every other day except the first one, the browser does not even land on the custom LabelContenTemplate html. This seems to be caused by miss managed z-index and context stacking

For exemple, If I force mobiscroll’s day-19 html to have a z-index higher than day-20 and day-21, thereby bringing day-19’s html and its content to the forefront, mouse events are now detected on my custom component and my popup works correctly

image
image1509×896 108 KB

image
image573×310 9.79 KB

You example does not uses a custom popup. It uses mobiscroll’s own event handling which is probably necessary to work around this issue.

8

@Lehel

In fact, you could easily replicate the issue by using a simple html title on your custom element.

here’s a modified version of your template:

<ng-template #labelContentTemplate let-label>
  <div *ngIf="label" title="TEST TITLE TEST TITLE">
    <span> {{label.title}} </span>
  </div>
</ng-template>

you will notice that the title does not show up unless your cursor is hovering on top of the first day

9

Hi @Jacques-Michel_Hache ,

Currently this is a limitation in case of the label render, under the hood there are extra elements rendered to ensure the correct functionality.

At the moment, the only workaround I see is to display the tooltip dynamically using the onEventHoverIn / onEventHoverOut lifecycle events, as @Lehel already demonstrated in the previous reply. Since the nz-tooltip component has show and hide methods, it can be controlled programmatically, which works well in this scenario. I did a quick test and it seems to work correctly.

Here’s an example:

Template:

<mbsc-eventcalendar
  [data]="myEvents"
  [view]="{ calendar: { type: 'month' } }"
  [labelContentTemplate]="labelContentTemplate"
  (onEventHoverIn)="handleEventHoverIn($event)"
  (onEventHoverOut)="handleEventHoverOut()"
></mbsc-eventcalendar>

<div #tooltipTrigger nz-tooltip [nzTooltipTitle]="tooltipTitle" nzTooltipPlacement="top"></div>

Component

@ViewChild('tooltipTrigger', { static: false, read: NzTooltipDirective })
tooltipDirective!: NzTooltipDirective;

tooltipTitle = '';

handleEventHoverIn(args: any): void {
  const event = args.event;
  this.tooltipTitle = event.title || '';

  if (this.tooltipDirective) {
    if (this.tooltipDirective.component) {
      this.tooltipDirective.component.origin = new ElementRef(args.domEvent.target);
    }
    this.tooltipDirective.show();
  }
}

handleEventHoverOut(): void {
  if (this.tooltipDirective) {
    this.tooltipDirective.hide();
  }
}

This approach allows you to show the tooltip dynamically on hover, bypassing the limitations of the built-in label rendering.

Let me know if this helps!