diff --git a/demos/demo-modules/demo-utils/calendar-header.component.ts b/demos/demo-modules/demo-utils/calendar-header.component.ts
index 7fbb61a46..a73b05a89 100644
--- a/demos/demo-modules/demo-utils/calendar-header.component.ts
+++ b/demos/demo-modules/demo-utils/calendar-header.component.ts
@@ -1,12 +1,4 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import {
-  subDays,
-  addDays,
-  addWeeks,
-  subWeeks,
-  addMonths,
-  subMonths
-} from 'date-fns';
 
 @Component({
   selector: 'mwl-calendar-header',
@@ -14,13 +6,24 @@ import {
     <div class="row text-center">
       <div class="col-md-4">
         <div class="btn-group">
-          <div class="btn btn-primary" (click)="decrement()">
+          <div
+            class="btn btn-primary"
+            mwlCalendarPreviousView
+            [view]="view"
+            [(viewDate)]="viewDate">
             Previous
           </div>
-          <div class="btn btn-secondary" (click)="today()">
+          <div
+            class="btn btn-secondary"
+            mwlCalendarToday
+            [(viewDate)]="viewDate">
             Today
           </div>
-          <div class="btn btn-primary" (click)="increment()">
+          <div
+            class="btn btn-primary"
+            mwlCalendarNextView
+            [view]="view"
+            [(viewDate)]="viewDate">
             Next
           </div>
         </div>
@@ -30,9 +33,24 @@ import {
       </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
+            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>
@@ -51,32 +69,4 @@ export class CalendarHeaderComponent {
 
   @Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
 
-  increment(): void {
-
-    const addFn: any = {
-      day: addDays,
-      week: addWeeks,
-      month: addMonths
-    }[this.view];
-
-    this.viewDateChange.emit(addFn(this.viewDate, 1));
-
-  }
-
-  decrement(): void {
-
-    const subFn: any = {
-      day: subDays,
-      week: subWeeks,
-      month: subMonths
-    }[this.view];
-
-    this.viewDateChange.emit(subFn(this.viewDate, 1));
-
-  }
-
-  today(): void {
-    this.viewDateChange.emit(new Date());
-  }
-
 }
\ No newline at end of file
diff --git a/demos/demo-modules/kitchen-sink/component.ts b/demos/demo-modules/kitchen-sink/component.ts
index 3fba76757..8e34d06a6 100644
--- a/demos/demo-modules/kitchen-sink/component.ts
+++ b/demos/demo-modules/kitchen-sink/component.ts
@@ -7,10 +7,6 @@ import {
   endOfMonth,
   isSameDay,
   isSameMonth,
-  addWeeks,
-  subWeeks,
-  addMonths,
-  subMonths,
   addHours
 } from 'date-fns';
 import { Subject } from 'rxjs/Subject';
@@ -103,34 +99,6 @@ export class DemoComponent {
 
   constructor(private modal: NgbModal) {}
 
-  increment(): void {
-
-    const addFn: any = {
-      day: addDays,
-      week: addWeeks,
-      month: addMonths
-    }[this.view];
-
-    this.viewDate = addFn(this.viewDate, 1);
-
-  }
-
-  decrement(): void {
-
-    const subFn: any = {
-      day: subDays,
-      week: subWeeks,
-      month: subMonths
-    }[this.view];
-
-    this.viewDate = subFn(this.viewDate, 1);
-
-  }
-
-  today(): void {
-    this.viewDate = new Date();
-  }
-
   dayClicked({date, events}: {date: Date, events: CalendarEvent[]}): void {
 
     if (isSameMonth(date, this.viewDate)) {
diff --git a/demos/demo-modules/kitchen-sink/template.html b/demos/demo-modules/kitchen-sink/template.html
index 032c33ec6..b38b980c2 100644
--- a/demos/demo-modules/kitchen-sink/template.html
+++ b/demos/demo-modules/kitchen-sink/template.html
@@ -25,13 +25,24 @@ <h5 class="modal-title">Event action occurred</h5>
 <div class="row text-center">
   <div class="col-md-4">
     <div class="btn-group">
-      <div class="btn btn-primary" (click)="decrement()">
+      <div
+        class="btn btn-primary"
+        mwlCalendarPreviousView
+        [view]="view"
+        [(viewDate)]="viewDate">
         Previous
       </div>
-      <div class="btn btn-secondary" (click)="today()">
+      <div
+        class="btn btn-secondary"
+        mwlCalendarToday
+        [(viewDate)]="viewDate">
         Today
       </div>
-      <div class="btn btn-primary" (click)="increment()">
+      <div
+        class="btn btn-primary"
+        mwlCalendarNextView
+        [view]="view"
+        [(viewDate)]="viewDate">
         Next
       </div>
     </div>
@@ -41,9 +52,24 @@ <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
   </div>
   <div class="col-md-4">
     <div class="btn-group">
-      <div class="btn btn-primary" (click)="view = 'month'" [class.active]="view === 'month'">Month</div>
-      <div class="btn btn-primary" (click)="view = 'week'" [class.active]="view === 'week'">Week</div>
-      <div class="btn btn-primary" (click)="view = 'day'" [class.active]="view === 'day'">Day</div>
+      <div
+        class="btn btn-primary"
+        (click)="view = 'month'"
+        [class.active]="view === 'month'">
+        Month
+      </div>
+      <div
+        class="btn btn-primary"
+        (click)="view = 'week'"
+        [class.active]="view === 'week'">
+        Week
+      </div>
+      <div
+        class="btn btn-primary"
+        (click)="view = 'day'"
+        [class.active]="view === 'day'">
+        Day
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/calendar.module.ts b/src/calendar.module.ts
index d3bfb24bb..89473f529 100644
--- a/src/calendar.module.ts
+++ b/src/calendar.module.ts
@@ -15,6 +15,9 @@ import { CalendarAllDayEventComponent } from './components/day/calendarAllDayEve
 import { CalendarDayViewHourSegmentComponent } from './components/day/calendarDayViewHourSegment.component';
 import { CalendarDayViewEventComponent } from './components/day/calendarDayViewEvent.component';
 import { CalendarTooltipWindowComponent, CalendarTooltipDirective } from './directives/calendarTooltip.directive';
+import { CalendarPreviousViewDirective } from './directives/calendarPreviousView.directive';
+import { CalendarNextViewDirective } from './directives/calendarNextView.directive';
+import { CalendarTodayDirective } from './directives/calendarToday.directive';
 import { CalendarDatePipe } from './pipes/calendarDate.pipe';
 import { CalendarEventTitlePipe } from './pipes/calendarEventTitle.pipe';
 import { CalendarEventTitleFormatter } from './providers/calendarEventTitle.provider';
@@ -51,6 +54,9 @@ import { CalendarDateFormatter } from './providers/calendarDateFormatter.provide
     CalendarDayViewEventComponent,
     CalendarTooltipWindowComponent,
     CalendarTooltipDirective,
+    CalendarPreviousViewDirective,
+    CalendarNextViewDirective,
+    CalendarTodayDirective,
     CalendarDatePipe,
     CalendarEventTitlePipe
   ],
@@ -63,9 +69,14 @@ import { CalendarDateFormatter } from './providers/calendarDateFormatter.provide
     CalendarDayViewComponent,
     CalendarWeekViewComponent,
     CalendarMonthViewComponent,
-    CalendarDatePipe
+    CalendarDatePipe,
+    CalendarPreviousViewDirective,
+    CalendarNextViewDirective,
+    CalendarTodayDirective
   ],
-  entryComponents: [CalendarTooltipWindowComponent]
+  entryComponents: [
+    CalendarTooltipWindowComponent
+  ]
 })
 export class CalendarModule {
 
diff --git a/src/directives/calendarNextView.directive.ts b/src/directives/calendarNextView.directive.ts
new file mode 100644
index 000000000..4e02176ad
--- /dev/null
+++ b/src/directives/calendarNextView.directive.ts
@@ -0,0 +1,54 @@
+import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';
+import addDays from 'date-fns/add_days';
+import addWeeks from 'date-fns/add_weeks';
+import addMonths from 'date-fns/add_months';
+
+/**
+ * Change the view date to the next view. For example:
+ *
+ * ```
+ * &lt;button
+ *  mwlCalendarNextView
+ *  [(viewDate)]="viewDate"
+ *  [view]="view"&gt;
+ *  Next
+ * &lt;/button&gt;
+ * ```
+ */
+@Directive({
+  selector: '[mwlCalendarNextView]'
+})
+export class CalendarNextViewDirective {
+
+  /**
+   * The current view
+   */
+  @Input() view: string;
+
+  /**
+   * The current view date
+   */
+  @Input() viewDate: Date;
+
+  /**
+   * Called when the view date is changed
+   */
+  @Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
+
+  /**
+   * @hidden
+   */
+  @HostListener('click')
+  onClick(): void {
+
+    const addFn: any = {
+      day: addDays,
+      week: addWeeks,
+      month: addMonths
+    }[this.view];
+
+    this.viewDateChange.emit(addFn(this.viewDate, 1));
+
+  }
+
+}
\ No newline at end of file
diff --git a/src/directives/calendarPreviousView.directive.ts b/src/directives/calendarPreviousView.directive.ts
new file mode 100644
index 000000000..2737ea80a
--- /dev/null
+++ b/src/directives/calendarPreviousView.directive.ts
@@ -0,0 +1,54 @@
+import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';
+import subDays from 'date-fns/sub_days';
+import subWeeks from 'date-fns/sub_weeks';
+import subMonths from 'date-fns/sub_months';
+
+/**
+ * Change the view date to the previous view. For example:
+ *
+ * ```
+ * &lt;button
+ *  mwlCalendarPreviousView
+ *  [(viewDate)]="viewDate"
+ *  [view]="view"&gt;
+ *  Previous
+ * &lt;/button&gt;
+ * ```
+ */
+@Directive({
+  selector: '[mwlCalendarPreviousView]'
+})
+export class CalendarPreviousViewDirective {
+
+  /**
+   * The current view
+   */
+  @Input() view: string;
+
+  /**
+   * The current view date
+   */
+  @Input() viewDate: Date;
+
+  /**
+   * Called when the view date is changed
+   */
+  @Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
+
+  /**
+   * @hidden
+   */
+  @HostListener('click')
+  onClick(): void {
+
+    const subFn: any = {
+      day: subDays,
+      week: subWeeks,
+      month: subMonths
+    }[this.view];
+
+    this.viewDateChange.emit(subFn(this.viewDate, 1));
+
+  }
+
+}
\ No newline at end of file
diff --git a/src/directives/calendarToday.directive.ts b/src/directives/calendarToday.directive.ts
new file mode 100644
index 000000000..9d5ee6e6b
--- /dev/null
+++ b/src/directives/calendarToday.directive.ts
@@ -0,0 +1,38 @@
+import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';
+import startOfToday from 'date-fns/start_of_today';
+
+/**
+ * Change the view date to the current day. For example:
+ *
+ * ```
+ * &lt;button
+ *  mwlCalendarToday
+ *  [(viewDate)]="viewDate"&gt;
+ *  Today
+ * &lt;/button&gt;
+ * ```
+ */
+@Directive({
+  selector: '[mwlCalendarToday]'
+})
+export class CalendarTodayDirective {
+
+  /**
+   * The current view date
+   */
+  @Input() viewDate: Date;
+
+  /**
+   * Called when the view date is changed
+   */
+  @Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
+
+  /**
+   * @hidden
+   */
+  @HostListener('click')
+  onClick(): void {
+    this.viewDateChange.emit(startOfToday());
+  }
+
+}
\ No newline at end of file
diff --git a/test/calendarNextView.directive.spec.ts b/test/calendarNextView.directive.spec.ts
new file mode 100644
index 000000000..cb2a73e35
--- /dev/null
+++ b/test/calendarNextView.directive.spec.ts
@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed
+} from '@angular/core/testing';
+import { expect } from 'chai';
+import { CalendarModule } from '../src';
+
+@Component({
+  template: '<button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate">Next</button>'
+})
+class TestComponent {
+  public view: string;
+  public viewDate: Date;
+}
+
+describe('mwlCalendarNextView directive', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({imports: [CalendarModule.forRoot()], declarations: [TestComponent]});
+  });
+
+  it('should increase the view date by 1 month', () => {
+    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(TestComponent);
+    fixture.componentInstance.view = 'month';
+    fixture.componentInstance.viewDate = new Date('2017-01-28');
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.viewDate).to.deep.equal(new Date('2017-02-28'));
+    fixture.destroy();
+  });
+
+  it('should increase the view date by 1 week', () => {
+    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(TestComponent);
+    fixture.componentInstance.view = 'week';
+    fixture.componentInstance.viewDate = new Date('2017-01-28');
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.viewDate).to.deep.equal(new Date('2017-02-04'));
+    fixture.destroy();
+  });
+
+  it('should increase the view date by 1 day', () => {
+    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(TestComponent);
+    fixture.componentInstance.view = 'day';
+    fixture.componentInstance.viewDate = new Date('2017-01-28');
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.viewDate).to.deep.equal(new Date('2017-01-29'));
+    fixture.destroy();
+  });
+
+});
\ No newline at end of file
diff --git a/test/calendarPreviousView.directive.spec.ts b/test/calendarPreviousView.directive.spec.ts
new file mode 100644
index 000000000..beff18642
--- /dev/null
+++ b/test/calendarPreviousView.directive.spec.ts
@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed
+} from '@angular/core/testing';
+import { expect } from 'chai';
+import { CalendarModule } from '../src';
+
+@Component({
+  template: '<button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate">Previous</button>'
+})
+class TestComponent {
+  public view: string;
+  public viewDate: Date;
+}
+
+describe('calendarPreviousView directive', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({imports: [CalendarModule.forRoot()], declarations: [TestComponent]});
+  });
+
+  it('should decrease the view date by 1 month', () => {
+    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(TestComponent);
+    fixture.componentInstance.view = 'month';
+    fixture.componentInstance.viewDate = new Date('2017-02-28');
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.viewDate).to.deep.equal(new Date('2017-01-28'));
+    fixture.destroy();
+  });
+
+  it('should decrease the view date by 1 week', () => {
+    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(TestComponent);
+    fixture.componentInstance.view = 'week';
+    fixture.componentInstance.viewDate = new Date('2017-01-28');
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.viewDate).to.deep.equal(new Date('2017-01-21'));
+    fixture.destroy();
+  });
+
+  it('should decrease the view date by 1 day', () => {
+    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(TestComponent);
+    fixture.componentInstance.view = 'day';
+    fixture.componentInstance.viewDate = new Date('2017-01-28');
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.viewDate).to.deep.equal(new Date('2017-01-27'));
+    fixture.destroy();
+  });
+
+});
\ No newline at end of file
diff --git a/test/calendarToday.directive.spec.ts b/test/calendarToday.directive.spec.ts
new file mode 100644
index 000000000..3985ea1fb
--- /dev/null
+++ b/test/calendarToday.directive.spec.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed
+} from '@angular/core/testing';
+import { expect } from 'chai';
+import startOfToday from 'date-fns/start_of_today';
+import { CalendarModule } from '../src';
+
+@Component({
+  template: '<button mwlCalendarToday [(viewDate)]="viewDate">Next</button>'
+})
+class TestComponent {
+  public viewDate: Date;
+}
+
+describe('mwlCalendarNextView directive', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({imports: [CalendarModule.forRoot()], declarations: [TestComponent]});
+  });
+
+  it('should set the view date to the start of today', () => {
+    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(TestComponent);
+    fixture.componentInstance.viewDate = new Date('2017-01-28');
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.viewDate).to.deep.equal(startOfToday());
+    fixture.destroy();
+  });
+
+});
\ No newline at end of file
diff --git a/tsconfig-compodoc.json b/tsconfig-compodoc.json
index e29fac099..acad5a787 100644
--- a/tsconfig-compodoc.json
+++ b/tsconfig-compodoc.json
@@ -17,6 +17,9 @@
     "src/providers/calendarDateFormatter.provider.ts",
     "src/providers/calendarEventTitle.provider.ts",
     "src/providers/calendarMomentDateFormatter.provider.ts",
-    "src/providers/calendarNativeDateFormatter.provider.ts"
+    "src/providers/calendarNativeDateFormatter.provider.ts",
+    "src/directives/calendarNextView.directive.ts",
+    "src/directives/calendarPreviousView.directive.ts",
+    "src/directives/calendarToday.directive.ts"
   ]
 }
\ No newline at end of file