diff --git a/src/components/calendar/demoBasicUsage/index.html b/src/components/calendar/demoBasicUsage/index.html
new file mode 100644
index 0000000000..bd9ce4f948
--- /dev/null
+++ b/src/components/calendar/demoBasicUsage/index.html
@@ -0,0 +1,28 @@
+<div ng-controller="AppCtrl" style='padding: 40px;'>
+  <md-content>
+    <h1>{{title}}</h1>
+
+    <hr>
+    <p>
+      <h2>Development tools</h2>
+      <button type="button" ng-click="adjustMonth(+1)">Next month</button>
+      <button type="button" ng-click="adjustMonth(-1)">Prev month</button>
+      <input type="date" ng-model="myDate">
+    </p>
+    <hr>
+
+    <md-calendar ng-model="myDate"></md-calendar>
+
+    <br><br>
+    <br><br>
+    <br><br>
+    <p>Here is a bunch of stuff after the calendar</p>
+    <p>Here is a bunch of stuff after the calendar</p>
+    <p>Here is a bunch of stuff after the calendar</p>
+    <p>Here is a bunch of stuff after the calendar</p>
+    <p>Here is a bunch of stuff after the calendar</p>
+    <p>Here is a bunch of stuff after the calendar</p>
+    <input>
+
+  </md-content>
+</div>
diff --git a/src/components/calendar/demoBasicUsage/script.js b/src/components/calendar/demoBasicUsage/script.js
new file mode 100644
index 0000000000..d4e813d1cf
--- /dev/null
+++ b/src/components/calendar/demoBasicUsage/script.js
@@ -0,0 +1,12 @@
+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/calendar/demoBasicUsage/style.css b/src/components/calendar/demoBasicUsage/style.css
new file mode 100644
index 0000000000..1156334a7f
--- /dev/null
+++ b/src/components/calendar/demoBasicUsage/style.css
@@ -0,0 +1 @@
+/** Demo styles for mdCalendar. */