Angular-calendar: Custom tooltip template?

[mythjuha]

Bug description / Feature request:

Feature request

Versions

Angular: 4.2.3
Calendar library: 0.17.3

Is there a way to customise the tooltip template?

[shikya]

Currently, you have to customise the complete event template for that.

[mythjuha]

I'm already using a custom event template. But it seems like i can only edit the text inside the tooltip, but not include html and angular code.

Any instructions or pointers to lead me in the right direction? I was tring to use the ngbTooltip instead, which used to work with the angular 1 version of the calendar, but I can't seem to access the event data.

[mattlewis92]

If you're already using ng-bootstrap + custom templates then I'd recommend using the ngbTooltip for now (but as every other template can be customised I don't see why I can't add support for this one as well). When you say you can't access the event data would you mind sharing some code of what you're trying and I'll see if I can help some more 😄

[mythjuha]

Code below results in following error: "TypeError: Cannot read property 'Type' of undefined". Pointing to the event variable inside the tooltop. The cellTemplate works perfect.

<ng-template #cellTemplate 
             let-day="day" 
             let-tooltipPlacement="tooltipPlacement">
    <div class="cal-cell-top">
        <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
    </div>
    <div class="cal-events" *ngIf="day.events.length > 0">
        <div class="cal-courseevent"
             *ngFor="let event of day.events"
             [ngClass]="event.Type"
             [ngbTooltip]="tooltipTemplate"
             placement="top"
             (mwlClick)="onEventClick($event, event)">
            <div class="event-warning-exam" *ngIf="event.Type == 'Examen' || event.Type == 'Herexamen'">
                <i class="fa fa-exclamation-circle"></i>
            </div>
            <div [ngClass]="{'event-warning-margin': event.Type == 'Examen' || event.Type == 'Herexamen'}">
                {{event.From | amDateFormat: 'HH:mm'}}: <b>{{event.title}}</b>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #tooltipTemplate let-event="event">
    <div>
        <span *ngIf="event.Type == 'Examen'"><b>EXAMEN:</b><br /></span>
        <span *ngIf="event.Type == 'Herexamen'"><strong>HEREXAMEN:</strong><br /></span>
        {{event.title}}<span *ngIf="event.Role">, {{event.Role}}</span><br />
        {{event.start | amDateFormat: 'HH:mm'}} - {{event.end | amDateFormat: 'HH:mm'}}
    </div>
</ng-template>

[mattlewis92]

I've never tried it, but are you able to nest the tooltip ng-template inside the cellTemplate one?

[mattlewis92]

I've just released 0.18.0 which allows an extra tooltipTemplate input on the tooltip directive where you can pass an <ng-template> template ref to replace the default template. Hope that helps! 😄

[mythjuha]

Any example on how to implement the new template? I keep getting the following message:

Can't bind to 'tooltipTemplate' since it isn't a known property of 'div'

Edit: on version 0.18.2

[etwillbefine]

<ng-template #myTemplateId>my content here {{ event.something }}</ng-template>
<mwl-calendar-day-view [tooltipTemplate]="myTemplateId"></mwl-calendar-day-view>

See example/default: https://github.com/mattlewis92/angular-calendar/commit/82faaf47fbba99057b4097a413a58bcf5cd81c66#diff-f8d443cdb3ec4f4d1eb91fde0e041837R23

[mythjuha]

I really can't get it to work. Keep getting these errors inmy month-cell template:

