feat(bigcalendar): Adding a full calendar component

config/webpack.common.js

@@ -7,6 +7,8 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
+const FixDefaultImportPlugin = require('webpack-fix-default-import-plugin');
+
 const {
     ForkCheckerPlugin
 } = require('awesome-typescript-loader');
@@ -72,6 +74,7 @@ module.exports = function (options) {
             }, {
                 from: 'demo/favicon.ico'
             }]),
+            new FixDefaultImportPlugin(),
             new HtmlWebpackPlugin({
                 template: 'demo/index.html',
                 chunksSortMode: 'dependency',

demo/pages/elements/calendar/CalendarDemo.scss

@@ -59,3 +59,25 @@ calendar-demo {
         }
     }
 }
+
+.availability {
+    .calendar-cell.calendar-day-accepted {
+        background: $success !important;
+        i, .calendar-day-number {
+            color: $white;
+        }
+    }
+
+    .calendar-cell.calendar-day-rejected {
+        background: $negative !important;
+        i, .calendar-day-number {
+            color: $white !important;
+        }
+    }
+}
+
+.calendar-day-available,
+.calendar-day-not-available {
+    text-align: center;
+}
+

demo/pages/elements/calendar/CalendarDemo.ts

@@ -1,6 +1,8 @@
 // NG2
 import { Component } from '@angular/core';
+import { CalendarEvent, CalendarEventResponse } from './../../../../index';
 // APP
+let BigCalendarDemoTpl = require('./templates/BigCalendarDemo.html');
 let CalendarDemoTpl = require('./templates/CalendarDemo.html');
 let TimeDemoTpl = require('./templates/TimeDemo.html');
 let RangeDemoTpl = require('./templates/RangeDemo.html');
