<!DOCTYPE html>
<html>
<head>
<title>Custom templates</title>
<link href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/angular-calendar@0.18.2/dist/css/angular-calendar.css" rel="stylesheet">
<script src="https://unpkg.com/zone.js@0.8.12"></script>
<script src="https://unpkg.com/zone.js@0.8.12/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.10"></script>
<script src="https://unpkg.com/systemjs@0.19/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body>
<mwl-demo-component>Loading...</mwl-demo-component>
</body>
</html>
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './',
'@angular/core': 'npm:@angular/core@4.2.4/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@4.2.4/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@4.2.4/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@4.2.4/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.2.4/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http@4.2.4/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router@4.2.4/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@4.2.4/bundles/forms.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser@4.2.4/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations@4.2.4/bundles/animations-browser.umd.js',
'@angular/animations': 'npm:@angular/animations@4.2.4/bundles/animations.umd.js',
'angular-calendar': 'npm:angular-calendar@0.18.2/dist/umd/angular-calendar.js',
'calendar-utils': 'npm:calendar-utils@0.0.56/dist/umd/calendar-utils.js',
'angular-resizable-element': 'npm:angular-resizable-element@1.2.0/dist/umd/angular-resizable-element.js',
'angular-draggable-droppable': 'npm:angular-draggable-droppable@1.0.1/dist/umd/angular-draggable-droppable.js',
'date-fns': 'npm:date-fns@1.28.5',
'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@1.0.0-alpha.26',
'ngx-contextmenu': 'npm:ngx-contextmenu@1.2.1',
'rxjs': 'npm:rxjs@5.4.1',
'rrule': 'npm:rrule@2.2.0',
'typescript': 'npm:typescript@2.2.2/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './bootstrap.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'date-fns': {
main: './index.js',
defaultExtension: 'js'
},
'ngx-contextmenu': {
main: './lib/index.js',
defaultExtension: 'js'
}
}
});
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'mwl-demo-utils-calendar-header',
template: `
<div class="row text-center">
<div class="col-md-4">
<div class="btn-group">
<div
class="btn btn-primary"
mwlCalendarPreviousView
[view]="view"
[(viewDate)]="viewDate"
(viewDateChange)="viewDateChange.next(viewDate)">
Previous
</div>
<div
class="btn btn-secondary"
mwlCalendarToday
[(viewDate)]="viewDate"
(viewDateChange)="viewDateChange.next(viewDate)">
Today
</div>
<div
class="btn btn-primary"
mwlCalendarNextView
[view]="view"
[(viewDate)]="viewDate"
(viewDateChange)="viewDateChange.next(viewDate)">
Next
</div>
</div>
</div>
<div class="col-md-4">
<h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):locale }}</h3>
</div>
<div class="col-md-4">
<div class="btn-group">
<div
class="btn btn-primary"
(click)="viewChange.emit('month')"
[class.active]="view === 'month'">
Month
</div>
<div
class="btn btn-primary"
(click)="viewChange.emit('week')"
[class.active]="view === 'week'">
Week
</div>
<div
class="btn btn-primary"
(click)="viewChange.emit('day')"
[class.active]="view === 'day'">
Day
</div>
</div>
</div>
</div>
<br>
`
})
export class CalendarHeaderComponent {
@Input() view: string;
@Input() viewDate: Date;
@Input() locale: string = 'en';
@Output() viewChange: EventEmitter<string> = new EventEmitter();
@Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
}
import {
Component,
Input,
Output,
EventEmitter,
SimpleChanges,
OnChanges
} from '@angular/core';
import {
getSeconds,
getMinutes,
getHours,
getDate,
getMonth,
getYear,
setSeconds,
setMinutes,
setHours,
setDate,
setMonth,
setYear
} from 'date-fns';
import {
NgbDateStruct,
NgbTimeStruct
} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'mwl-demo-utils-date-time-picker',
template: `
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input
readonly
class="form-control"
[placeholder]="placeholder"
name="date"
[(ngModel)]="dateStruct"
(ngModelChange)="updateDate()"
ngbDatepicker
#datePicker="ngbDatepicker">
<div class="input-group-addon" (click)="datePicker.toggle()" >
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</form>
<ngb-timepicker [(ngModel)]="timeStruct" (ngModelChange)="updateTime()" [meridian]="true"></ngb-timepicker>
`,
styles: [`
.form-group {
width: 100%;
}
`]
})
export class DateTimePickerComponent implements OnChanges {
@Input() placeholder: string;
@Input() date: Date;
@Output() dateChange: EventEmitter<Date> = new EventEmitter();
dateStruct: NgbDateStruct;
timeStruct: NgbTimeStruct;
ngOnChanges(changes: SimpleChanges): void {
if (changes['date']) {
this.dateStruct = {
day: getDate(this.date),
month: getMonth(this.date) + 1,
year: getYear(this.date)
};
this.timeStruct = {
second: getSeconds(this.date),
minute: getMinutes(this.date),
hour: getHours(this.date)
};
}
}
updateDate(): void {
const newDate: Date = setYear(setMonth(setDate(this.date, this.dateStruct.day), this.dateStruct.month - 1), this.dateStruct.year);
this.dateChange.next(newDate);
}
updateTime(): void {
const newDate: Date = setHours(setMinutes(setSeconds(this.date, this.timeStruct.second), this.timeStruct.minute), this.timeStruct.hour);
this.dateChange.next(newDate);
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgbDatepickerModule, NgbTimepickerModule } from '@ng-bootstrap/ng-bootstrap';
import { CalendarModule } from 'angular-calendar';
import { CalendarHeaderComponent } from './calendar-header.component';
import { DateTimePickerComponent } from './date-time-picker.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
NgbDatepickerModule.forRoot(),
NgbTimepickerModule.forRoot(),
CalendarModule
],
declarations: [
CalendarHeaderComponent,
DateTimePickerComponent
],
exports: [
CalendarHeaderComponent,
DateTimePickerComponent
]
})
export class DemoUtilsModule {}
export const colors: any = {
red: {
primary: '#ad2121',
secondary: '#FAE3E3'
},
blue: {
primary: '#1e90ff',
secondary: '#D1E8FF'
},
yellow: {
primary: '#e3bc08',
secondary: '#FDF1BA'
}
};
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CalendarEvent } from 'angular-calendar';
@Component({
moduleId: __moduleName,
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: 'template.html'
})
export class DemoComponent {
view: string = 'month';
viewDate: Date = new Date();
events: CalendarEvent[] = [{
title: 'Event 1',
start: new Date()
}, {
title: 'Event 2',
start: new Date()
}];
}
<ng-template #customCellTemplate
let-day="day"
let-tooltipTemplate="tooltipTemplate">
<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"
(mwlClick)="onEventClick($event, event)"
style="font-size: 0.8em; position:relative; width: 100%; border: solid 1px gray; margin: 2px; padding: 2px; background:bisque;">
{{event.title}}
</div>
</div>
</ng-template>
<ng-template #cellTooltipTemplate
let-event="event">
<div class="cal-tooltip cal-tooltip-top">
<div class="cal-tooltip-arrow"></div>
<div class="cal-tooltip-inner">
{{event.title}}<br />
{{event.start}}
</div>
</div>
</ng-template>
<div>
<mwl-calendar-month-view
[viewDate]="viewDate"
[events]="events"
[cellTemplate]="customCellTemplate"
[tooltipTemplate]="cellTooltipTemplate">
</mwl-calendar-month-view>
</div>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CalendarModule } from 'angular-calendar';
import { DemoUtilsModule } from '../demo-utils/module';
import { DemoComponent } from './component';
@NgModule({
imports: [
CommonModule,
CalendarModule.forRoot(),
DemoUtilsModule
],
declarations: [
DemoComponent
],
exports: [
DemoComponent
]
})
export class DemoModule {}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { DemoModule } from './demo/module';
import { DemoComponent } from './demo/component';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DemoModule
],
bootstrap: [DemoComponent]
})
export class BootstrapModule {}
platformBrowserDynamic().bootstrapModule(BootstrapModule);