Can't bind to 'tooltipPlacement' since it isn't a known property of 'div'. ("
        <div class="cal-courseevent"
             *ngFor="let event of day.events"
             [ERROR ->][tooltipPlacement]="tooltipPlacement"
             [tooltipEvent]="event"
             [tooltipTemp"): ng:///AppModule/AgendaComponent.html@85:13
Can't bind to 'tooltipEvent' since it isn't a known property of 'div'. (" *ngFor="let event of day.events"
             [tooltipPlacement]="tooltipPlacement"
             [ERROR ->][tooltipEvent]="event"
             [tooltipTemplate]="tooltipTemplate"
             [ngClass]="eve"): ng:///AppModule/AgendaComponent.html@86:13
Can't bind to 'tooltipTemplate' since it isn't a known property of 'div'. ("           [tooltipPlacement]="tooltipPlacement"
             [tooltipEvent]="event"
             [ERROR ->][tooltipTemplate]="tooltipTemplate"
             [ngClass]="event.Type"
             (mwlClick)="on"): ng:///AppModule/AgendaComponent.html@87:13

[mattlewis92]

You're missing off the selector for the tooltip directive: https://github.com/mattlewis92/angular-calendar/blob/master/src/components/month/calendarMonthCell.component.ts#L20

[mythjuha]

That fixed the errors, but still not seeiing any tooltip.

I have the following inside my 'component html':

            <mwl-calendar-month-view
                          [viewDate]="CalendarDate"
                          [events]="Events"
                          [locale]="nl"
                          [weekStartsOn]="1"
                          [headerTemplate]="headerTemplate"
                          [cellTemplate]="cellTemplate"
                          [tooltipTemplate]="cellTooltipTemplate"
                          [tooltipPlacement]="top"
                          on-event-click="ShowCourseEventDetails(calendarEvent)"
                          view-title="calendarTitle"
                          slide-box-disabled="true">
            </mwl-calendar-month-view>

And these are my templates:

<ng-template #headerTemplate 
             let-days="days" 
             let-locale="locale"
             let-dayClicked="dayClicked"
             let-eventDropped="eventDropped">
    <div class="cal-cell-row cal-header">
        <div class="cal-cell"
             *ngFor="let day of days"
             [class.cal-past]="day.isPast"
             [class.cal-today]="day.isToday"
             [class.cal-future]="day.isFuture"
             [class.cal-weekend]="day.isWeekend">
            {{ day.date | amDateFormat: 'dddd'}}
        </div>
    </div>
</ng-template>

<ng-template #cellTemplate 
             let-day="day"
             let-tooltipTemplate="tooltipTemplate"
             let-tooltipPlacement="tooltipPlacement">
    <div class="cal-cell-top">
        <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
    </div>
    <div class="cal-events" *ngIf="day.events.length > 0">
        <div class="cal-courseevent"
             *ngFor="let event of day.events"
             mwlCalendarTooltip
             [tooltipEvent]="event"
             [tooltipTemplate]="tooltipTemplate"
             [tooltipPlacement]="top"
             [ngClass]="event.Type"
             (mwlClick)="onEventClick($event, event)">
            <div class="event-warning-exam" *ngIf="event.Type == 'Examen' || event.Type == 'Herexamen'">
                <i class="fa fa-exclamation-circle"></i>
            </div>
            <div [ngClass]="{'event-warning-margin': event.Type == 'Examen' || event.Type == 'Herexamen'}">
                {{event.From | amDateFormat: 'HH:mm'}}: <b>{{event.title}}</b>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #cellTooltipTemplate
             let-event="event"
             let-placement="placement">
    <div class="cal-tooltip" [ngClass]="'cal-tooltip-' + placement">
        <div class="cal-tooltip-arrow"></div>
        <div class="cal-tooltip-inner">
            <span *ngIf="event.Type == 'Examen'"><b>EXAMEN:</b><br /></span>
            <span *ngIf="event.Type == 'Herexamen'"><strong>HEREXAMEN:</strong><br /></span>
            {{event.title}}<span *ngIf="event.Role">, {{event.Role}}</span><br />
            {{event.start | amDateFormat: 'HH:mm'}} - {{event.end | amDateFormat: 'HH:mm'}}  </div>
    </div>
</ng-template>

[mattlewis92]

I can't see anything wrong with that, can you make a plunker that reproduces it please?

BTW if you're not using directives / custom components in your tooltip it already accepts html, it might be easier for you to use the provider to control the tooltip template. See this demo of how to do it (but change the 3 overridden methods to return the content you want instead of an empty string): https://mattlewis92.github.io/angular-calendar/#/disable-tooltips

[mythjuha]

As ordered :) : http://embed.plnkr.co/N7OlBurlmTCQ4Scok9kS/
Thanks for the support by the way!

[mattlewis92]

That's really helpful thanks! It looks like I forgot to make the tooltipTemplate value from the parent available to child templates, I've just cut 0.18.3 which fixes this. Or you can save a bit of complexity and not pass it through and use the parent template reference like this: https://plnkr.co/edit/N7OlBurlmTCQ4Scok9kS?p=info

[mythjuha]

Updated but still no luck. And i'm guessing you copied the wrong plunker link :).

[mattlewis92]

Ah I don't think I hit save! I'm away on holiday for the next week so will be able to help you more then, but iirc I only had to change 2 lines to get your plunked to work so maybe you can figure it out by then 🙃

[mythjuha]

Save on the plunker, or save on the changes you made for 0.18.3? Cause it seems the only thing changed in 0.18.3 is the changelog file :).

I'll see if i can find some magic to get it working :).

[mythjuha]

Ok, got it working. So i moved _[tooltipTemplate]="cellTooltipTemplate"_ from the mwl-calendar-month-view, into my customCellTemplate, and i had to add a value to the mwlCalendarTooltip directive. When empty/blank/null the tooltip won't show.

<ng-template #cellTemplate
             let-day="day">
    <div class="cal-cell-top">
        <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
    </div>
    <div class="cal-events" *ngIf="day.events.length > 0">
        <div class="cal-courseevent"
             *ngFor="let event of day.events"
             mwlCalendarTooltip="true"
             [tooltipEvent]="event"
             [tooltipTemplate]="cellTooltipTemplate"
             [ngClass]="event.Type"
             (mwlClick)="onEventClick($event, event)">
            <div class="event-warning-exam" *ngIf="event.Type == 'Examen' || event.Type == 'Herexamen'">
                <i class="fa fa-exclamation-circle"></i>
            </div>
            <div [ngClass]="{'event-warning-margin': event.Type == 'Examen' || event.Type == 'Herexamen'}">
                {{event.From | amDateFormat: 'HH:mm'}}: <b>{{event.title}}</b>
            </div>
        </div>
    </div>
</ng-template>

[mattlewis92]

Ah of course, I deliberately disable the tooltip if you pass an empty value. I guess it's an edge case that can just be solved via better documentation. Glad you got it sorted 🙂

[AhHa45]

Can you please explain how to show tooltip for the eventTemplate? It should work the same way, shouldn't it?

[siva-geddada]

Hai @mythjuha @mattlewis92 I am trying to replicate the below code but I got some issue with that Can anyone provide me a reference for adding a customized tooltip In a calendar.

let-day="day">

{{ day.date | calendarDate:'monthViewDayNumber':locale }}

*ngFor="let event of day.events"
mwlCalendarTooltip="true"
[tooltipEvent]="event"
[tooltipTemplate]="cellTooltipTemplate"
[ngClass]="event.Type"
(mwlClick)="onEventClick($event, event)">

{{event.From | amDateFormat: 'HH:mm'}}: {{event.title}}

[revatim]

Can you please explain how to show tooltip for the eventTemplate? It should work the same way, shouldn't it?

Did you find a solution for this ?