docs(calendar): add calendar demo (#11295)

this is needed as there are some bugs in this area
it needs to be easier to submit reproductions

Author: Splaktar

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>

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);
+});

src/components/datepicker/demoCalendar/index.html

@@ -1,5 +1,4 @@
 /** Demo styles for mdCalendar. */
-
-md-calendar {
-  margin: 1px;
+label {
+  font-size: x-small;
 }