Skip to content

Commit 82faaf4

Browse files
author
Matt Lewis
committed
feat(tooltip): allow the event tooltip templates to be customised
Closes #249
1 parent eb0bff0 commit 82faaf4

9 files changed

+149
-98
lines changed

‎scss/angular-calendar.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
@import 'month-view';
22
@import 'week-view';
33
@import 'day-view';
4+
@import 'tooltip';

‎scss/tooltip.scss

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
.cal-tooltip {
2+
position: absolute;
3+
z-index: 1070;
4+
display: block;
5+
font-style: normal;
6+
font-weight: normal;
7+
letter-spacing: normal;
8+
line-break: auto;
9+
line-height: 1.5;
10+
text-align: start;
11+
text-decoration: none;
12+
text-shadow: none;
13+
text-transform: none;
14+
white-space: normal;
15+
word-break: normal;
16+
word-spacing: normal;
17+
font-size: 11px;
18+
word-wrap: break-word;
19+
opacity: 0.9;
20+
}
21+
22+
.cal-tooltip.cal-tooltip-top {
23+
padding: 5px 0;
24+
margin-top: -3px;
25+
}
26+
27+
.cal-tooltip.cal-tooltip-top .cal-tooltip-arrow {
28+
bottom: 0;
29+
left: 50%;
30+
margin-left: -5px;
31+
border-width: 5px 5px 0;
32+
border-top-color: #000;
33+
}
34+
35+
.cal-tooltip.cal-tooltip-right {
36+
padding: 0 5px;
37+
margin-left: 3px;
38+
}
39+
40+
.cal-tooltip.cal-tooltip-right .cal-tooltip-arrow {
41+
top: 50%;
42+
left: 0;
43+
margin-top: -5px;
44+
border-width: 5px 5px 5px 0;
45+
border-right-color: #000;
46+
}
47+
48+
.cal-tooltip.cal-tooltip-bottom {
49+
padding: 5px 0;
50+
margin-top: 3px;
51+
}
52+
53+
.cal-tooltip.cal-tooltip-bottom .cal-tooltip-arrow {
54+
top: 0;
55+
left: 50%;
56+
margin-left: -5px;
57+
border-width: 0 5px 5px;
58+
border-bottom-color: #000;
59+
}
60+
61+
.cal-tooltip.cal-tooltip-left {
62+
padding: 0 5px;
63+
margin-left: -3px;
64+
}
65+
66+
.cal-tooltip.cal-tooltip-left .cal-tooltip-arrow {
67+
top: 50%;
68+
right: 0;
69+
margin-top: -5px;
70+
border-width: 5px 0 5px 5px;
71+
border-left-color: #000;
72+
}
73+
74+
.cal-tooltip-inner {
75+
max-width: 200px;
76+
padding: 3px 8px;
77+
color: #fff;
78+
text-align: center;
79+
background-color: #000;
80+
border-radius: 0.25rem;
81+
}
82+
83+
.cal-tooltip-arrow {
84+
position: absolute;
85+
width: 0;
86+
height: 0;
87+
border-color: transparent;
88+
border-style: solid;
89+
}

‎src/components/day/calendarDayView.component.ts

