diff --git a/src/components/datepicker/_demoCalendar/index.html b/src/components/datepicker/_demoCalendar/index.html
deleted file mode 100644
index 113dc763dfa..00000000000
--- a/src/components/datepicker/_demoCalendar/index.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div ng-controller="AppCtrl" style='padding: 40px;' ng-cloak>
-  <md-content>
-    <h1>{{title}}</h1>
-
-    <md-calendar ng-model="myDate"></md-calendar>
-
-  </md-content>
-</div>
diff --git a/src/components/datepicker/_demoCalendar/script.js b/src/components/datepicker/_demoCalendar/script.js
deleted file mode 100644
index d4e813d1cf2..00000000000
--- a/src/components/datepicker/_demoCalendar/script.js
+++ /dev/null
@@ -1,12 +0,0 @@
-angular.module('calendarDemo1', ['ngMaterial'])
-    .controller('AppCtrl', function($scope) {
-      $scope.title = 'Calendar demo';
-      $scope.myDate = new Date();
-
-      $scope.adjustMonth = function(delta) {
-        $scope.myDate = new Date(
-            $scope.myDate.getFullYear(),
-            $scope.myDate.getMonth() + delta,
-            $scope.myDate.getDate());
-      };
-    });
diff --git a/src/components/datepicker/demoCalendar/index.html b/src/components/datepicker/demoCalendar/index.html
new file mode 100644
index 00000000000..cdab2602363
--- /dev/null
+++ b/src/components/datepicker/demoCalendar/index.html
@@ -0,0 +1,21 @@
+<md-content ng-controller="AppCtrl as ctrl" layout="column" layout-gt-sm="row"
+            layout-padding ng-cloak>
+  <div layout="column" flex-order="1" flex-order-gt-sm="0">
+    <md-subheader>Start Date</md-subheader>
+    <md-calendar ng-model="ctrl.startDate"></md-calendar>
+  </div>
+  <div layout="column" flex-order="1" flex-order-gt-sm="1">
+    <md-subheader>End Date</md-subheader>
+    <md-calendar ng-model="ctrl.endDate"></md-calendar>
+  </div>
+  <div layout="column" flex-order="0" flex-order-gt-sm="2">
+    <md-subheader>Dates</md-subheader>
+    <div>
+      <label>Start</label>
+      <div>{{ctrl.startDate | date:shortDate}}</div>
+    </div>
+    <div><label>End</label>
+      <div>{{ctrl.endDate | date:shortDate}}</div>
+    </div>
+  </div>
+</md-content>
diff --git a/src/components/datepicker/demoCalendar/script.js b/src/components/datepicker/demoCalendar/script.js
new file mode 100644
index 00000000000..5bc135e4c03
--- /dev/null
+++ b/src/components/datepicker/demoCalendar/script.js
@@ -0,0 +1,5 @@
+angular.module('calendarDemo', ['ngMaterial']).controller('AppCtrl', function() {
+  this.startDate = new Date();
+  this.endDate = new Date();
+  this.endDate.setDate(this.endDate.getDate() + 5);
+});
diff --git a/src/components/datepicker/_demoCalendar/style.css b/src/components/datepicker/demoCalendar/style.scss
similarity index 55%
rename from src/components/datepicker/_demoCalendar/style.css
rename to src/components/datepicker/demoCalendar/style.scss
index cc979174937..7e87a89668a 100644
--- a/src/components/datepicker/_demoCalendar/style.css
+++ b/src/components/datepicker/demoCalendar/style.scss
@@ -1,5 +1,4 @@
 /** Demo styles for mdCalendar. */
-
-md-calendar {
-  margin: 1px;
+label {
+  font-size: x-small;
 }