Skip to content

Commit 68a8f39

Browse files
author
Matt Lewis
committed
feat(ng4): upgrade to angular 4 to remove the <template> tag deprecation warning
BREAKING CHANGE: angular 4.0 or higher is now required to use this library. The [upgrade](http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html) should be seamless for most users. Fixes #163
1 parent 96b904c commit 68a8f39

13 files changed

+61
-57
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# angular 2.0+ calendar
1+
# angular 4.0+ calendar
22

33
[![Build Status](https://travis-ci.org/mattlewis92/angular-calendar.svg?branch=master)](https://travis-ci.org/mattlewis92/angular-calendar)
44
[![codecov](https://codecov.io/gh/mattlewis92/angular-calendar/branch/master/graph/badge.svg)](https://codecov.io/gh/mattlewis92/angular-calendar)
@@ -24,7 +24,7 @@ https://mattlewis92.github.io/angular-calendar/
2424

2525
## About
2626

27-
A calendar component for Angular 2.0+ that can display events on a month, week or day view. The successor of [angular-bootstrap-calendar](https://github.com/mattlewis92/angular-bootstrap-calendar).
27+
A calendar component for Angular 4.0+ that can display events on a month, week or day view. The successor of [angular-bootstrap-calendar](https://github.com/mattlewis92/angular-bootstrap-calendar).
2828

2929
## Getting started
3030

‎demos/demo-modules/custom-templates/template.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
[(viewDate)]="viewDate">
44
</mwl-demo-utils-calendar-header>
55

6-
<template #customCellTemplate let-day="day" let-locale="locale">
6+
<ng-template #customCellTemplate let-day="day" let-locale="locale">
77
<div class="cal-cell-top">
88
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
99
<span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
1010
</div>
1111
<small style="margin: 5px">There are {{ day.events.length }} events on this day</small>
12-
</template>
12+
</ng-template>
1313

1414
<div [ngSwitch]="view">
1515
<mwl-calendar-month-view

‎demos/demo-modules/group-month-view-events/template.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
[(viewDate)]="viewDate">
44
</mwl-demo-utils-calendar-header>
55

6-
<template #customCellTemplate let-day="day" let-locale="locale">
6+
<ng-template #customCellTemplate let-day="day" let-locale="locale">
77
<div class="cal-cell-top">
88
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
99
<span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
@@ -15,7 +15,7 @@
1515
{{ group[1].length }}
1616
</span>
1717
</div>
18-
</template>
18+
</ng-template>
1919

2020
<div [ngSwitch]="view">
2121
<mwl-calendar-month-view

‎demos/demo-modules/kitchen-sink/template.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<template #modalContent let-close="close">
1+
<ng-template #modalContent let-close="close">
22
<div class="modal-header">
33
<h5 class="modal-title">Event action occurred</h5>
44
<button type="button" class="close" (click)="close()">
@@ -18,7 +18,7 @@ <h5 class="modal-title">Event action occurred</h5>
1818
<div class="modal-footer">
1919
<button type="button" class="btn btn-secondary" (click)="close()">OK</button>
2020
</div>
21-
</template>
21+
</ng-template>
2222

2323
<div class="row text-center">
2424
<div class="col-md-4">

‎demos/index.ejs

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<meta http-equiv="x-ua-compatible" content="ie=edge">
7-
<title>Angular 2.0+ calendar</title>
7+
<title>Angular 4.0+ calendar</title>
88
</head>
99
<body>
1010

1111
<a href="https://github.com/mattlewis92/angular-calendar" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 100000"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
1212

1313
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" role="navigation">
14-
<a class="navbar-brand" href="#">Angular 2.0+ calendar</a>
14+
<a class="navbar-brand" href="#">Angular 4.0+ calendar</a>
1515
<ul class="nav navbar-nav hidden-xs">
1616
<li class="nav-item active">
1717
<a class="nav-link" href="javascript:;">

‎package.json

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angular-calendar",
33
"version": "0.9.1",
4-
"description": "A calendar component that can display events on a month, week or day view",
4+
"description": "A calendar component for angular 4.0+ that can display events on a month, week or day view",
55
"main": "./dist/umd/angular-calendar.js",
66
"style": "./dist/css/angular-calendar.css",
77
"module": "./dist/esm/src/index.js",
@@ -32,6 +32,7 @@
3232
"keywords": [
3333
"angular",
3434
"angular2",
35+
"angular4",
3536
"calendar"
3637
],
3738
"author": "Matt Lewis",
@@ -126,9 +127,9 @@
126127
"zone.js": "^0.8.4"
127128
},
128129
"peerDependencies": {
129-
"@angular/common": ">=2.0.0 <5.0.0",
130-
"@angular/core": ">=2.0.0 <5.0.0",
131-
"@angular/platform-browser": ">=2.0.0 <5.0.0"
130+
"@angular/common": "^4.0.0",
131+
"@angular/core": "^4.0.0",
132+
"@angular/platform-browser": "^4.0.0"
132133
},
133134
"files": [
134135
"dist",
@@ -140,8 +141,8 @@
140141
}
141142
},
142143
"dependencies": {
143-
"angular-draggable-droppable": "^0.6.0",
144-
"angular-resizable-element": "^0.8.0",
144+
"angular-draggable-droppable": "^1.0.0",
145+
"angular-resizable-element": "^1.0.0",
145146
"calendar-utils": "0.0.42",
146147
"date-fns": "^1.15.1",
147148
"positioning": "^1.0.4"

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { MonthViewDay, CalendarEvent } from 'calendar-utils';
44
@Component({
55
selector: 'mwl-calendar-month-cell',
66
template: `
7-
<template #defaultTemplate>
7+
<ng-template #defaultTemplate>
88
<div class="cal-cell-top">
99
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
1010
<span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
@@ -25,10 +25,10 @@ import { MonthViewDay, CalendarEvent } from 'calendar-utils';
2525
(click)="$event.stopPropagation(); eventClicked.emit({event: event})">
2626
</div>
2727
</div>
28-
</template>
29-
<template
28+
</ng-template>
29+
<ng-template
3030
[ngTemplateOutlet]="customTemplate || defaultTemplate"
31-
[ngOutletContext]="{
31+
[ngTemplateOutletContext]="{
3232
day: day,
3333
openDay: openDay,
3434
locale: locale,
@@ -37,7 +37,7 @@ import { MonthViewDay, CalendarEvent } from 'calendar-utils';
3737
unhighlightDay: unhighlightDay,
3838
eventClicked: eventClicked
3939
}">
40-
</template>
40+
</ng-template>
4141
`,
4242
host: {
4343
'[class]': '"cal-cell cal-day-cell " + day?.cssClass',

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { WeekDay } from 'calendar-utils';
44
@Component({
55
selector: 'mwl-calendar-month-view-header',
66
template: `
7-
<template #defaultTemplate>
7+
<ng-template #defaultTemplate>
88
<div class="cal-cell-row cal-header">
99
<div
1010
class="cal-cell"
@@ -16,11 +16,11 @@ import { WeekDay } from 'calendar-utils';
1616
{{ day.date | calendarDate:'monthViewColumnHeader':locale }}
1717
</div>
1818
</div>
19-
</template>
20-
<template
19+
</ng-template>
20+
<ng-template
2121
[ngTemplateOutlet]="customTemplate || defaultTemplate"
22-
[ngOutletContext]="{days: days, locale: locale}">
23-
</template>
22+
[ngTemplateOutletContext]="{days: days, locale: locale}">
23+
</ng-template>
2424
`
2525
})
2626
export class CalendarMonthViewHeaderComponent {

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

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import {
22
Component,
33
Input,
4-
trigger,
5-
style,
6-
transition,
7-
animate,
84
Output,
95
EventEmitter,
106
TemplateRef
117
} from '@angular/core';
8+
import {
9+
trigger,
10+
style,
11+
transition,
12+
animate
13+
} from '@angular/animations';
1214
import { CalendarEvent } from 'calendar-utils';
1315

1416
@Component({
1517
selector: 'mwl-calendar-open-day-events',
1618
template: `
17-
<template #defaultTemplate>
19+
<ng-template #defaultTemplate>
1820
<div
1921
*ngFor="let event of events"
2022
[ngClass]="event?.cssClass"
@@ -32,15 +34,15 @@ import { CalendarEvent } from 'calendar-utils';
3234
</mwl-calendar-event-title>
3335
<mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
3436
</div>
35-
</template>
37+
</ng-template>
3638
<div class="cal-open-day-events" [@collapse] *ngIf="isOpen">
37-
<template
39+
<ng-template
3840
[ngTemplateOutlet]="customTemplate || defaultTemplate"
39-
[ngOutletContext]="{
41+
[ngTemplateOutletContext]="{
4042
events: events,
4143
eventClicked: eventClicked
4244
}">
43-
</template>
45+
</ng-template>
4446
</div>
4547
`,
4648
animations: [

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { CalendarEvent, WeekDay } from 'calendar-utils';
44
@Component({
55
selector: 'mwl-calendar-week-view-header',
66
template: `
7-
<template #defaultTemplate>
7+
<ng-template #defaultTemplate>
88
<div class="cal-day-headers">
99
<div
1010
class="cal-header"
@@ -23,11 +23,11 @@ import { CalendarEvent, WeekDay } from 'calendar-utils';
2323
<span>{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span>
2424
</div>
2525
</div>
26-
</template>
27-
<template
26+
</ng-template>
27+
<ng-template
2828
[ngTemplateOutlet]="customTemplate || defaultTemplate"
29-
[ngOutletContext]="{days: days, locale: locale, dayClicked: dayClicked, eventDropped: eventDropped}">
30-
</template>
29+
[ngTemplateOutletContext]="{days: days, locale: locale, dayClicked: dayClicked, eventDropped: eventDropped}">
30+
</ng-template>
3131
`
3232
})
3333
export class CalendarWeekViewHeaderComponent {

‎src/directives/calendarTooltip.directive.ts

+9-8
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ import {
66
OnDestroy,
77
Input,
88
ComponentRef,
9-
Renderer,
109
Injector,
1110
ComponentFactoryResolver,
1211
ViewContainerRef,
1312
ElementRef,
1413
ComponentFactory,
15-
Inject
14+
Inject,
15+
Renderer2
1616
} from '@angular/core';
1717
import { DOCUMENT } from '@angular/platform-browser';
1818
import { Positioning } from 'positioning';
@@ -139,8 +139,8 @@ export class CalendarTooltipDirective implements AfterViewChecked, OnDestroy {
139139

140140
constructor(
141141
private elementRef: ElementRef,
142-
private renderer: Renderer,
143142
private injector: Injector,
143+
private renderer: Renderer2,
144144
componentFactoryResolver: ComponentFactoryResolver,
145145
private viewContainerRef: ViewContainerRef,
146146
@Inject(DOCUMENT) private document //tslint:disable-line
@@ -149,7 +149,7 @@ export class CalendarTooltipDirective implements AfterViewChecked, OnDestroy {
149149
}
150150

151151
ngAfterViewChecked(): void {
152-
this.positionPopover();
152+
this.positionTooltip();
153153
}
154154

155155
ngOnDestroy(): void {
@@ -182,15 +182,16 @@ export class CalendarTooltipDirective implements AfterViewChecked, OnDestroy {
182182
}
183183
}
184184

185-
private positionPopover(): void {
185+
private positionTooltip(): void {
186186
if (this.tooltipRef) {
187187
const targetPosition: ClientRect = this.positioning.positionElements(
188188
this.elementRef.nativeElement, this.tooltipRef.location.nativeElement.children[0], this.placement, true
189189
);
190190

191-
const targetStyle: CSSStyleDeclaration = this.tooltipRef.location.nativeElement.children[0].style;
192-
targetStyle.top = `${targetPosition.top}px`;
193-
targetStyle.left = `${targetPosition.left}px`;
191+
const elm: HTMLElement = this.tooltipRef.location.nativeElement.children[0];
192+
193+
this.renderer.setStyle(elm, 'top', `${targetPosition.top}px`);
194+
this.renderer.setStyle(elm, 'left', `${targetPosition.left}px`);
194195
}
195196
}
196197

‎src/providers/calendarMomentDateFormatter.provider.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { OpaqueToken, Inject } from '@angular/core';
2-
import { CalendarDateFormatterInterface, DateFormatterParams } from './../interfaces/calendarDateFormatter.interface';
1+
import { InjectionToken, Inject } from '@angular/core';
2+
import { CalendarDateFormatterInterface, DateFormatterParams } from '../interfaces/calendarDateFormatter.interface';
33

4-
export const MOMENT: OpaqueToken = new OpaqueToken('Moment');
4+
export const MOMENT: InjectionToken<string> = new InjectionToken('Moment');
55

66
/**
77
* This will use <a href="http://momentjs.com/" target="_blank">moment</a> to do all date formatting. To use this class:

‎yarn.lock

+6-6
Original file line numberDiff line numberDiff line change
@@ -199,17 +199,17 @@ amdefine@>=0.0.4:
199199
version "1.0.1"
200200
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
201201

202-
angular-draggable-droppable@^0.6.0:
203-
version "0.6.0"
204-
resolved "https://registry.yarnpkg.com/angular-draggable-droppable/-/angular-draggable-droppable-0.6.0.tgz#1622144972413d8b02600e764e3461e113d18a45"
202+
angular-draggable-droppable@^1.0.0:
203+
version "1.0.0"
204+
resolved "https://registry.yarnpkg.com/angular-draggable-droppable/-/angular-draggable-droppable-1.0.0.tgz#16e9c881611c5a0c6c018b441fa774691ed9356c"
205205

206206
angular-highlight-js@^1.0.0:
207207
version "1.0.2"
208208
resolved "https://registry.yarnpkg.com/angular-highlight-js/-/angular-highlight-js-1.0.2.tgz#df4dce0bb1a1d1e6776a561b075700abcfa457ea"
209209

210-
angular-resizable-element@^0.8.0:
211-
version "0.8.1"
212-
resolved "https://registry.yarnpkg.com/angular-resizable-element/-/angular-resizable-element-0.8.1.tgz#fc5ad5635b6d5a7376f7fcb9513b9fd771017157"
210+
angular-resizable-element@^1.0.0:
211+
version "1.0.0"
212+
resolved "https://registry.yarnpkg.com/angular-resizable-element/-/angular-resizable-element-1.0.0.tgz#5698a703d5db876ef1a7b43ace7463e81ec54685"
213213

214214
angular2-template-loader@^0.6.0:
215215
version "0.6.2"

0 commit comments

Comments
 (0)