+6
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export interface DayViewEventResize {
9393
<mwl-calendar-day-view-event
9494
[dayEvent]="dayEvent"
9595
[tooltipPlacement]="tooltipPlacement"
96+
[tooltipTemplate]="tooltipTemplate"
9697
[customTemplate]="eventTemplate"
9798
(eventClicked)="eventClicked.emit({event: dayEvent.event})">
9899
</mwl-calendar-day-view-event>
@@ -185,6 +186,11 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
185186
*/
186187
@Input() tooltipPlacement: string = 'top';
187188

189+
/**
190+
* A custom template to use for the event tooltips
191+
*/
192+
@Input() tooltipTemplate: TemplateRef<any>;
193+
188194
/**
189195
* A custom template to use to replace the hour segment
190196
*/

‎src/components/day/calendarDayViewEvent.component.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ import { DayViewEvent } from 'calendar-utils';
1313
[class.cal-ends-within-day]="!dayEvent.endsAfterDay"
1414
[ngClass]="dayEvent.event.cssClass"
1515
[mwlCalendarTooltip]="dayEvent.event.title | calendarEventTitle:'dayTooltip':dayEvent.event"
16-
[tooltipPlacement]="tooltipPlacement">
16+
[tooltipPlacement]="tooltipPlacement"
17+
[tooltipEvent]="dayEvent.event"
18+
[tooltipTemplate]="tooltipTemplate">
1719
<mwl-calendar-event-actions [event]="dayEvent.event"></mwl-calendar-event-actions>
1820
<mwl-calendar-event-title
1921
[event]="dayEvent.event"
@@ -36,6 +38,8 @@ export class CalendarDayViewEventComponent {
3638

3739
@Input() customTemplate: TemplateRef<any>;
3840

41+
@Input() tooltipTemplate: TemplateRef<any>;
42+
3943
@Output() eventClicked: EventEmitter<any> = new EventEmitter();
4044

4145
}

‎src/components/month/calendarMonthCell.component.ts

+4
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import { MonthViewDay, CalendarEvent } from 'calendar-utils';
1919
(mouseleave)="unhighlightDay.emit({event: event})"
2020
[mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
2121
[tooltipPlacement]="tooltipPlacement"
22+
[tooltipEvent]="event"
23+
[tooltipTemplate]="tooltipTemplate"
2224
mwlDraggable
2325
[dropData]="{event: event}"
2426
[dragAxis]="{x: event.draggable, y: event.draggable}"
@@ -64,6 +66,8 @@ export class CalendarMonthCellComponent {
6466

6567
@Input() customTemplate: TemplateRef<any>;
6668

69+
@Input() tooltipTemplate: TemplateRef<any>;
70+
6771
@Output() highlightDay: EventEmitter<any> = new EventEmitter();
6872

6973
@Output() unhighlightDay: EventEmitter<any> = new EventEmitter();

‎src/components/month/calendarMonthView.component.ts

+6
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ import { CalendarUtils } from '../../providers/calendarUtils.provider';
6161
[openDay]="openDay"
6262
[locale]="locale"
6363
[tooltipPlacement]="tooltipPlacement"
64+
[tooltipTemplate]="tooltipTemplate"
6465
[customTemplate]="cellTemplate"
6566
(click)="dayClicked.emit({day: day})"
6667
(highlightDay)="toggleDayHighlight($event.event, true)"
@@ -127,6 +128,11 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
127128
*/
128129
@Input() tooltipPlacement: string = 'top';
129130

131+
/**
132+
* A custom template to use for the event tooltips
133+
*/
134+
@Input() tooltipTemplate: TemplateRef<any>;
135+
130136
/**
131137
* The start number of the week
132138
*/

‎src/components/week/calendarWeekView.component.ts

+6
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export interface WeekViewEventResize {
8080
<mwl-calendar-week-view-event
8181
[weekEvent]="weekEvent"
8282
[tooltipPlacement]="tooltipPlacement"
83+
[tooltipTemplate]="tooltipTemplate"
8384
[customTemplate]="eventTemplate"
8485
(eventClicked)="eventClicked.emit({event: weekEvent.event})">
8586
</mwl-calendar-week-view-event>
@@ -121,6 +122,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
121122
*/
122123
@Input() tooltipPlacement: string = 'bottom';
123124

125+
/**
126+
* A custom template to use for the event tooltips
127+
*/
128+
@Input() tooltipTemplate: TemplateRef<any>;
129+
124130
/**
125131
* The start number of the week
126132
*/

‎src/components/week/calendarWeekViewEvent.component.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ import { WeekViewEvent } from 'calendar-utils';
1212
[style.backgroundColor]="weekEvent.event.color.secondary"
1313
[ngClass]="weekEvent.event?.cssClass"
1414
[mwlCalendarTooltip]="weekEvent.event.title | calendarEventTitle:'weekTooltip':weekEvent.event"
15-
[tooltipPlacement]="tooltipPlacement">
15+
[tooltipPlacement]="tooltipPlacement"
16+
[tooltipEvent]="weekEvent.event"
17+
[tooltipTemplate]="tooltipTemplate">
1618
<mwl-calendar-event-actions [event]="weekEvent.event"></mwl-calendar-event-actions>
1719
<mwl-calendar-event-title
1820
[event]="weekEvent.event"
@@ -35,6 +37,8 @@ export class CalendarWeekViewEventComponent {
3537

3638
@Input() customTemplate: TemplateRef<any>;
3739

40+
@Input() tooltipTemplate: TemplateRef<any>;
41+
3842
@Output() eventClicked: EventEmitter<any> = new EventEmitter();
3943

4044
}

‎src/directives/calendarTooltip.directive.ts

+27-96
Original file line numberDiff line numberDiff line change
@@ -11,108 +11,29 @@ import {
1111
ElementRef,
1212
ComponentFactory,
1313
Inject,
14-
Renderer2
14+
Renderer2,
15+
TemplateRef
1516
} from '@angular/core';
1617
import { DOCUMENT } from '@angular/platform-browser';
1718
import { Positioning } from 'positioning';
19+
import { CalendarEvent } from 'calendar-utils';
1820

1921
@Component({
20-
styles: [`
21-
.cal-tooltip {
22-
position: absolute;
23-
z-index: 1070;
24-
display: block;
25-
font-style: normal;
26-
font-weight: normal;
27-
letter-spacing: normal;
28-
line-break: auto;
29-
line-height: 1.5;
30-
text-align: start;
31-
text-decoration: none;
32-
text-shadow: none;
33-
text-transform: none;
34-
white-space: normal;
35-
word-break: normal;
36-
word-spacing: normal;
37-
font-size: 11px;
38-
word-wrap: break-word;
39-
opacity: 0.9;
40-
}
41-
42-
.cal-tooltip.cal-tooltip-top {
43-
padding: 5px 0;
44-
margin-top: -3px;
45-
}
46-
47-
.cal-tooltip.cal-tooltip-top .cal-tooltip-arrow {
48-
bottom: 0;
49-
left: 50%;
50-
margin-left: -5px;
51-
border-width: 5px 5px 0;
52-
border-top-color: #000;
53-
}
54-
55-
.cal-tooltip.cal-tooltip-right {
56-
padding: 0 5px;
57-
margin-left: 3px;
58-
}
59-
60-
.cal-tooltip.cal-tooltip-right .cal-tooltip-arrow {
61-
top: 50%;
62-
left: 0;
63-
margin-top: -5px;
64-
border-width: 5px 5px 5px 0;
65-
border-right-color: #000;
66-
}
67-
68-
.cal-tooltip.cal-tooltip-bottom {
69-
padding: 5px 0;
70-
margin-top: 3px;
71-
}
72-
73-
.cal-tooltip.cal-tooltip-bottom .cal-tooltip-arrow {
74-
top: 0;
75-
left: 50%;
76-
margin-left: -5px;
77-
border-width: 0 5px 5px;
78-
border-bottom-color: #000;
79-
}
80-
81-
.cal-tooltip.cal-tooltip-left {
82-
padding: 0 5px;
83-
margin-left: -3px;
84-
}
85-
86-
.cal-tooltip.cal-tooltip-left .cal-tooltip-arrow {
87-
top: 50%;
88-
right: 0;
89-
margin-top: -5px;
90-
border-width: 5px 0 5px 5px;
91-
border-left-color: #000;
92-
}
93-
94-
.cal-tooltip-inner {
95-
max-width: 200px;
96-
padding: 3px 8px;
97-
color: #fff;
98-
text-align: center;
99-
background-color: #000;
100-
border-radius: 0.25rem;
101-
}
102-
103-
.cal-tooltip-arrow {
104-
position: absolute;
105-
width: 0;
106-
height: 0;
107-
border-color: transparent;
108-
border-style: solid;
109-
}
110-
`],
11122
template: `
112-
<div class="cal-tooltip" [ngClass]="'cal-tooltip-' + placement">
113-
<div class="cal-tooltip-arrow"></div>
114-
<div class="cal-tooltip-inner" [innerHtml]="contents"></div>
115-
</div>
23+
<ng-template #defaultTemplate>
24+
<div class="cal-tooltip" [ngClass]="'cal-tooltip-' + placement">
25+
<div class="cal-tooltip-arrow"></div>
26+
<div class="cal-tooltip-inner" [innerHtml]="contents"></div>
27+
</div>
28+
</ng-template>
29+
<ng-template
30+
[ngTemplateOutlet]="customTemplate || defaultTemplate"
31+
[ngTemplateOutletContext]="{
32+
contents: contents,
33+
placement: placement,
34+
event: event
35+
}">
36+
</ng-template>
11637
`
11738
})
11839
export class CalendarTooltipWindowComponent {
@@ -121,6 +42,10 @@ export class CalendarTooltipWindowComponent {
12142

12243
@Input() placement: string;
12344

45+
@Input() event: CalendarEvent;
46+
47+
@Input() customTemplate: TemplateRef<any>;
48+
12449
}
12550

12651
@Directive({
@@ -132,6 +57,10 @@ export class CalendarTooltipDirective implements OnDestroy {
13257

13358
@Input('tooltipPlacement') placement: string = 'top'; // tslint:disable-line no-input-rename
13459

60+
@Input('tooltipTemplate') customTemplate: TemplateRef<any>; // tslint:disable-line no-input-rename
61+
62+
@Input('tooltipEvent') event: CalendarEvent; // tslint:disable-line no-input-rename
63+
13564
private tooltipFactory: ComponentFactory<CalendarTooltipWindowComponent>;
13665
private tooltipRef: ComponentRef<CalendarTooltipWindowComponent>;
13766
private positioning: Positioning = new Positioning();
@@ -166,6 +95,8 @@ export class CalendarTooltipDirective implements OnDestroy {
16695
this.tooltipRef = this.viewContainerRef.createComponent(this.tooltipFactory, 0, this.injector, []);
16796
this.tooltipRef.instance.contents = this.contents;
16897
this.tooltipRef.instance.placement = this.placement;
98+
this.tooltipRef.instance.customTemplate = this.customTemplate;
99+
this.tooltipRef.instance.event = this.event;
169100
this.document.body.appendChild(this.tooltipRef.location.nativeElement);
170101
requestAnimationFrame(() => {
171102
this.positionTooltip();

0 commit comments

Comments
 (0)