(Calendar App) Started to build, run npm install..

package-lock.json

@@ -562,11 +562,33 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular-calendar": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.19.0.tgz",
+      "integrity": "sha512-RbLciS+OBl9ITgPKVUOjMUXe7sTP5KHPZtCB7Rru3ebUXh8WehdZvELC3Wxz0euS8hqBP2o3ueSqXcAy1pz2bw==",
+      "requires": {
+        "angular-draggable-droppable": "1.0.1",
+        "angular-resizable-element": "1.2.0",
+        "calendar-utils": "0.0.56",
+        "date-fns": "1.28.5",
+        "positioning": "1.3.0"
+      }
+    },
+    "angular-draggable-droppable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-1.0.1.tgz",
+      "integrity": "sha1-etcMMQmUsPmA9A04Lc5ZlG/jDc8="
+    },
     "angular-in-memory-web-api": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.3.2.tgz",
       "integrity": "sha1-iDbZ4lNNN7co88taHK9v4ef7vs0="
     },
+    "angular-resizable-element": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-1.2.0.tgz",
+      "integrity": "sha512-i5xCl4n2VMgGK4gY6Jtho0K5aazbsqNw1bmPYpI9RwlKK+dIOcsMRuMl1JPWzrznHsm4qEsfYg+9KLkYsYy+/g=="
+    },
     "ansi-escapes": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-2.0.0.tgz",
@@ -1217,6 +1239,11 @@
       "integrity": "sha1-TJQj6i0lLCcMQbK97+/5u2tiwGo=",
       "dev": true
     },
+    "calendar-utils": {
+      "version": "0.0.56",
+      "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.0.56.tgz",
+      "integrity": "sha512-IvvzvIGmtDdVjSrnIOd5dDJ3ATWLztqdgLOTeIB2IJonN60LMa2R71KDVpdF8w9sKm3drRV4kfgIbocYJAw6+Q=="
+    },
     "callsite": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
@@ -1950,6 +1977,11 @@
         }
       }
     },
+    "date-fns": {
+      "version": "1.28.5",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.28.5.tgz",
+      "integrity": "sha1-JXz8RdMi30XvVlhmWWfuhBzXP68="
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
@@ -6462,6 +6494,11 @@
         }
       }
     },
