Angular-calendar: Tooltips in custom templates

Created on 14 Aug 2017 · 8Comments · Source: mattlewis92/angular-calendar

I'm submitting a ...

[ ] Bug report 
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit a support request here, please ask on https://stackoverflow.com/

Bug description / Feature request

I've defined a custom month cell template and I get warnings about missing properties and methods:

[76, 32]: The property "tooltipPlacement" that you're trying to access does not exist in the class declaration.
[78, 31]: The property "tooltipTemplate" that you're trying to access does not exist in the class declaration.
[79, 35]: The property "tooltipAppendToBody" that you're trying to access does not exist in the class declaration.
[73, 26]: The method "highlightDay" that you're trying to access does not exist in the class declaration.
[74, 26]: The method "unhighlightDay" that you're trying to access does not exist in the class declaration.
[80, 24]: The method "onEventClick" that you're trying to access does not exist in the class declaration.

Here's my template:

<ng-template #customCellTemplate let-day="day" let-locale="locale">
    <div class="cal-cell-top">
        <span class="cal-day-badge bg-{{day.dayPoints[0].meta.value >= 2 ? 'success' : 'warning'}}" *ngIf="day.dayPoints.length">
            {{ day.dayPoints[0].meta.value }}
        </span>
        <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
        <div class="cal-day-notes" *ngIf="day.dayPoints.length" [ngbPopover]="day.dayPoints[0].meta.notes">
            {{day.dayPoints[0].meta.notes}}
        </div>
    </div>
    <div class="cal-events" *ngIf="day.events.length > 0">
        <div
            class="cal-event"
            *ngFor="let event of day.events"
            [style.backgroundColor]="event.color.primary"
            (mouseenter)="highlightDay.emit({event: event})"
            (mouseleave)="unhighlightDay.emit({event: event})"
            [mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
            [tooltipPlacement]="tooltipPlacement"
            [tooltipEvent]="event"
            [tooltipTemplate]="tooltipTemplate"
            [tooltipAppendToBody]="tooltipAppendToBody"
            (mwlClick)="onEventClick($event, event)">
        </div>
    </div>
    <div class="cal-emoji pull-right" *ngIf="day.dayPoints.length" [ngSwitch]="day.dayPoints[0].meta.value">
        <span *ngSwitchCase="0">😞</span>
        <span *ngSwitchCase="1">😕</span>
        <span *ngSwitchCase="2">🙂</span>
        <span *ngSwitchCase="3">😁</span>
    </div>
</ng-template>

If I remove the properties and methods from the "cal-events" div, the warning goes away.

<div class="cal-events" *ngIf="day.events.length > 0">
        <div
            class="cal-event"
            *ngFor="let event of day.events"
            [style.backgroundColor]="event.color.primary"
            [mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event">
        </div>
    </div>

However, there's still no tooltips. Is it possible to use the tooltips on a custom template or do I have to provide my own (e.g. with [ngbPopover]? I have a similar question about highlightDay/unhighlightDay? I tried adding these properties/methods using let-* on the customTemplate, but that doesn't seem to work either.

Minimal reproduction of the problem with instructions

Versions

Angular: 4.2.6

Calendar library: 0.20.1

Browser name and version: Chrome 60.0.3112.90

Source

mraible

All 8 comments

It's hard to really see what's going on without a runnable plunker / repro. Would you mind creating one that reproduces your problem? You can fork a starting one from any of the demos. Thanks! 😀

mattlewis92 on 15 Aug 2017

Here's a plunker that uses code similar to what I'd like to do. I copied the template from https://github.com/mattlewis92/angular-calendar/blob/master/src/components/month/calendarMonthCell.component.ts and removed the last 4 properties to make things draggable (because there are errors when they exist).

          [dropData]="{event: event}"
          [dragAxis]="{x: event.draggable, y: event.draggable}"
          (mwlClick)="onEventClick($event, event)">

The tooltips render in this example, but there are console errors when you mouseover stuff.

http://plnkr.co/edit/sLnYvnygqtZlDXnTaVOr?p=preview

mraible on 15 Aug 2017

Hey mraible. I had some similar problems with custom template (I can't say now if they were the same like yours) but adding this code helped me solve my problem. Maybe it helps you somehow:

  <ng-template #customTemplate let-day="day" let-locale="locale"
      let-openDay="openDay"
      let-tooltipPlacement="tooltipPlacement"
      let-highlightDay="highlightDay"
      let-unhighlightDay="unhighlightDay"
      let-eventClicked="eventClicked"
    >

Wycza on 25 Aug 2017

@Wycza I tried adding these and it doesn't help. I still don't see any tooltips when hovering over items. Here's the template I'm using.

<ng-template #customCellTemplate let-day="day" let-locale="locale"
             let-openDay="openDay"
             let-tooltipPlacement="tooltipPlacement"
             let-highlightDay="highlightDay"
             let-unhighlightDay="unhighlightDay"
             let-eventClicked="eventClicked">
    <div class="cal-cell-top">
        <span class="cal-day-badge bg-{{day.dayPoints[0].meta.value >= 2 ? 'success' : 'warning'}}"
              *ngIf="day.dayPoints.length">
            {{ day.dayPoints[0].meta.value }}
        </span>
        <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
        <div class="cal-day-notes" *ngIf="day.dayPoints.length" [ngbPopover]="day.dayPoints[0].meta.notes">
            {{day.dayPoints[0].meta.notes}}
        </div>
    </div>
    <div class="cal-events" *ngIf="day.events.length > 0">
        <div
            class="cal-event"
            *ngFor="let event of day.events"
            [style.backgroundColor]="event.color.primary"
            (mouseenter)="highlightDay.emit({event: event})"
            (mouseleave)="unhighlightDay.emit({event: event})"
            [mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
            [tooltipPlacement]="tooltipPlacement"
            [tooltipEvent]="event"
            [tooltipTemplate]="tooltipTemplate"
            [tooltipAppendToBody]="tooltipAppendToBody"
            (mwlClick)="onEventClick($event, event)">
        </div>
    </div>
    <div class="cal-emoji pull-right" *ngIf="day.dayPoints.length" [ngSwitch]="day.dayPoints[0].meta.value">
        <span *ngSwitchCase="0">😞</span>
        <span *ngSwitchCase="1">😕</span>
        <span *ngSwitchCase="2">🙂</span>
        <span *ngSwitchCase="3">😁</span>
    </div>
</ng-template>

mraible on 28 Aug 2017

Hi, so sorry about the late reply on this one, I've been super busy with work and real life the past few weeks and not had much time for open source. You need to expose all template variables to your custom template for it to work. Here's your plunkr fixed: http://plnkr.co/edit/xYNhzJ4ovg74vhoCNDpq?p=preview Hope that helps 😄

mattlewis92 on 28 Aug 2017

👍1

I've just added a recipe to the readme and added all local variables to each template in the source which should hopefully make things a bit clearer / easier to copy paste for folks in the future. Documentation is not my strength though so if anyone has any feedback on how to improve it that would be awesome 😄

mattlewis92 on 28 Aug 2017

😕1 👍1

Can you link us to that recipe?