Hides out-of-month days in vertical view, adds demo website

Author: Brad Berger

README.md

@@ -34,6 +34,9 @@ npm install --save angular-material-calendar
 
 ## Usage
 
+First off, check out the
+<a href="https://angular-material-calendar.bradb.net/>demo</a>
+
 The documentation still needs to be written. It should be pretty
 straight forward to figure out if you're brave by using the
 `example/index.html` file, which shows a full-fledged instance

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "material-calendar",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "homepage": "https://github.com/bradberger/material-calendar",
   "keywords": "angular material design calendar ngCalendar mdCalendar",
   "authors": [
@@ -17,6 +17,7 @@
     "tests"
   ],
   "dependencies": {
-    "angular-material": "~0.10"
+    "angular-material": "~0.10",
+    "angular-sanitize": "*"
   }
 }

dist/angular-material-calendar.html

@@ -1 +1 @@
-<md-content class='md-calendar' layout='column' layout-fill flex md-swipe-left='next()' md-swipe-right='prev()'><md-toolbar><div class='md-toolbar-tools' layout='row'><md-button class='md-calendar-left-btn' ng-click='prev()'>&laquo;</md-button><h2 class='md-calendar-title' flex><span>{{ calendar.start | date:titleFormat:timezone }}</span></h2><md-button class='md-calendar-left-btn' ng-click='next()'>&raquo;</md-button></div></md-toolbar><md-content flex layout='column' layout-fill><div class='md-calendar-subheader' layout='row' layout-fill layout-padding layout-align='space-between center' ng-hide='weekLayout == &quot;column&quot;'><div class='md-calendar-subheader-day' flex ng-repeat='day in calendar.weeks[0]'><md-tooltip>{{ day | date:dayLabelTooltipFormat:timezone }}</md-tooltip>{{ day | date:dayLabelFormat:timezone }}</div></div><div flex class='md-calendar-month' layout='column'><div flex class='md-calendar-week' ng-class='calendarDirection' layout='{{ weekLayout }}' layout-fill ng-repeat='week in calendar.weeks'><div class='md-calendar-day' ng-class='{&quot;md-calendar-day-inactive&quot; : ! sameMonth(day), active: active === day }' flex layout layout-fill ng-click='handleDayClick(day)' ng-repeat='day in week' ng-class='{ active: active === day }'><md-tooltip>{{ day | date:dayTooltipFormat:timezone }}</md-tooltip><div class='md-calendar-number'>{{ day | date:dayFormat:timezone }}</div><div class='md-calendar-content' flex ng-bind-html='getDayContent(day)'></div></div></div></div></md-content></md-content>
+<md-content class='md-calendar' layout='column' layout-fill flex md-swipe-left='next()' md-swipe-right='prev()'><md-toolbar><div class='md-toolbar-tools' layout='row'><md-button class='md-calendar-left-btn' ng-click='prev()'>&laquo;</md-button><h2 class='md-calendar-title' flex><span>{{ calendar.start | date:titleFormat:timezone }}</span></h2><md-button class='md-calendar-left-btn' ng-click='next()'>&raquo;</md-button></div></md-toolbar><md-content flex layout='column' layout-fill><div class='md-calendar-subheader' layout='row' layout-fill layout-padding layout-align='space-between center' ng-hide='weekLayout == &quot;column&quot;'><div class='md-calendar-subheader-day' flex ng-repeat='day in calendar.weeks[0]'><md-tooltip>{{ day | date:dayLabelTooltipFormat:timezone }}</md-tooltip>{{ day | date:dayLabelFormat:timezone }}</div></div><div flex class='md-calendar-month' layout='column'><div flex class='md-calendar-week' ng-class='calendarDirection' layout='{{ weekLayout }}' layout-fill ng-repeat='week in calendar.weeks'><div class='md-calendar-day' ng-hide='! sameMonth(day) && weekLayout == columnWeekLayout' ng-class='{&quot;md-calendar-day-inactive&quot; : ! sameMonth(day), active: active === day }' flex layout layout-fill ng-click='handleDayClick(day)' ng-repeat='day in week' ng-class='{ active: active === day }'><md-tooltip>{{ day | date:dayTooltipFormat:timezone }}</md-tooltip><div class='md-calendar-number'>{{ day | date:dayFormat:timezone }}</div><div class='md-calendar-content' flex ng-bind-html='getDayContent(day)'></div></div></div></div></md-content></md-content>