+    "positioning": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/positioning/-/positioning-1.3.0.tgz",
+      "integrity": "sha512-B0BHlhLFsLPV8EWVv792caQCg4QNxuCeZUVXw/DP1jRj4WOF74KmTAg+7t3dDfrFXDT22qBS2vcryQmZYSM7jg=="
+    },
     "postcss": {
       "version": "5.2.17",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",

package.json

@@ -24,6 +24,7 @@
     "@angular/platform-browser": "^4.3.0",
     "@angular/platform-browser-dynamic": "^4.3.0",
     "@angular/router": "^4.3.0",
+    "angular-calendar": "^0.19.0",
     "angular-in-memory-web-api": "^0.3.2",
     "core-js": "^2.4.1",
     "firebase": "^4.1.3",

src/app/app.module.ts

@@ -35,6 +35,10 @@ const appRoutes: Routes = [
         path        : 'apps/chat',
         loadChildren: './main/apps/chat/chat.module#ChatModule'
     },
+    {
+        path        : 'apps/calendar',
+        loadChildren: './main/apps/calendar/calendar.module#FuseCalendarModule'
+    },
     {
         path      : '**',
         redirectTo: 'apps/dashboards/project'
@@ -60,8 +64,6 @@ const appRoutes: Routes = [
 
         FuseLayoutModule,
 
-        // MailModule,
-        ChatModule,
         ProjectModule,
 
         UIPageLayoutsModule

src/app/core/modules/shared.module.ts

@@ -11,6 +11,7 @@ import {
     FuseMdSidenavTogglerDirective
 } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
 import { FusePipesModule } from '../pipes/pipes.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
     declarations: [

src/app/main/apps/calendar/calendar.component.html

@@ -0,0 +1,117 @@
+<div id="calendar" class="page-layout simple fullwidth" fxLayout="column">
+
+    <!-- HEADER -->
+    <div class="header" [ngClass]="viewDate | date:'MMM'">
+
+        <div class="header-content" fxLayout="column" fxLayoutAlign="space-between">
+
+            <div class="header-top" fxLayout="row" fxLayoutAlign="space-between center" fxLayout.xs="column">
+
+                <div class="logo" fxLayout="row" fxLayoutAlign="start center">
+
+                    <md-icon class="logo-icon">today</md-icon>
+
+                    <span class="logo-text">Calendar</span>
+
+                </div>
+
+                <!-- TOOLBAR -->
+                <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
+
+                    <button md-button class="mat-icon-button" aria-label="Search" md-tooltip="search">
+                        <md-icon>search</md-icon>
+                    </button>
+
+                    <button md-button class="mat-icon-button"
+                            mwlCalendarToday
+                            [(viewDate)]="viewDate"
+                            aria-label="Today" md-tooltip="today">
+                        <md-icon>today</md-icon>
+                    </button>
+
+                    <button md-button class="mat-icon-button" (click)="view='day'"
+                            aria-label="Day" md-tooltip="day">
+                        <md-icon>view_day</md-icon>
+                    </button>
+
+                    <button md-button class="mat-icon-button" (click)="view='week'"
+                            aria-label="Week" md-tooltip="week">
+                        <md-icon>view_week</md-icon>
+                    </button>
+
+                    <button md-button class="mat-icon-button" (click)="view='month'"
+                            aria-label="Month" md-tooltip="month">
+                        <md-icon>view_module</md-icon>
+                    </button>
+                </div>
+            </div>
+            <!-- / TOOLBAR -->
+
+            <!-- HEADER BOTTOM -->
+            <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center">
+
+                <button md-button class="mat-icon-button arrow"
+                        mwlCalendarPreviousView
+                        [view]="view"
+                        [(viewDate)]="viewDate"
+                        aria-label="Previous">
+                    <md-icon>chevron_left</md-icon>
+                </button>
+
+                <div class="title">
+                    <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
+                    <!--{{calendarView.title}}-->
+                </div>
+
+                <button md-button class="mat-icon-button arrow"
+                        mwlCalendarNextView
+                        [view]="view"
+                        [(viewDate)]="viewDate"
+                        aria-label="Next">
+                    <md-icon>chevron_right</md-icon>
+                </button>
+            </div>
+            <!-- / HEADER BOTTOM -->
+        </div>
+
+        <!-- ADD EVENT BUTTON -->
+        <button md-fab class="add-event-button md-warn" (click)="addEvent($event)" aria-label="Add event">
+            <md-icon>add</md-icon>
+        </button>
+        <!-- / ADD EVENT BUTTON -->
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content" perfect-scrollbar>
+        <div [ngSwitch]="view">
+            <mwl-calendar-month-view
+                *ngSwitchCase="'month'"
+                [viewDate]="viewDate"
+                [events]="events"
+                [refresh]="refresh"
+                [activeDayIsOpen]="activeDayIsOpen"
+                (dayClicked)="dayClicked($event.day)"
+                (eventClicked)="handleEvent('Clicked', $event.event)"
+                (eventTimesChanged)="eventTimesChanged($event)">
+            </mwl-calendar-month-view>
+            <mwl-calendar-week-view
+                *ngSwitchCase="'week'"
+                [viewDate]="viewDate"
+                [events]="events"
+                [refresh]="refresh"
+                (eventClicked)="handleEvent('Clicked', $event.event)"
+                (eventTimesChanged)="eventTimesChanged($event)">
+            </mwl-calendar-week-view>
+            <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="events"
+                [refresh]="refresh"
+                (eventClicked)="handleEvent('Clicked', $event.event)"
+                (eventTimesChanged)="eventTimesChanged($event)">
+            </mwl-calendar-day-view>
+        </div>
+    </div>
+    <!-- / CONTENT -->
+</div>

src/app/main/apps/calendar/calendar.component.scss

@@ -0,0 +1,126 @@
+@import "node_modules/angular-calendar/scss/angular-calendar";
+
+#calendar {
+    background: #FFFFFF;
+    height: 100%;
+
+    .header {
+        height: 200px;
+        min-height: 200px;
+        max-height: 200px;
+        padding: 24px;
+        position: relative;
+        background-size: 100% auto;
+        background-position: 0 50%;
+        background-repeat: no-repeat;
+        background-color: #FAFAFA;
+        color: #FFFFFF;
+        padding-bottom: 16px;
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 1;
+            background: rgba(0, 0, 0, 0.45);
+        }
+
+        &.Jan {
+            background-image: url('/assets/images/backgrounds/january.jpg');
+            background-position: 0 45%;
+        }
+        &.Feb {
+            background-image: url('/assets/images/backgrounds/february.jpg');
+            background-position: 0 50%;
+        }
+        &.Mar {
+            background-image: url('/assets/images/backgrounds/march.jpg');
+            background-position: 0 45%;
+        }
+        &.Apr {
+            background-image: url('/assets/images/backgrounds/april.jpg');
+            background-position: 0 48%;
+        }
+        &.May {
+            background-image: url('/assets/images/backgrounds/may.jpg');
+            background-position: 0 47%;
+        }
+        &.Jun {
+            background-image: url('/assets/images/backgrounds/june.jpg');
+            background-position: 0 48%;
+        }
+        &.Jul {
+            background-image: url('/assets/images/backgrounds/july.jpg');
+            background-position: 0 3%;
+        }
+        &.Aug {
+            background-image: url('/assets/images/backgrounds/august.jpg');
+            background-position: 0 61%;
+        }
+        &.Sep {
+            background-image: url('/assets/images/backgrounds/september.jpg');
+            background-position: 0 58%;
+        }
+        &.Oct {
+            background-image: url('/assets/images/backgrounds/october.jpg');
+            background-position: 0 50%;
+        }
+        &.Nov {
+            background-image: url('/assets/images/backgrounds/november.jpg');
+            background-position: 0 46%;
+        }
+        &.Dec {
+            background-image: url('/assets/images/backgrounds/december.jpg');
+            background-position: 0 43%;
+        }
+
+        .header-content {
+            height: 100%;
+
+            .header-top {
+                position: relative;
+                z-index: 2;
+
+                .logo {
+
+                    .logo-icon {
+                        margin-right: 16px;
+                    }
+
+                    .logo-text {
+                        font-size: 24px;
+                    }
+                }
+            }
+
+            .header-bottom {
+                position: relative;
+                z-index: 2;
+
+                .title {
+                    font-size: 20px;
+                    min-width: 160px;
+                    text-align: center;
+                }
+            }
+        }
+
+        .add-event-button {
+            position: absolute;
+            right: 18px;
+            bottom: -32px;
+            z-index: 10;
+        }
+
+        md-icon {
+            color: #FFFFFF;
+        }
+    }
+
+    .content {
+        padding: 24px;
+    }
+}

src/app/main/apps/calendar/calendar.component.ts

@@ -0,0 +1,188 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Inject,
+    OnInit,
+    TemplateRef,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent } from 'angular-calendar';
+import { MD_DIALOG_DATA, MdDialog, MdDialogRef } from '@angular/material';
+import { EventDialogComponent } from './event-dialog/event-dialog.component';
+import {
+    startOfDay,
+    endOfDay,
+    subDays,
+    addDays,
+    endOfMonth,
+    isSameDay,
+    isSameMonth,
+    addHours
+} from 'date-fns';
+
+const colors: any = {
+    red   : {
+        primary  : '#ad2121',
+        secondary: '#FAE3E3'
+    },
+    blue  : {
+        primary  : '#1e90ff',
+        secondary: '#D1E8FF'
+    },
+    yellow: {
+        primary  : '#e3bc08',
+        secondary: '#FDF1BA'
+    }
+};
+
+@Component({
+    selector       : 'fuse-calendar',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl    : './calendar.component.html',
+    styleUrls      : ['./calendar.component.scss'],
+    encapsulation  : ViewEncapsulation.None
+})
+export class CalendarComponent implements OnInit
+{
+    @ViewChild('dialogContent') dialogContent: TemplateRef<any>;
+
+    view: string;
+
+    viewDate: Date;
+
+    events: CalendarEvent[];
+
+    actions: CalendarEventAction[];
+
+    activeDayIsOpen: boolean;
+
+    refresh: Subject<any> = new Subject();
+
+    dialogRef: any;
+
+    constructor(public dialog: MdDialog)
+    {
+        this.view = 'month';
+        this.viewDate = new Date();
+        this.activeDayIsOpen = true;
+
+        this.actions = [
+            {
+                label  : '<i class="material-icons s-16">edit</i>',
+                onClick: ({event}: { event: CalendarEvent }): void => {
+                    this.handleEvent('Edited', event);
+                }
+            },
+            {
+                label  : '<i class="material-icons s-16">close</i>',
+                onClick: ({event}: { event: CalendarEvent }): void => {
+                    this.events = this.events.filter(iEvent => iEvent !== event);
+                    this.handleEvent('Deleted', event);
+                }
+            }
+        ];
+
+        this.events = [
+            {
+                start  : subDays(startOfDay(new Date()), 1),
+                end    : addDays(new Date(), 1),
+                title  : 'A 3 day event',
+                color  : colors.red,
+                actions: this.actions
+            },
+            {
+                start  : startOfDay(new Date()),
+                title  : 'An event with no end date',
+                color  : colors.yellow,
+                actions: this.actions
+            },
+            {
+                start: subDays(endOfMonth(new Date()), 3),
+                end  : addDays(endOfMonth(new Date()), 3),
+                title: 'A long event that spans 2 months',
+                color: colors.blue
+            },
+            {
+                start    : addHours(startOfDay(new Date()), 2),
+                end      : new Date(),
+                title    : 'A draggable and resizable event',
+                color    : colors.yellow,
+                actions  : this.actions,
+                resizable: {
+                    beforeStart: true,
+                    afterEnd   : true
+                },
+                draggable: true
+            }
+        ];
+    }
+
+    ngOnInit()
+    {
+    }
+
+    dayClicked({date, events}: { date: Date; events: CalendarEvent[] }): void
+    {
+        if ( isSameMonth(date, this.viewDate) )
+        {
+            if (
+                (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
+                events.length === 0
+            )
+            {
+                this.activeDayIsOpen = false;
+            }
+            else
+            {
+                this.activeDayIsOpen = true;
+                this.viewDate = date;
+            }
+        }
+    }
+
+    eventTimesChanged({
+                          event,
+                          newStart,
+                          newEnd
+                      }: CalendarEventTimesChangedEvent): void
+    {
+        event.start = newStart;
+        event.end = newEnd;
+        this.handleEvent('Dropped or resized', event);
+        this.refresh.next();
+    }
+
+    handleEvent(action: string, event: CalendarEvent): void
+    {
+        console.log(event, action);
+        this.dialogRef = this.dialog.open(EventDialogComponent, {
+            data: {
+                event : event,
+                action: action
+            }
+        });
+        this.dialogRef.afterClosed().subscribe(result => {
+            console.info(result);
+        });
+    }
+
+    addEvent(): void
+    {
+        this.events.push({
+            title    : 'New event',
+            start    : startOfDay(new Date()),
+            end      : endOfDay(new Date()),
+            color    : colors.red,
+            draggable: true,
+            resizable: {
+                beforeStart: true,
+                afterEnd   : true
+            }
+        });
+        this.refresh.next();
+    }
+}
+
+

src/app/main/apps/calendar/calendar.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../core/modules/shared.module';
+import { RouterModule, Routes } from '@angular/router';
+import { CalendarComponent } from './calendar.component';
+import { CalendarService } from './calendar.service';
+import { CalendarModule } from 'angular-calendar';
+import { EventDialogComponent } from './event-dialog/event-dialog.component';
+
+const routes: Routes = [
+    {
+        path   : '**', component: CalendarComponent, children: [],
+        resolve: {
+            chat: CalendarService
+        }
+    }
+];
+
+@NgModule({
+    imports        : [
+        SharedModule,
+        RouterModule.forChild(routes),
+        CalendarModule.forRoot()
+    ],
+    declarations   : [
+        CalendarComponent,
+        EventDialogComponent,
+    ],
+    providers      : [
+        CalendarService
+    ],
+    entryComponents: [EventDialogComponent]
+})
+export class FuseCalendarModule
+{
+}

src/app/main/apps/calendar/calendar.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { Http } from '@angular/http';
+import { Subject } from 'rxjs/Subject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class CalendarService implements Resolve<any>
+{
+
+    constructor(private http: Http)
+    {
+    }
+
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
+    {
+        return new Promise((resolve, reject) => {
+            resolve();
+        });
+    }
+
+}

src/app/main/apps/calendar/event-dialog/event-dialog.component.html

@@ -0,0 +1,20 @@
+<h1 md-dialog-title>
+    <h5 class="modal-title">Event action occurred</h5>
+    <button type="button" class="close" (click)="dialogRef.close()">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</h1>
+<div md-dialog-content>
+    <div>
+        Action:
+        <pre>{{ data.action }}</pre>
+    </div>
+    <div>
+        Event:
+        <pre>{{ data.event | json }}</pre>
+    </div>
+</div>
+<div md-dialog-actions>
+    <button md-button class="dialog-button" (click)="dialogRef.close('Option 1')">OPTION 1</button>
+    <button md-button class="dialog-button" (click)="dialogRef.close('Option 2')">OPTION 2</button>
+</div>

src/app/main/apps/calendar/event-dialog/event-dialog.component.ts

@@ -0,0 +1,22 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+
+@Component({
+    selector   : 'fuse-calendar-event-dialog',
+    templateUrl: './event-dialog.component.html',
+    styleUrls  : ['./event-dialog.component.scss']
+})
+export class EventDialogComponent implements OnInit
+{
+
+    constructor(private dialogRef: MdDialogRef<EventDialogComponent>,
+                @Inject(MD_DIALOG_DATA) private data: any)
+    {
+        console.log(data);
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

src/app/main/apps/chat/chat.module.ts

@@ -13,7 +13,7 @@ import { ContactSidenavComponent } from './sidenavs/right/contact/contact.compon
 
 const routes: Routes = [
     {
-        path   : 'apps/chat', component: ChatComponent, children: [],
+        path   : '**', component: ChatComponent, children: [],
         resolve: {
             chat: ChatService
         }