Add initial calendar to Dashboard mockup

src/app/dashboard/calendar/calendar.component.ts

@@ -0,0 +1,78 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'tb-calendar',
+    templateUrl: 'app/dashboard/calendar/calendar.template.html'
+})
+export class Calendar {
+    @Input('board-id') boardId: number;
+
+    private dayLabels = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];
+    private monthLabels = [
+        'January', 'February', 'March', 'April',
+        'May', 'June', 'July', 'August',
+        'September', 'October', 'November', 'December'
+    ];
+
+    private month: number;
+    private year: number;
+    private calendarDays;
+
+    constructor() {
+        let today = new Date();
+
+        this.month = today.getMonth();
+        this.year = today.getFullYear();
+
+        this.generateCalendar();
+    }
+
+    public previousMonth(): void {
+        this.month -= 1;
+
+        // Months are zero-index in JS
+        if (this.month < 0) {
+            this.year -= 1;
+            this.month = 11;
+        }
+
+        this.generateCalendar();
+    }
+
+    public nextMonth(): void {
+        this.month += 1;
+
+        if (this.month > 11) {
+            this.year += 1;
+            this.month = 0;
+        }
+
+        this.generateCalendar();
+    }
+
+    private generateCalendar(): void {
+        let firstDate = new Date(this.year, this.month, 1),
+            startingDay = firstDate.getDay(),
+            monthLength = new Date(this.year, this.month + 1, 0).getDate(),
+            rows = Math.ceil((monthLength + startingDay) / 7),
+            day = 1;
+
+        this.calendarDays = [];
+
+        for (let i = 0; i < rows; ++i) {
+            let weekDays = [];
+
+            for (let j = 0; j < 7; ++j) {
+                if (day <= monthLength && (j >= startingDay || i > 0)) {
+                    weekDays.push(day);
+                    day++;
+                } else {
+                    weekDays.push('');
+                }
+            }
+
+            this.calendarDays.push(weekDays);
+        }
+    }
+}
+

src/app/dashboard/calendar/calendar.template.html

@@ -0,0 +1,24 @@
+<h3>Tasks Due by Month</h3>
+
+<table class="calendar">
+    <thead>
+        <tr>
+            <th><i class="icon icon-angle-double-left"
+                (click)="previousMonth()"></i></th>
+            <th colspan="5">{{ monthLabels[month] }} {{ year }}</th>
+            <th><i class="icon icon-angle-double-right"
+                (click)="nextMonth()"></i></th>
+        </tr>
+        <tr class="days">
+            <th *ngFor="let day of dayLabels">{{ day }}</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let week of calendarDays">
+            <td *ngFor="let day of week" class="day">
+                <span class="date">{{ day }}</span>
+            </td>
+        </tr>
+    </tbody>
+</table>
+

src/app/dashboard/charts/charts.component.ts

@@ -36,7 +36,9 @@ export class Charts implements AfterViewInit {
                     percent = Math.round(value /
                         data.series.reduce(Chartist.sum) * 100);
 
-                this.percentages.push(percent);
+                if (this.percentages.length < this.data.length) {
+                    this.percentages.push(percent);
+                }
 
                 return label + ' ' + percent + '%';
             }

src/app/dashboard/dashboard.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 
 import { Charts } from './charts/charts.component';
+import { Calendar } from './calendar/calendar.component';
 
 @Component({
     selector: 'tb-dashboard',
     templateUrl: 'app/dashboard/dashboard.template.html',
-    directives: [ Charts ]
+    directives: [ Charts, Calendar ]
 })
 export class Dashboard {
 }

src/app/dashboard/dashboard.template.html

@@ -110,6 +110,9 @@
                     table-head="Column"></tb-charts>
             </div>
         </div>
+        <div class="row">
+            <tb-calendar board-id="1"></tb-calendar>
+        </div>
     </section>
 
     <section>

src/scss/_core.scss

@@ -4,6 +4,10 @@ html {
     height: 100%;
 }
 
+::selection {
+    color: $color-background;
+}
+
 h1,
 h2,
 h3,

src/scss/_dashboard.scss

@@ -10,5 +10,39 @@
     .half-page {
         @include span-columns(9 of 18);
     }
+
+    .calendar {
+        td {
+            width: calc(100% / 7);
+        }
+
+        th {
+            text-align: center;
+
+            .icon {
+                cursor: pointer;
+            }
+        }
+
+        .days {
+            background-color: $color-table-row;
+        }
+
+        .day {
+            border-left: 1px solid $color-border;
+            height: 8em;
+            position: relative;
+
+            &:last-of-type {
+                border-right: 1px solid $color-border;
+            }
+        }
+
+        .date {
+            left: 5px;
+            position: absolute;
+            top: 2px;
+        }
+    }
 }