@@ -14,6 +16,10 @@ const template = `
     <h2>Calendar Picker  <small><a target="_blank" href="https://github.com/bullhorn/novo-elements/blob/master/src/elements/date-picker">(source)</a></small></h2>
     <p>The calendar picker is used to select a date. It appears in all date picker fields.</p>
 
+    <h5>Big Calendar Picker</h5>
+    <div class="example demo">${BigCalendarDemoTpl}</div>
+    <code-snippet [code]="BigCalendarDemoTpl"></code-snippet>
+
     <h5>Full Calendar Picker</h5>
     <div class="example demo">${CalendarDemoTpl}</div>
     <code-snippet [code]="CalendarDemoTpl"></code-snippet>
@@ -35,11 +41,31 @@ const template = `
 </div>
 `;
 
+export const colors: any = {
+  red: {
+    primary: '#ad2121',
+    secondary: '#FAE3E3'
+  },
+  blue: {
+    primary: '#1e90ff',
+    secondary: '#D1E8FF'
+  },
+  yellow: {
+    primary: '#e3bc08',
+    secondary: '#FDF1BA'
+  },
+  green: {
+    primary: '#8CC152',
+    secondary: '#37BC9B'
+  }
+};
+
 @Component({
     selector: 'calendar-demo',
     template: template
 })
 export class CalendarDemoComponent {
+    BigCalendarDemoTpl: string = BigCalendarDemoTpl;
     CalendarDemoTpl: string = CalendarDemoTpl;
     TimeDemoTpl: string = TimeDemoTpl;
     RangeDemoTpl: string = RangeDemoTpl;
@@ -55,4 +81,56 @@ export class CalendarDemoComponent {
         startDate: null,
         endDate: null
     };
+
+    viewDate: Date = new Date();
+    events: CalendarEvent[] = [{
+        title: 'Has custom class',
+        color: colors.red,
+        start: new Date(),
+        response: CalendarEventResponse.Rejected
+    }];
+
+    getNewEvent(date, color, type):CalendarEvent {
+        let evt:CalendarEvent = {
+            title: 'Has custom class',
+            color: color,
+            start: date,
+            response: type
+        };
+        return evt;
+    }
+
+    dayClicked(event) {
+        let evt:CalendarEvent = this.getNewEvent( event.day.date, colors.blue, CalendarEventResponse.Maybe );
+        this.events.push(evt);
+    }
+
+    addShift(event) {
+        let evt:CalendarEvent = this.getNewEvent( event.day.date, colors.blue, CalendarEventResponse.Maybe);
+        this.events.push(evt);
+    }
+
+    removeShift(event) {
+        this.events.splice(event.day.events.indexOf(event.event), 1);
+    }
+
+    toggleAvailable(event) {
+        let evt:CalendarEvent;
+        if (!event.day.events.length) {
+            evt = this.getNewEvent( event.day.date, colors.green, CalendarEventResponse.Accepted);
+            this.events.push(evt);
+        } else {
+            evt = event.day.events[0];
+            switch (evt.response) {
+                case CalendarEventResponse.Accepted:
+                    evt.response = CalendarEventResponse.Rejected;
+                    break;
+                case CalendarEventResponse.Rejected:
+                    event.day.events = [];
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
 }

demo/pages/elements/calendar/templates/BigCalendarDemo.html

@@ -0,0 +1,49 @@
+ <template #jobTemplate let-day="day" let-locale="locale" let-accepted="accepted" let-maybes="maybes" let-eventClicked="eventClicked">
+    <div class="calendar-day-top">
+        <span class="calendar-day-badge" *ngIf="accepted.length">{{ accepted.length }}</span>
+        <span class="calendar-day-number">{{ day.date | dayofmonth:locale }}</span>
+    </div>
+    <div class="calendar-events">
+        <div
+          class="calendar-event"
+          *ngFor="let event of maybes"
+          [style.backgroundColor]="event.color.primary"
+          [ngClass]="event?.cssClass"
+          (click)="$event.stopPropagation(); eventClicked.emit({event:event})">
+        </div>
+    </div>
+</template>
+
+ <template #availTemplate let-day="day" let-locale="locale" let-accepted="accepted" let-rejected="rejected">
+  <div class="calendar-day-top">
+    <span class="calendar-day-number">{{ day.date | dayofmonth:locale }}</span>
+  </div>
+  <div class="calendar-day-available" *ngIf="accepted.length">
+    <i class="bhi-check"></i>
+  </div>
+  <div class="calendar-day-not-available" *ngIf="rejected.length">
+    <i class="bhi-times"></i>
+  </div>
+</template>
+
+<novo-calendar-month
+  [viewDate]="viewDate"
+  [events]="events"
+  (dayClicked)="dayClicked($event)">
+</novo-calendar-month>
+
+<novo-calendar-month
+  class="availability"
+  [viewDate]="viewDate"
+  [events]="events"
+  [cellTemplate]="availTemplate"
+  (dayClicked)="toggleAvailable($event)">
+</novo-calendar-month>
+
+<novo-calendar-month
+  [viewDate]="viewDate"
+  [events]="events"
+  [cellTemplate]="jobTemplate"
+  (dayClicked)="addShift($event)"
+  (eventClicked)="removeShift($event)">
+</novo-calendar-month>

index.ts

@@ -3,6 +3,7 @@ export { NovoPipesModule } from './src/pipes/Pipes.module';
 export { NovoButtonModule } from './src/elements/button/Button.module';
 export { NovoLoadingModule } from './src/elements/loading/Loading.module';
 export { NovoCardModule } from './src/elements/card/Card.module';
+export { NovoCalendarModule } from './src/elements/calendar/Calendar.module';
 export { NovoToastModule } from './src/elements/toast/Toast.module';
 export { NovoTooltipModule } from './src/elements/tooltip/Tooltip.module';
 export { NovoHeaderModule } from './src/elements/header/Header.module';
@@ -62,6 +63,7 @@ export { Deferred } from './src/utils/deferred/Deferred';
 export { COUNTRIES, getCountries, getStateObjects, getStates, findByCountryCode, findByCountryId, findByCountryName } from './src/utils/countries/Countries';
 export { Helpers } from './src/utils/Helpers';
 export { ComponentUtils } from './src/utils/component-utils/ComponentUtils';
+export * from './src/utils/calendar-utils/CalendarUtils';
 // Providers
 export { NovoElementProviders } from './novo-elements.providers';
 // Pipes

novo-elements.module.ts

@@ -6,6 +6,7 @@ import { NovoPipesModule } from './src/pipes/Pipes.module';
 import { NovoButtonModule } from './src/elements/button/Button.module';
 import { NovoLoadingModule } from './src/elements/loading/Loading.module';
 import { NovoCardModule } from './src/elements/card/Card.module';
+import { NovoCalendarModule } from './src/elements/calendar/Calendar.module';
 import { NovoToastModule } from './src/elements/toast/Toast.module';
 import { NovoTooltipModule } from './src/elements/tooltip/Tooltip.module';
 import { NovoHeaderModule } from './src/elements/header/Header.module';
@@ -50,6 +51,7 @@ import { FormUtils } from './src/utils/form-utils/FormUtils';
         NovoButtonModule,
         NovoLoadingModule,
         NovoCardModule,
+        NovoCalendarModule,
         NovoToastModule,
         NovoTooltipModule,
         NovoHeaderModule,

novo-elements.scss

@@ -21,6 +21,7 @@
 @import "./src/elements/toast/Toast";
 @import "./src/elements/modal/Modal";
 @import "./src/elements/card/Card";
+@import "./src/elements/calendar/CalendarMonth";
 @import "./src/elements/loading/Loading";
 @import "./src/elements/loading/NovoSpinner";
 @import "./src/elements/select/Select";

package.json

@@ -57,6 +57,7 @@
   "dependencies": {
     "@types/ckeditor": "0.0.34",
     "@types/dragula": "2.1.29",
+    "date-fns": "^1.28.2",
     "dragula": "3.7.2",
     "hint.css": "2.4.1"
   },
@@ -145,6 +146,7 @@
     "webpack-dev-server": "2.1.0-beta.9",
     "webpack-md5-hash": "0.0.5",
     "webpack-merge": "0.18.0",
+    "webpack-fix-default-import-plugin": "^1.0.1",
     "zone.js": "0.7.1"
   },
   "engines": {

src/elements/calendar/Calendar.module.ts

@@ -0,0 +1,20 @@
+// NG2
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// APP
+import { NovoButtonModule } from '../button/Button.module';
+import { CalendarMonthElement } from './CalendarMonth';
+import { CalendarMonthHeaderElement } from './CalendarMonthHeader';
+import { CalendarMonthDayElement } from './CalendarMonthDay';
+import { WeekdayPipe } from './Weekday.pipe';
+import { MonthPipe } from './Month.pipe';
+import { YearPipe } from './Year.pipe';
+import { DayOfMonthPipe } from './DayOfMonth.pipe';
+
+@NgModule({
+    imports: [CommonModule, NovoButtonModule],
+    declarations: [CalendarMonthElement, CalendarMonthHeaderElement, CalendarMonthDayElement, WeekdayPipe, DayOfMonthPipe, MonthPipe, YearPipe],
+    exports: [CalendarMonthElement, CalendarMonthHeaderElement, CalendarMonthDayElement, WeekdayPipe, DayOfMonthPipe, MonthPipe, YearPipe]
+})
+export class NovoCalendarModule {
+}