diff --git a/src/app/pages/dashboard/calendar/calendar.component.ts b/src/app/pages/dashboard/calendar/calendar.component.ts
index a3e5209a..ac0d9a1f 100644
--- a/src/app/pages/dashboard/calendar/calendar.component.ts
+++ b/src/app/pages/dashboard/calendar/calendar.component.ts
@@ -1,73 +1,44 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import './calendar.loader.ts';
-import {BaThemeConfigProvider} from '../../../theme';
+import {BaFullCalendar} from '../../../theme/components';
+import {CalendarService} from "./calendar.service";
 
 @Component({
   selector: 'calendar',
   encapsulation: ViewEncapsulation.None,
-  styles: [require('fullcalendar/dist/fullcalendar.css'), require('./calendar.scss')],
-  template: require('./calendar.html')
+  styles: [require('./calendar.scss')],
+  template: require('./calendar.html'),
+  directives: [BaFullCalendar],
+  providers: [CalendarService]
 })
 export class Calendar {
 
-  constructor(private _baConfig:BaThemeConfigProvider) {
+  public calendarConfiguration:any;
+  private _calendar:Object;
+
+  constructor(private _calendarService:CalendarService) {
+    this.calendarConfiguration = this._calendarService.getData();
+    this.calendarConfiguration.select = (start, end) => this._onSelect(start, end);
   }
 
-  ngAfterViewInit() {
-    this._initCalendar();
+  public onCalendarReady(calendar):void {
+    this._calendar = calendar;
   }
 
-  _initCalendar() {
-    let dashboardColors = this._baConfig.get().colors.dashboard;
+  private _onSelect(start, end):void {
 
-    let $element = $('#calendar').fullCalendar({
-      header: {
-        left: 'prev,next today',
-        center: 'title',
-        right: 'month,agendaWeek,agendaDay'
-      },
-      defaultDate: '2016-03-08',
-      selectable: true,
-      selectHelper: true,
-      select: function (start, end) {
-        var title = prompt('Event Title:');
-        var eventData;
-        if (title) {
-          eventData = {
-            title: title,
-            start: start,
-            end: end
-          };
-          $element.fullCalendar('renderEvent', eventData, true);
-        }
-        $element.fullCalendar('unselect');
-      },
-      editable: true,
-      eventLimit: true, // allow "more" link when too many events
-      events: [
-        {
-          title: 'All Day Event',
-          start: '2016-03-01',
-          color: dashboardColors.silverTree
-        },
-        {
-          title: 'Long Event',
-          start: '2016-03-07',
-          end: '2016-03-10',
-          color: dashboardColors.blueStone
-        },
-        {
-          title: 'Dinner',
-          start: '2016-03-14T20:00:00',
-          color: dashboardColors.surfieGreen
-        },
-        {
-          title: 'Birthday Party',
-          start: '2016-04-01T07:00:00',
-          color: dashboardColors.gossip
-        }
-      ]
-    });
+    if (this._calendar != null) {
+      var title = prompt('Event Title:');
+      var eventData;
+      if (title) {
+        eventData = {
+          title: title,
+          start: start,
+          end: end
+        };
+        $(this._calendar).fullCalendar('renderEvent', eventData, true);
+      }
+      $(this._calendar).fullCalendar('unselect');
+    }
   }
 }
diff --git a/src/app/pages/dashboard/calendar/calendar.html b/src/app/pages/dashboard/calendar/calendar.html
index 022b29d7..d1410cc5 100644
--- a/src/app/pages/dashboard/calendar/calendar.html
+++ b/src/app/pages/dashboard/calendar/calendar.html
@@ -1 +1 @@
-<div id="calendar" class="blurCalendar"></div>
+<ba-full-calendar [baFullCalendarConfiguration]="calendarConfiguration" baFullCalendarClass="blurCalendar" (onCalendarReady)="onCalendarReady($event)"></ba-full-calendar>
diff --git a/src/app/pages/dashboard/calendar/calendar.loader.ts b/src/app/pages/dashboard/calendar/calendar.loader.ts
deleted file mode 100644
index 031a62b8..00000000
--- a/src/app/pages/dashboard/calendar/calendar.loader.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-require('fullcalendar/dist/fullcalendar.js');
-
diff --git a/src/app/pages/dashboard/calendar/calendar.service.ts b/src/app/pages/dashboard/calendar/calendar.service.ts
new file mode 100644
index 00000000..5fe87ec1
--- /dev/null
+++ b/src/app/pages/dashboard/calendar/calendar.service.ts
@@ -0,0 +1,49 @@
+import {Injectable} from '@angular/core';
+import {BaThemeConfigProvider} from '../../../theme';
+
+@Injectable()
+export class CalendarService {
+
+  constructor(private _baConfig:BaThemeConfigProvider) {
+  }
+
+  getData() {
+
+    let dashboardColors = this._baConfig.get().colors.dashboard;
+    return {
+      header: {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'month,agendaWeek,agendaDay'
+      },
+      defaultDate: '2016-03-08',
+      selectable: true,
+      selectHelper: true,
+      editable: true,
+      eventLimit: true,
+      events: [
+        {
+          title: 'All Day Event',
+          start: '2016-03-01',
+          color: dashboardColors.silverTree
+        },
+        {
+          title: 'Long Event',
+          start: '2016-03-07',
+          end: '2016-03-10',
+          color: dashboardColors.blueStone
+        },
+        {
+          title: 'Dinner',
+          start: '2016-03-14T20:00:00',
+          color: dashboardColors.surfieGreen
+        },
+        {
+          title: 'Birthday Party',
+          start: '2016-04-01T07:00:00',
+          color: dashboardColors.gossip
+        }
+      ]
+    };
+  }
+}
diff --git a/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts b/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
new file mode 100644
index 00000000..119ca30c
--- /dev/null
+++ b/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
@@ -0,0 +1,25 @@
+import {Component, ViewChild, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core';
+
+import './baFullCalendar.loader.ts';
+
+@Component({
+  selector: 'ba-full-calendar',
+  template: require('./baFullCalendar.html'),
+  encapsulation: ViewEncapsulation.None,
+})
+export class BaFullCalendar {
+
+  @Input() baFullCalendarConfiguration:Object;
+  @Input() baFullCalendarClass:string;
+  @Output() onCalendarReady = new EventEmitter<any>();
+
+  @ViewChild('baFullCalendar') private _selector:ElementRef;
+
+  constructor () {
+  }
+
+  ngAfterViewInit() {
+    let calendar = $(this._selector.nativeElement).fullCalendar(this.baFullCalendarConfiguration);
+    this.onCalendarReady.emit(calendar);
+  }
+}
diff --git a/src/app/theme/components/baFullCalendar/baFullCalendar.html b/src/app/theme/components/baFullCalendar/baFullCalendar.html
new file mode 100644
index 00000000..83a2c1ae
--- /dev/null
+++ b/src/app/theme/components/baFullCalendar/baFullCalendar.html
@@ -0,0 +1 @@
+<div #baFullCalendar class="ba-full-calendar {{baFullCalendarClass || ''}}"></div>
diff --git a/src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts b/src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts
new file mode 100644
index 00000000..984a777e
--- /dev/null
+++ b/src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts
@@ -0,0 +1,2 @@
+require('fullcalendar/dist/fullcalendar.js');
+require('style-loader!fullcalendar/dist/fullcalendar.css');
diff --git a/src/app/theme/components/baFullCalendar/index.ts b/src/app/theme/components/baFullCalendar/index.ts
new file mode 100644
index 00000000..45b34c2e
--- /dev/null
+++ b/src/app/theme/components/baFullCalendar/index.ts
@@ -0,0 +1 @@
+export * from './baFullCalendar.component.ts';
diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts
index ea0547ef..e1914270 100644
--- a/src/app/theme/components/index.ts
+++ b/src/app/theme/components/index.ts
@@ -6,3 +6,4 @@ export * from './baCard';
 export * from './baAmChart';
 export * from './baChartistChart';
 export * from './baBackTop';
+export * from './BaFullCalendar';