angular-material-event-calendar - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

app/eventCalendar-primary.scss

+$primary: #1458b1;
+$primaryContrastFont: #FFF;
+
+
+md-event-calendar:not(._md) {
+  md-event-calendar-header {
+    color: $primaryContrastFont;
+    background: $primary;
+
+    md-event-calendar-next, md-event-calendar-prev {
+      .md-arrow svg {
+        fill: $primaryContrastFont;
+      }
+    }
+  }
+
+
+  md-event-calendar-month {
+    .md-event-calendar-month-row-header {
+      color: $primaryContrastFont;
+      background: $primary;
+    }
+
+    .md-event-calendar-month-row {
+      .md-event-calendar-month-cell {
+        &.today {
+          box-shadow: inset 0px 0px 0px 1px $primary;
+
+          .md-event-calendar-month-cell-content {
+            .md-event-calendar-cell-data-label {
+              color: $primary;
+            }
+          }
+
+          .md-event-calendar-month-cell-divider {
+            border-color: $primary;
+          }
+        }
+      }
+    }
+
+
+    .md-event-calendar-cell-event {
+      &.md-selected {
+        color: $primaryContrastFont;
+        background: $primary;
+
+        &.md-continue-left, &.md-end-left {
+          &:after {
+            border-right-color: $primary;
+          }
+        }
+
+        &.md-continue-right, &.md-start-right {
+          &:after {
+            border-left-color: $primary;
+          }
+        }
+      }
+    }
+  }
+}

CHANGELOG.md

+<a name="0.0.5"></a>
+## 0.0.5 (2016-09-05)
+
+*  Add previos and next month days to calendar view. These contain events
+*  Update theme to default to white for header background
+*  Add `md-primary` styling for header background and selected events. You can add the `md-primary` class to the `me-event-calendar` directive.
+*  Fix event sorting in month view to fit more events in a day

app/pages/home/home.controller.js

@@ -7,66 +7,38 @@ angular
 function HomeController($scope, $timeout) {
+
   $scope.events = [
     {
-      start: new Date(new Date().getTime() - 348 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() - 296 * 60 * 60 * 1000),
+      start: getDate(0, 10),
+      end: getDate(1, 11),
       title: 'Event 1'
     },
     {
-      start: new Date(new Date().getTime() - 348 * 60 * 60 * 1000),
-      allDay: true,
+      start: getDate(1, 11),
+      end: getDate(2, 12),
       title: 'Event 2'
     },
     {
-      start: new Date(new Date().getTime() - 348 * 60 * 60 * 1000),
+      start: getDate(2, 12),
+      end: getDate(3, 13),
       title: 'Event 3'
     },
-
     {
-      start: new Date(new Date().getTime() - 348 * 60 * 60 * 1000),
+      start: getDate(4, 12),
+      end: getDate(5, 13),
       title: 'Event 4'
     },
     {
-      start: new Date(new Date().getTime() - 348 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() - 296 * 60 * 60 * 1000),
+      start: getDate(5, 12),
+      end: getDate(6, 13),
       title: 'Event 5'
     },
     {
-      start: new Date(),
-      title: 'Event One'
+      start: getDate(6, 12),
+      end: getDate(6, 13),
+      title: 'Event 6'
     },
     {
-      start: new Date(),
-      end: new Date(new Date().getTime() + 48 * 60 * 60 * 1000),
-      title: 'Event Two Two Two'
-    },
-    {
-      start: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 48 * 60 * 60 * 1000),
-      title: 'Event Three'
-    },
-    {
-      start: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
-      title: 'Event Three2'
-    },
-    {
-      start: new Date(new Date().getTime() + 72 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 72 * 60 * 60 * 1000),
-      title: 'Event four'
-    },
-
-    {
-      start: new Date(new Date().getTime() + 72 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 72 * 60 * 60 * 1000),
-      title: 'Event four2'
-    },
-    {
-      start: new Date(new Date().getTime() + 72 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 144 * 60 * 60 * 1000),
-      title: 'Event five'
-    },
-    {
-      start: new Date(new Date().getTime() + 144 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 144 * 60 * 60 * 1000),
-      title: 'Event six'
+      start: getDate(6, 12),
+      allDay: true,
+      title: 'Event 7'
     }
@@ -80,3 +52,11 @@ ];
 
+  function getDate(offsetDays, hour) {
+    offsetDays = offsetDays || 0;
+    var offset = offsetDays * 24 * 60 * 60 * 1000;
+    var date = new Date(new Date().getTime() + offset);
+    if (hour) { date.setHours(hour); }
+    return date;
+  }
 
+
   // $timeout(function () {
@@ -83,0 +63,0 @@ //   $scope.events.push({

app/pages/home/home.html

 <md-event-calendar
+  class="md-primary"
   ng-model="selected"
@@ -3,0 +4,0 @@ md-events="events"

bower.json

 {
   "name": "angular-material-event-calendar",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Angular material event calander component",
@@ -5,0 +5,0 @@ "main": [

dist/angular-material-event-calendar.css

 md-event-calendar:not(._md) md-event-calendar-header {
-  color: #FFF;
-  background: #AAA; }
-  md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-next .md-arrow, md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-prev .md-arrow {
-    fill: #333; }
+  color: #666;
+  background: #FFF;
+  border-color: #DDD; }
+  md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-next .md-arrow svg, md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-prev .md-arrow svg {
+    fill: #666; }
 
 md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row-header {
-  color: #FFF;
-  background: #AAA; }
+  color: #999;
+  background: #FFF;
+  border-color: #DDD; }
 
@@ -18,12 +20,20 @@ md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row {
     border-color: #DDD; }
-    md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {
-      border-color: #DDD; }
     md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {
-      color: #666; }
+      color: #999; }
     md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {
       color: #4189b8; }
+    md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.different-month {
+      background: #F5F5F5; }
+    md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today {
+      box-shadow: inset 0px 0px 0px 1px #AAA; }
+      md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {
+        color: #666; }
+      md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today .md-event-calendar-month-cell-divider {
+        border-color: #AAA; }
+    md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {
+      border-color: #DDD; }
 
 md-event-calendar:not(._md) .md-event-calendar-cell-event {
-  background: #EEE;
-  color: #333; }
+  background: #DDD;
+  color: #666; }
   md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected {
@@ -33,15 +43,15 @@ color: #EEE;
   md-event-calendar:not(._md) .md-event-calendar-cell-event.md-continue-left:after, md-event-calendar:not(._md) .md-event-calendar-cell-event.md-end-left:after {
-    border-right: 13px solid #EEE; }
+    border-right-color: #DDD; }
   md-event-calendar:not(._md) .md-event-calendar-cell-event.md-continue-right:after, md-event-calendar:not(._md) .md-event-calendar-cell-event.md-start-right:after {
-    border-left: 13px solid #EEE; }
+    border-left-color: #DDD; }
   md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-continue-left:after, md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-end-left:after {
-    border-right: 13px solid #888; }
+    border-right-color: #888; }
   md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-continue-right:after, md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-start-right:after {
-    border-left: 13px solid #888; }
+    border-left-color: #888; }
 
 md-event-calendar:not(._md) .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label {
-  color: #666; }
+  color: #999; }
 
 md-event-calendar:not(._md) .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg {
-  fill: #666; }
+  fill: #999; }
 
@@ -61,3 +71,5 @@ md-event-calendar {
         -ms-flex-align: center;
-            align-items: center; }
+            align-items: center;
+    border-style: solid;
+    border-width: 1px 1px 0 1px; }
     md-event-calendar md-event-calendar-header.md-center {
@@ -69,3 +81,3 @@ -webkit-box-pack: center;
       display: block;
-      min-width: 150px;
+      min-width: 170px;
       text-align: center;
@@ -100,3 +112,5 @@ font-size: 20px; }
   font-weight: 500;
-  padding-bottom: 12px; }
+  padding-bottom: 12px;
+  border-style: solid;
+  border-width: 0 1px 1px 1px; }
   md-event-calendar md-event-calendar-month .md-event-calendar-month-row-header .md-event-calendar-month-cell-header {
@@ -126,5 +140,2 @@ -webkit-box-flex: 1;
             flex: 1; }
-    md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {
-      border-style: solid;
-      border-width: 0 1px 0 0; }
     md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-spacer {
@@ -147,5 +158,6 @@ margin-top: 100%; }
         font-size: 13px;
-        padding: 6px; }
+        padding: 8px; }
       md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-spacer {
-        margin: 4px 0 4px 0; }
+        margin: 4px 0 4px 0;
+        height: 23px; }
       md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {
@@ -156,2 +168,5 @@ font-size: 13px;
         cursor: pointer; }
+    md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {
+      border-style: solid;
+      border-width: 0 1px 0 0; }
 
@@ -161,3 +176,4 @@ md-event-calendar .md-event-calendar-cell-event {
   min-height: 15px;
-  padding: 4px; }
+  padding: 4px;
+  cursor: pointer; }
   md-event-calendar .md-event-calendar-cell-event.md-single {
@@ -182,3 +198,3 @@ margin: 4px;
   md-event-calendar .md-event-calendar-cell-event.md-end-left {
-    margin: 4px 4px 4px 13px;
+    margin: 4px 13px 4px 13px;
     border-radius: 0 2px 2px 0; }
@@ -204,3 +220,4 @@ md-event-calendar .md-event-calendar-cell-event.md-continue, md-event-calendar .md-event-calendar-cell-event.md-continue-both {
     border-top: 12px solid transparent;
-    border-bottom: 11.5px solid transparent; }
+    border-bottom: 11.5px solid transparent;
+    border-left: 13px solid #EEE; }
   md-event-calendar .md-event-calendar-cell-event.md-continue-left:after, md-event-calendar .md-event-calendar-cell-event.md-end-left:after {
@@ -214,3 +231,4 @@ content: '';
     border-top: 12px solid transparent;
-    border-bottom: 11.5px solid transparent; }
+    border-bottom: 11.5px solid transparent;
+    border-right: 13px solid #EEE; }
   md-event-calendar .md-event-calendar-cell-event .md-event-calendar-cell-event-time {
@@ -223,2 +241,11 @@ font-weight: 500;
 
+md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-single, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-start-right {
+  padding-left: 16px; }
+
+md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-single, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-start-right {
+  margin-left: 0; }
+
+md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-single, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end-left {
+  margin-right: 0; }
+
 md-event-calendar .md-event-calendar-show-more-container {
@@ -252,3 +279,3 @@ position: absolute;
     padding: 6px;
-    margin-left: -13px;
-    margin-top: -7px; }
+    margin-left: -11px;
+    margin-top: -5px; }

dist/angular-material-event-calendar.js

@@ -17,2 +17,4 @@ (function(){"use strict";/**
   var $mdThemingProvider;
+
+  // if using angular material, then register the event theme css
   if ($injector.has('$mdThemingProvider')) {
@@ -27,2 +29,3 @@ $mdThemingProvider = $injector.get('$mdThemingProvider');
 
+// polly fill rAF throttle if not using angular material
 function rAFDecorator($delegate) {
@@ -51,3 +54,3 @@ $delegate.throttle = function(cb) {
 
-.constant("EVENT_CALENDAR_THEME", "md-event-calendar._md md-event-calendar-header {\n  color: #EEE;\n  background: '{{primary-default}}'; }\n  md-event-calendar._md md-event-calendar-header md-event-calendar-next .md-arrow, md-event-calendar._md md-event-calendar-header md-event-calendar-prev .md-arrow {\n    fill: #EEE; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row-header {\n  color: #EEE;\n  background: '{{primary-default}}'; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row {\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell-divider {\n    border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell {\n    border-color: '{{foreground-4}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {\n      border-color: '{{foreground-4}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {\n      color: '{{foreground-3}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {\n      color: '{{primary-default}}'; }\n\nmd-event-calendar._md .md-event-calendar-cell-event {\n  background: '{{foreground-4}}';\n  color: '{{background-900}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected {\n    color: #EEE;\n    background: '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-end-left:after {\n    border-right: 13px solid '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-start-right:after {\n    border-left: 13px solid '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-end-left:after {\n    border-right: 13px solid '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-start-right:after {\n    border-left: 13px solid '{{primary-default}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label {\n  color: '{{foreground-3}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg {\n  fill: '{{foreground-1}}'; }\n")
+.constant("EVENT_CALENDAR_THEME", "md-event-calendar._md md-event-calendar-header {\n  color: '{{foreground-1}}';\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-header md-event-calendar-next .md-arrow svg, md-event-calendar._md md-event-calendar-header md-event-calendar-prev .md-arrow svg {\n    fill: '{{foreground-2}}'; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row-header {\n  color: '{{foreground-3}}';\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row {\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell-divider {\n    border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell {\n    border-color: '{{foreground-4}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {\n      color: '{{foreground-3}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {\n      color: '{{primary-default}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.different-month {\n      background: '{{background-hue-2}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today {\n      box-shadow: inset 0px 0px 0px 1px '{{primary-default}}'; }\n      md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {\n        color: '{{primary-default}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {\n      border-color: '{{foreground-4}}'; }\n\nmd-event-calendar._md .md-event-calendar-cell-event {\n  background: '{{foreground-4}}';\n  color: '{{background-900}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected {\n    color: #EEE;\n    background: '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-end-left:after {\n    border-right-color: '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-start-right:after {\n    border-left-color: '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-end-left:after {\n    border-right-color: '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-start-right:after {\n    border-left-color: '{{primary-default}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label {\n  color: '{{foreground-3}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg {\n  fill: '{{foreground-1}}'; }\n\nmd-event-calendar._md.md-primary md-event-calendar-header {\n  color: '{{background-100}}';\n  background: '{{primary-default}}'; }\n  md-event-calendar._md.md-primary md-event-calendar-header md-event-calendar-next .md-arrow svg, md-event-calendar._md.md-primary md-event-calendar-header md-event-calendar-prev .md-arrow svg {\n    fill: '{{background-100}}'; }\n\nmd-event-calendar._md.md-primary md-event-calendar-month .md-event-calendar-month-row-header {\n  color: '{{background-100}}';\n  background: '{{primary-default}}'; }\n")
 
@@ -77,6 +80,2 @@ ;}());
     },
-    // template: '<div class="md-event-calendar">'+
-    //   '<md-event-calendar-header></md-event-calendar-header>'+
-    //   '<md-event-calendar-month></md-event-calendar-month>'+
-    // '</div>',
     compile: compile,
@@ -220,22 +219,17 @@ controller: controller,
       var isEndThisDay = $$mdEventCalendarUtil.isValidDate(item.end) ? $$mdEventCalendarUtil.isSameDay(date, item.end) : true;
+      var eventOptions = {
+        labelProperty: labelProperty,
+        selected: selected
+      };
 
       if (isStartThisDay && isEndThisDay) {
-        eventElement = buildEventItem('single', true, item, labelProperty);
+        eventElement = createEventElement({className: 'single', hasLabel: true}, item, eventOptions);
       } else if (isStartThisDay) {
-        eventElement = buildEventItem('start-right', true, item, labelProperty);
+        eventElement = createEventElement({className: 'start-right', hasLabel: true}, item, eventOptions);
       } else if (isEndThisDay) {
-        eventElement = buildEventItem('end-left', true, item, labelProperty);
+        eventElement = createEventElement({className: 'end-left', hasLabel: true}, item, eventOptions);
       } else {
-        eventElement = buildEventItem('continue', true, item, labelProperty);
+        eventElement = createEventElement({className: 'continue', hasLabel: true}, item, eventOptions);
       }
 
-
-      selected.every(function (sel) {
-        if (sel.$$mdEventId !== undefined && sel.$$mdEventId === item.$$mdEventId) {
-          eventElement.classList.add('md-selected');
-          return false;
-        }
-        return true;
-      });
-
       content.appendChild(eventElement);
@@ -248,46 +242,69 @@ });
 
+  function filterEventsOnDay(date, events) {
+    return !events || !events.length ? [] : events.filter(function (item) {
+      return $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
+    }).sort(function(a, b) {
+      a = new Date(a.start);
+      b = new Date(b.start);
+      return a > b ? 1 : a < b ? -1 : 0;
+    });
+  }
 
-  function month(opts) {
-    var date = $$mdEventCalendarUtil.isValidDate(opts.date) ? opts.date : new Date();
-    var events = opts.events ? filterEventsOnMonth(date, opts.events) : [];
-    var selected = opts.selected || [];
-    var labelProperty = opts.labelProperty;
-    var cellSize = opts.bounds.width / 7;
-    var maxEvents = Math.floor((cellSize - 27) / 27);
-    events.forEach(cleanEvent);
 
+
+
+
+
+
+
+
+
+
+
+  function month(options) {
+    var calendarStartDate;
+    var today = $$mdEventCalendarUtil.createDateAtMidnight();
+    var date = $$mdEventCalendarUtil.isValidDate(options.date) ? options.date : new Date();
     var firstDayOfMonth = $$mdEventCalendarUtil.getFirstDateOfMonth(date);
     var firstDayOfTheWeek = (firstDayOfMonth.getDay() + 7) % 7;
     var numberOfDaysInMonth = $$mdEventCalendarUtil.getNumberOfDaysInMonth(date);
-    var monthBody = document.createDocumentFragment();
+    var events = filterCurrentCalendar(date, options.events);
+    events.forEach(cleanEvent);
+    var selected = options.selected  || [];
     var rowNumber = 1;
-    var blankCellOffset = 0;
-    var headerRow = document.createElement('div');
-    headerRow.classList.add('md-event-calendar-month-row-header');
-    var row = buildDateRow(rowNumber);
-    monthBody.appendChild(headerRow);
-    monthBody.appendChild(row);
+    var monthElement = createMonthElement();
+    var row = createRowElement();
+    monthElement.appendChild(row);
+    var firstCalendarDay = true;
+    var cellSize = (options.bounds.width / 7) - 48;
+    var maxEvents = Math.floor(cellSize / 24);
+    var d = 0;
 
-    $$mdEventCalendarUtil.days.forEach(function (name) {
-      var dayHeader = document.createElement('div');
-      dayHeader.classList.add('md-event-calendar-month-cell-header');
-      dayHeader.textContent = name.slice(0,3).toLowerCase();
-      headerRow.appendChild(dayHeader);
-    });
 
 
-
-    if (firstDayOfTheWeek <= 2) {
-    } else {
-      blankCellOffset = 3;
+    // days from last month
+    if (firstDayOfTheWeek > 0) {
+      calendarStartDate = $$mdEventCalendarUtil.getFirstDateOfMonth(date);
+      calendarStartDate.setDate(calendarStartDate.getDate() - firstDayOfTheWeek);
+      while (d < firstDayOfTheWeek) {
+        row.appendChild(createCellElement({
+          date: calendarStartDate,
+          today: today,
+          dayOfWeek: d,
+          differentMonth: true,
+          events: events,
+          isFirstDay: firstCalendarDay,
+          isLastDay: false,
+          maxEvents: maxEvents,
+          selected: selected,
+          labelProperty: options.labelProperty
+        }));
+        firstCalendarDay = false;
+        d += 1;
+        calendarStartDate.setDate(calendarStartDate.getDate() + 1);
+      }
     }
 
 
-    var i = 0;
-    while (i < firstDayOfTheWeek) {
-      row.appendChild(buildDateCell());
-      i += 1;
-    }
 
-
     // Add a cell for each day of the month, keeping track of the day of the week so that
@@ -297,3 +314,4 @@ // we know when to start a new row.
     var iterationDate = firstDayOfMonth;
-    var d = 1;
+    var lastCalendarDay = false;
+    d = 1;
     while (d <= numberOfDaysInMonth) {
@@ -303,11 +321,24 @@ // If we've reached the end of the week, start a new row.
         dayOfWeek = 0;
-        rowNumber++;
-        row = buildDateRow(rowNumber);
-        monthBody.appendChild(row);
+        row = createRowElement();
+        firstCalendarDay = false;
+        monthElement.appendChild(row);
       }
 
+      if (dayOfWeek === 6 && d === numberOfDaysInMonth) {
+        lastCalendarDay = true;
+      }
+
       iterationDate.setDate(d);
-      var cell = buildDateCell(iterationDate, dayOfWeek, selected);
-      row.appendChild(cell);
-
+      row.appendChild(createCellElement({
+        date: iterationDate,
+        today: today,
+        dayOfWeek: dayOfWeek,
+        events: events,
+        isFirstDay: firstCalendarDay,
+        isLastDay: lastCalendarDay,
+        maxEvents: maxEvents,
+        selected: selected,
+        labelProperty: options.labelProperty
+      }));
+      firstCalendarDay = false;
       dayOfWeek += 1;
@@ -317,159 +348,126 @@ d += 1;
 
-    // Ensure that the last row of the month has 7 cells.
+
+
+    // fill in the rest of the row with next month
     while (row.childNodes.length < 7) {
-      row.appendChild(buildDateCell());
+      if (dayOfWeek === 6) {
+        lastCalendarDay = true;
+      }
+      iterationDate.setDate(d);
+      row.appendChild(createCellElement({
+        date: iterationDate,
+        today: today,
+        dayOfWeek: dayOfWeek,
+        differentMonth: true,
+        events: events,
+        isFirstDay: false,
+        isLastDay: lastCalendarDay,
+        maxEvents: maxEvents,
+        selected: selected,
+        labelProperty: options.labelProperty
+      }));
+      dayOfWeek += 1;
+      d += 1;
     }
 
-    return monthBody;
 
+    return monthElement;
+  }
 
 
-    function buildDateCell(date, dayOfWeek, selected) {
-      var cell = document.createElement('div');
-      cell.classList.add('md-event-calendar-month-cell');
 
-      var cellSpacer = document.createElement('div');
-      cellSpacer.classList.add('md-event-calendar-month-cell-spacer');
-      cell.appendChild(cellSpacer);
+  function createCellElement(options) {
+    var cell = document.createElement('div');
+    cell.classList.add('md-event-calendar-month-cell');
+    if (options.differentMonth === true) { cell.classList.add('different-month'); }
+    if ($$mdEventCalendarUtil.isSameDay(options.date, options.today)) { cell.classList.add('today'); }
 
-      var divider = document.createElement('div');
-      divider.classList.add('md-event-calendar-month-cell-divider');
-      cell.appendChild(divider);
+    var cellSpacer = document.createElement('div');
+    cellSpacer.classList.add('md-event-calendar-month-cell-spacer');
+    cell.appendChild(cellSpacer);
 
-      var cellContent = document.createElement('div');
-      cellContent.classList.add('md-event-calendar-month-cell-content');
-      cell.appendChild(cellContent);
+    var divider = document.createElement('div');
+    divider.classList.add('md-event-calendar-month-cell-divider');
+    cell.appendChild(divider);
 
-      if (date) {
-        var dateLabel = document.createElement('div');
-        dateLabel.classList.add('md-event-calendar-cell-data-label');
-        dateLabel.textContent = $$mdEventCalendarUtil.dates[date.getDate()];
-        cellContent.appendChild(dateLabel);
-        buildEvents(date, dayOfWeek, selected, cellContent);
-      }
+    var cellContent = document.createElement('div');
+    cellContent.classList.add('md-event-calendar-month-cell-content');
+    cell.appendChild(cellContent);
 
-      return cell;
-    }
+    var dateLabel = document.createElement('div');
+    dateLabel.classList.add('md-event-calendar-cell-data-label');
+    dateLabel.textContent = $$mdEventCalendarUtil.dates[options.date.getDate()];
+    cellContent.appendChild(dateLabel);
 
+    createEventElements(cellContent, options);
 
+    return cell;
+  }
 
-    function buildEvents(date, dayOfWeek, selected, cell) {
-      var eventPlace = 0; // place in single day cell, from the first time used
-      var first = true;
-      var hasEvents = false;
 
-      var takenPlaces = [];
-      var validEvents = events.filter(function (item) {
-        var isInRange = $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
-        if (isInRange) {
-          if (item.$$place) { takenPlaces.push(item.$$place); }
-          return true;
-        } else { return false; }
-      });
-      validEvents.forEach(function(item) {
-        if (!item.$$place) {
-          item.$$place = getPlace();
-        }
-      });
 
-      eventPlace = 0;
-      validEvents.sort(function(a, b) {
-        if (a.$$place > b.$$place) { return 1; }
-        if (a.$$place < b.$$place) { return -1; }
-        return 0;
-      }).every(function (item, pos) {
-        var eventElement;
-        var isStartThisDay = $$mdEventCalendarUtil.isSameDay(date, item.start);
-        var isEndThisDay = $$mdEventCalendarUtil.isValidDate(item.end) ? $$mdEventCalendarUtil.isSameDay(date, item.end) : true;
-        if (first && item.$$place > 0) { addEventSpacer(item.$$place, cell); } // spacer if first event is from previous day and not at the top
-        else if (item.$$place > eventPlace + 1) { addEventSpacer((item.$$place - (eventPlace+1)), cell); } // spacer for gaps
-        first = false;
-        hasEvents = true;
-        eventPlace = item.$$place;
-
-
-        // if it doesn't fit add a link to see the rest
-        if (item.$$hide === true || ((eventPlace + 1) >= maxEvents && pos !== (validEvents.length-1))) {
-          item.$$hide = true; // set hide so the event does not show on next day
-          cell.appendChild(buildShowMoreLink(validEvents.length - pos, date));
+  function createEventElements(cellContent, options) {
+    var i;
+    var place = 0;
+    var hasEvents = false;
+    var matchingEvents = getEventsInRange(options.date, options.events);
+    matchingEvents = setEventPlaces(matchingEvents, options.dayOfWeek);
+    matchingEvents.every(function (eventItem, pos) {
+      var type = getEventDisplayType(eventItem, options);
+      var placeDiff = eventItem.$$place - place;
+      hasEvents = true;
+      place = eventItem.$$place + 1;
+      i = 0;
+      // add spacer items for overflow events from last day
+      while (i < placeDiff) {
+        if (place >= options.maxEvents) {
+          cellContent.appendChild(createShowMore(matchingEvents.length - pos, options.date));
           return false;
         }
-
-
-        if (isStartThisDay && isEndThisDay) {
-          eventElement = buildEventItem('single', true, item, labelProperty);
-        } else if (isStartThisDay) {
-          eventElement = buildEventItem('start', true, item, labelProperty);
-        } else if (isEndThisDay && dayOfWeek === 0) {
-          eventElement = buildEventItem('end-left', false, item, labelProperty);
-        } else if (isEndThisDay) {
-          eventElement = buildEventItem('end', false, item, labelProperty);
-        } else if (dayOfWeek === 0) {
-          eventElement = buildEventItem('continue-left', true, item, labelProperty);
-        } else if (dayOfWeek === 6) {
-          eventElement = buildEventItem('continue-right', false, item, labelProperty);
-        } else {
-          eventElement = buildEventItem('continue', false, item, labelProperty);
-        }
-
-        selected.every(function (sel) {
-          if (sel.$$mdEventId !== undefined && sel.$$mdEventId === item.$$mdEventId) {
-            eventElement.classList.add('md-selected');
-            return false;
-          }
-          return true;
-        });
-
-        cell.appendChild(eventElement);
-        return true;
-      });
-
-      if (hasEvents === true) {
-        cell.classList.add('md-has-events');
+        cellContent.appendChild(createEventSpacerElement());
+        i += 1;
       }
 
-      function getPlace() {
-        while (takenPlaces.indexOf(eventPlace) !== -1) {
-          eventPlace += 1;
-        }
-        takenPlaces.push(eventPlace);
-        return eventPlace;
+      if (place >= options.maxEvents) {
+        cellContent.appendChild(createShowMore(matchingEvents.length - pos, options.date));
+        return false;
       }
-    }
+      cellContent.appendChild(createEventElement(type, eventItem, options));
+      return true;
+    });
 
-
-
-    function buildShowMoreLink(num, date) {
-      var showMoreElement = document.createElement('div');
-      showMoreElement.classList.add('md-event-calendar-cell-event-show-more-link');
-      showMoreElement.textContent = num+' more';
-      showMoreElement.setAttribute('md-show-more', date.toISOString());
-      return showMoreElement;
+    if (hasEvents === true) {
+      cellContent.classList.add('md-has-events');
     }
+  }
 
 
-    function buildDateRow(rowNumber) {
-      var row = document.createElement('div');
-      row.classList.add("md-event-calendar-month-row");
-      return row;
-    }
+  function createShowMore(num, date) {
+    var showMoreElement = document.createElement('div');
+    showMoreElement.classList.add('md-event-calendar-cell-event-show-more-link');
+    showMoreElement.textContent = num+' more';
+    showMoreElement.setAttribute('md-show-more', date.toISOString());
+    return showMoreElement;
   }
 
 
+  function createEventSpacerElement() {
+    var spacer = document.createElement('div');
+    spacer.classList.add('md-event-calendar-cell-event-spacer');
+    return spacer;
+  }
 
-
-
-
-  function buildEventItem(type, showLabel, eventObj, labelProperty) {
-    var hash = getHashValue(eventObj);
+  function createEventElement(type, eventItem, options) {
+    var hash = getHashValue(eventItem);
     var eventElement = document.createElement('div');
     eventElement.classList.add('md-event-calendar-cell-event');
-    eventElement.classList.add('md-'+type);
+    eventElement.classList.add('md-'+type.className);
     eventElement.setAttribute('md-event-id', hash);
 
-    if (showLabel === true) {
-      if (type.indexOf('continue') === -1 && eventObj.allDay !== true) {
+    if (type.hasLabel === true) {
+      // do not show time for allDay events
+      if (type.allDay !== true) {
         var dateLabelTime = document.createElement('span');
         dateLabelTime.classList.add('md-event-calendar-cell-event-time');
-        dateLabelTime.textContent = $$mdEventCalendarUtil.formatEventTime(eventObj.start);
+        dateLabelTime.textContent = $$mdEventCalendarUtil.formatEventTime(eventItem.start);
         eventElement.appendChild(dateLabelTime);
@@ -479,6 +477,14 @@ }
       var dateLabelText = document.createElement('span');
-      dateLabelText.textContent = eventObj[labelProperty];
+      dateLabelText.textContent = eventItem[options.labelProperty];
       eventElement.appendChild(dateLabelText);
     }
 
+    options.selected.every(function (sel) {
+      if (sel.$$mdEventId !== undefined && sel.$$mdEventId === eventItem.$$mdEventId) {
+        eventElement.classList.add('md-selected');
+        return false;
+      }
+      return true;
+    });
+
     return eventElement;
@@ -489,10 +495,2 @@ }
 
-  function addEventSpacer(place, cell) {
-    var spacer = document.createElement('div');
-    spacer.classList.add('md-event-calendar-cell-event-spacer');
-    spacer.style.minHeight = place * 23 + ((place-1) * 4); // 23 is the height of an event item. 4 for padding inbetween
-    cell.appendChild(spacer);
-  }
-
-
   function getHashValue(value) {
@@ -502,22 +500,139 @@ if (angular.isObject(value)) {
     }
-    return value;
+    return 'id_' + (++nextId);
   }
 
-  function filterEventsOnMonth(date, events) {
-    return !events || !events.length ? [] : events.filter(function (item) {
-      var isStartValid = $$mdEventCalendarUtil.isValidDate(item.start);
-      var isEndValid = $$mdEventCalendarUtil.isValidDate(item.end);
-      var isStartSame = $$mdEventCalendarUtil.isSameMonthAndYear(date, item.start);
-      return isStartValid && isEndValid ? (isStartSame || $$mdEventCalendarUtil.isSameMonthAndYear(date, item.end)) : isStartSame;
-    }).sort(function(a, b) {
-      a = new Date(a.start);
-      b = new Date(b.start);
-      return a > b ? 1 : a < b ? -1 : 0;
+
+  function getEventDisplayType(item, options) {
+    var className;
+    var hasLabel;
+
+    var isStartThisDay = $$mdEventCalendarUtil.isSameDay(options.date, item.start);
+    var isEndThisDay = $$mdEventCalendarUtil.isValidDate(item.end) ? $$mdEventCalendarUtil.isSameDay(options.date, item.end) : true;
+
+    // single day event
+    if (isStartThisDay && (options.allDay || isEndThisDay)) {
+      className = 'single';
+      hasLabel = true;
+
+    // starts today
+    } else if (isStartThisDay) {
+      className = 'start';
+      hasLabel = true;
+
+    // ends on sunday
+    } else if (isEndThisDay && options.dayOfWeek === 0) {
+      className = 'end-left';
+      hasLabel = true;
+
+    // last day of event
+    } else if (isEndThisDay) {
+      className = 'end';
+      hasLabel = options.isFirstDay; // add label if event is continuing from last month
+
+    // continuation on sunday
+    } else if (options.dayOfWeek === 0) {
+      className = 'continue-left';
+      hasLabel = true;
+
+    // continue on sat
+    } else if (options.dayOfWeek === 6) {
+      className = 'continue-right';
+      hasLabel = false;
+
+    // continuation
+    } else {
+      className = 'continue';
+      hasLabel = false;
+    }
+
+    return {
+      className: className,
+      hasLabel: hasLabel,
+      allDay: item.allDay || false
+    };
+  }
+
+  function getEventsInRange(date, events) {
+    return events.filter(function (item) {
+      return $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
     });
   }
 
+  function setEventPlaces(events, dayOfWeek) {
+    var takenPlaces = [];
+    var sorted = events.sort(function (a, b) {
+      if (a.end > b.end) { return -1; }
+      if (a.end < b.end) { return 1; }
+      return 0;
+    });
 
-  function filterEventsOnDay(date, events) {
-    return !events || !events.length ? [] : events.filter(function (item) {
-      return $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
+    // if not first day of week then get event palces. this is for dates that come from previous days
+    // otherwise reset places
+    sorted.forEach(function (item) {
+      if (dayOfWeek === 0) { item.$$place = undefined; }
+      else if (item.$$place !== undefined) { takenPlaces.push(item.$$place); }
+    });
+
+    // fill in places that have not been set
+    sorted.forEach(function(item) {
+      if (item.$$place === undefined) { item.$$place = getPlace(); }
+    });
+
+    // sort on places
+    return sorted.sort(function(a, b) {
+      if (a.$$place > b.$$place) { return 1; }
+      if (a.$$place < b.$$place) { return -1; }
+      return 0;
+    });
+
+
+    // find lowest place not taken
+    function getPlace() {
+      var place = 0;
+      while (takenPlaces.indexOf(place) !== -1) {
+        place++;
+      }
+      takenPlaces.push(place);
+      return place;
+    }
+  }
+
+
+  function createMonthElement() {
+    var monthBody = document.createDocumentFragment();
+    var headerRow = document.createElement('div');
+    headerRow.classList.add('md-event-calendar-month-row-header');
+    monthBody.appendChild(headerRow);
+
+    // add header day labels
+    $$mdEventCalendarUtil.days.forEach(function (name) {
+      var dayHeader = document.createElement('div');
+      dayHeader.classList.add('md-event-calendar-month-cell-header');
+      dayHeader.textContent = name.slice(0,3).toLowerCase();
+      headerRow.appendChild(dayHeader);
+    });
+
+    return monthBody;
+  }
+
+  function createRowElement() {
+    var row = document.createElement('div');
+    row.classList.add("md-event-calendar-month-row");
+    return row;
+  }
+
+
+  function filterCurrentCalendar(date, events) {
+    if (!events || !events.length) { return []; }
+    // back fill 6 days for posibility of last month days showing up
+    var start = $$mdEventCalendarUtil.getFirstDateOfMonth(date).getDate(-6);
+    // front fill 6 days for posibility of next month days showing up
+    var end = $$mdEventCalendarUtil.getFirstDateOfMonth(date).getDate(37);
+
+    return events.filter(function (item) {
+      if (!$$mdEventCalendarUtil.isValidDate(item.start)) { return false; }
+      if ($$mdEventCalendarUtil.isDateWithinRange(item.start, start, end)) { return true; }
+      if (!$$mdEventCalendarUtil.isValidDate(item.end)) { return false; }
+      if ($$mdEventCalendarUtil.isDateWithinRange(item.end, start, end)) { return true; }
+      return false;
     }).sort(function(a, b) {
@@ -625,3 +740,3 @@ a = new Date(a.start);
         events: mdEventCalendarCtrl.events,
-        labelProperty: mdEventCalendarCtrl.labelProperty,
+        labelProperty: mdEventCalendarCtrl.labelProperty
       });
@@ -628,0 +743,0 @@ angular.element(el).parent().parent().append(showMoreElement);

dist/angular-material-event-calendar.min.css

@@ -1,1 +0,1 @@
-md-event-calendar:not(._md) md-event-calendar-header{color:#fff;background:#aaa}md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-next .md-arrow,md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-prev .md-arrow{fill:#333}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row-header{color:#fff;background:#aaa}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row{background:#fff;border-color:#ddd}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell,md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell-divider,md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child{border-color:#ddd}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label{color:#666}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link{color:#4189b8}md-event-calendar:not(._md) .md-event-calendar-cell-event{background:#eee;color:#333}md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected{color:#eee;background:#888}md-event-calendar:not(._md) .md-event-calendar-cell-event.md-continue-left:after,md-event-calendar:not(._md) .md-event-calendar-cell-event.md-end-left:after{border-right:13px solid #eee}md-event-calendar:not(._md) .md-event-calendar-cell-event.md-continue-right:after,md-event-calendar:not(._md) .md-event-calendar-cell-event.md-start-right:after{border-left:13px solid #eee}md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-continue-left:after,md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-end-left:after{border-right:13px solid #888}md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-continue-right:after,md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-start-right:after{border-left:13px solid #888}md-event-calendar:not(._md) .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label{color:#666}md-event-calendar:not(._md) .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg{fill:#666}md-event-calendar{display:block}md-event-calendar md-event-calendar-header{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex;line-height:64px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}md-event-calendar md-event-calendar-header.md-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}md-event-calendar md-event-calendar-header md-event-calendar-title{display:block;min-width:150px;text-align:center;font-size:20px}md-event-calendar md-event-calendar-header md-event-calendar-next,md-event-calendar md-event-calendar-header md-event-calendar-prev{display:block}md-event-calendar md-event-calendar-header md-event-calendar-next .md-arrow,md-event-calendar md-event-calendar-header md-event-calendar-prev .md-arrow{cursor:pointer;height:24px;width:24px}md-event-calendar md-event-calendar-header md-event-calendar-next .md-arrow.md-left-arrow,md-event-calendar md-event-calendar-header md-event-calendar-prev .md-arrow.md-left-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}md-event-calendar md-event-calendar-month .md-event-calendar-month-row-header{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-height:36px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;font-size:12px;font-weight:500;padding-bottom:12px}md-event-calendar md-event-calendar-month .md-event-calendar-month-row-header .md-event-calendar-month-cell-header{-webkit-box-flex:1;-ms-flex:1;flex:1;padding-left:6px}md-event-calendar md-event-calendar-month .md-event-calendar-month-row{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;border-style:solid;border-width:0 0 1px}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child{border-style:solid;border-width:0 1px 0 0}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-spacer{margin-top:100%}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-divider{position:absolute;top:0;bottom:0;left:0;border-style:solid;border-width:0 1px 0 0}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content{position:absolute;top:0;bottom:0;left:0;right:0}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label{font-size:13px;padding:6px}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-spacer{margin:4px 0}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link{font-size:13px;padding:4px;padding-left:8px;cursor:pointer}md-event-calendar .md-event-calendar-cell-event{font-size:12px;min-height:15px;padding:4px}md-event-calendar .md-event-calendar-cell-event.md-single{margin:4px;border-radius:2px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}md-event-calendar .md-event-calendar-cell-event.md-start{margin:4px 0 4px 4px;border-radius:2px 0 0 2px;white-space:nowrap;z-index:1;position:relative}md-event-calendar .md-event-calendar-cell-event.md-start-right{margin:4px 13px 4px 0;border-radius:2px 0 0 2px}md-event-calendar .md-event-calendar-cell-event.md-end{margin:4px 4px 4px 0;border-radius:0 2px 2px 0}md-event-calendar .md-event-calendar-cell-event.md-end-left{margin:4px 4px 4px 13px;border-radius:0 2px 2px 0}md-event-calendar .md-event-calendar-cell-event.md-continue,md-event-calendar .md-event-calendar-cell-event.md-continue-both{margin:4px 0;border-radius:0}md-event-calendar .md-event-calendar-cell-event.md-continue-right{margin:4px 13px 4px 0;border-radius:0;white-space:nowrap}md-event-calendar .md-event-calendar-cell-event.md-continue-left{margin:4px 0 4px 13px;border-radius:0;white-space:nowrap}md-event-calendar .md-event-calendar-cell-event.md-continue-right:after,md-event-calendar .md-event-calendar-cell-event.md-start-right:after{content:'';position:absolute;height:0;width:0;right:0;margin-top:-4px;border-top:12px solid transparent;border-bottom:11.5px solid transparent}md-event-calendar .md-event-calendar-cell-event.md-continue-left:after,md-event-calendar .md-event-calendar-cell-event.md-end-left:after{content:'';position:absolute;height:0;width:0;left:0;margin-top:-4px;border-top:12px solid transparent;border-bottom:11.5px solid transparent}md-event-calendar .md-event-calendar-cell-event .md-event-calendar-cell-event-time{font-weight:500;padding-right:6px;pointer-events:none}md-event-calendar .md-event-calendar-cell-event span{pointer-events:none}md-event-calendar .md-event-calendar-show-more-container{position:absolute;top:0;left:1px;width:180px;background:#fff;padding:12px;padding-top:7px;border-radius:2px;z-index:2;box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)}md-event-calendar .md-event-calendar-show-more-container .md-event-calendar-show-more-content{position:relative}md-event-calendar .md-event-calendar-show-more-container .md-event-calendar-show-more-close{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:6px;right:7px;width:16px;height:16px;cursor:pointer}md-event-calendar .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg{pointer-events:none}md-event-calendar .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label{font-size:13px;padding:6px;margin-left:-13px;margin-top:-7px}
+md-event-calendar:not(._md) md-event-calendar-header{color:#666;background:#fff;border-color:#ddd}md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-next .md-arrow svg,md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-prev .md-arrow svg{fill:#666}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row-header{color:#999;background:#fff;border-color:#ddd}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row{background:#fff;border-color:#ddd}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell,md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell-divider{border-color:#ddd}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label{color:#999}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link{color:#4189b8}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.different-month{background:#f5f5f5}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today{box-shadow:inset 0 0 0 1px #aaa}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label{color:#666}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today .md-event-calendar-month-cell-divider{border-color:#aaa}md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child{border-color:#ddd}md-event-calendar:not(._md) .md-event-calendar-cell-event{background:#ddd;color:#666}md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected{color:#eee;background:#888}md-event-calendar:not(._md) .md-event-calendar-cell-event.md-continue-left:after,md-event-calendar:not(._md) .md-event-calendar-cell-event.md-end-left:after{border-right-color:#ddd}md-event-calendar:not(._md) .md-event-calendar-cell-event.md-continue-right:after,md-event-calendar:not(._md) .md-event-calendar-cell-event.md-start-right:after{border-left-color:#ddd}md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-continue-left:after,md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-end-left:after{border-right-color:#888}md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-continue-right:after,md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-start-right:after{border-left-color:#888}md-event-calendar:not(._md) .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label{color:#999}md-event-calendar:not(._md) .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg{fill:#999}md-event-calendar{display:block}md-event-calendar md-event-calendar-header{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;display:-webkit-box;display:-ms-flexbox;display:flex;line-height:64px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;border-width:1px 1px 0}md-event-calendar md-event-calendar-header.md-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}md-event-calendar md-event-calendar-header md-event-calendar-title{display:block;min-width:170px;text-align:center;font-size:20px}md-event-calendar md-event-calendar-header md-event-calendar-next,md-event-calendar md-event-calendar-header md-event-calendar-prev{display:block}md-event-calendar md-event-calendar-header md-event-calendar-next .md-arrow,md-event-calendar md-event-calendar-header md-event-calendar-prev .md-arrow{cursor:pointer;height:24px;width:24px}md-event-calendar md-event-calendar-header md-event-calendar-next .md-arrow.md-left-arrow,md-event-calendar md-event-calendar-header md-event-calendar-prev .md-arrow.md-left-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}md-event-calendar md-event-calendar-month .md-event-calendar-month-row-header{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-height:36px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;font-size:12px;font-weight:500;padding-bottom:12px;border-style:solid;border-width:0 1px 1px}md-event-calendar md-event-calendar-month .md-event-calendar-month-row-header .md-event-calendar-month-cell-header{-webkit-box-flex:1;-ms-flex:1;flex:1;padding-left:6px}md-event-calendar md-event-calendar-month .md-event-calendar-month-row{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;border-style:solid;border-width:0 0 1px}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-spacer{margin-top:100%}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-divider{position:absolute;top:0;bottom:0;left:0;border-style:solid;border-width:0 1px 0 0}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content{position:absolute;top:0;bottom:0;left:0;right:0}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label{font-size:13px;padding:8px}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-spacer{margin:4px 0;height:23px}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link{font-size:13px;padding:4px;padding-left:8px;cursor:pointer}md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child{border-style:solid;border-width:0 1px 0 0}md-event-calendar .md-event-calendar-cell-event{font-size:12px;min-height:15px;padding:4px;cursor:pointer}md-event-calendar .md-event-calendar-cell-event.md-single{margin:4px;border-radius:2px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}md-event-calendar .md-event-calendar-cell-event.md-start{margin:4px 0 4px 4px;border-radius:2px 0 0 2px;white-space:nowrap;z-index:1;position:relative}md-event-calendar .md-event-calendar-cell-event.md-start-right{margin:4px 13px 4px 0;border-radius:2px 0 0 2px}md-event-calendar .md-event-calendar-cell-event.md-end{margin:4px 4px 4px 0;border-radius:0 2px 2px 0}md-event-calendar .md-event-calendar-cell-event.md-end-left{margin:4px 13px;border-radius:0 2px 2px 0}md-event-calendar .md-event-calendar-cell-event.md-continue,md-event-calendar .md-event-calendar-cell-event.md-continue-both{margin:4px 0;border-radius:0}md-event-calendar .md-event-calendar-cell-event.md-continue-right{margin:4px 13px 4px 0;border-radius:0;white-space:nowrap}md-event-calendar .md-event-calendar-cell-event.md-continue-left{margin:4px 0 4px 13px;border-radius:0;white-space:nowrap}md-event-calendar .md-event-calendar-cell-event.md-continue-right:after,md-event-calendar .md-event-calendar-cell-event.md-start-right:after{content:'';position:absolute;height:0;width:0;right:0;margin-top:-4px;border-top:12px solid transparent;border-bottom:11.5px solid transparent;border-left:13px solid #eee}md-event-calendar .md-event-calendar-cell-event.md-continue-left:after,md-event-calendar .md-event-calendar-cell-event.md-end-left:after{content:'';position:absolute;height:0;width:0;left:0;margin-top:-4px;border-top:12px solid transparent;border-bottom:11.5px solid transparent;border-right:13px solid #eee}md-event-calendar .md-event-calendar-cell-event .md-event-calendar-cell-event-time{font-weight:500;padding-right:6px;pointer-events:none}md-event-calendar .md-event-calendar-cell-event span{pointer-events:none}md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end,md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-single,md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-start-right{padding-left:16px;margin-left:0}md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end,md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end-left,md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-single{margin-right:0}md-event-calendar .md-event-calendar-show-more-container{position:absolute;top:0;left:1px;width:180px;background:#fff;padding:12px;padding-top:7px;border-radius:2px;z-index:2;box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)}md-event-calendar .md-event-calendar-show-more-container .md-event-calendar-show-more-content{position:relative}md-event-calendar .md-event-calendar-show-more-container .md-event-calendar-show-more-close{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:6px;right:7px;width:16px;height:16px;cursor:pointer}md-event-calendar .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg{pointer-events:none}md-event-calendar .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label{font-size:13px;padding:6px;margin-left:-11px;margin-top:-5px}

dist/angular-material-event-calendar.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";function e(e,n,a){var r;e.has("$mdThemingProvider")?(r=e.get("$mdThemingProvider"),r.registerStyles(a)):n.decorator("$$rAF",["$delegate",t])}function t(e){return e.throttle=function(t){var n,a,r,d;return function(){n=arguments,d=this,r=t,a||(a=!0,e(function(){r.apply(d,Array.prototype.slice.call(n)),a=!1}))}},e}e.$inject=["$injector","$provide","EVENT_CALENDAR_THEME"],angular.module("material.components.eventCalendar",[]).config(e)}(),function(){"use strict";angular.module("material.components.eventCalendar").run(["$templateCache",function(e){e.put("icons/ic_close_black_24px.svg",'<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>'),e.put("icons/ic_keyboard_arrow_right_black_24px.svg",'<svg fill="#EEEEEE" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/>\n    <path d="M0-.25h24v24H0z" fill="none"/>\n</svg>\n')}])}(),function(){"use strict";angular.module("material.components.eventCalendar").constant("EVENT_CALENDAR_THEME","md-event-calendar._md md-event-calendar-header {\n  color: #EEE;\n  background: '{{primary-default}}'; }\n  md-event-calendar._md md-event-calendar-header md-event-calendar-next .md-arrow, md-event-calendar._md md-event-calendar-header md-event-calendar-prev .md-arrow {\n    fill: #EEE; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row-header {\n  color: #EEE;\n  background: '{{primary-default}}'; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row {\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell-divider {\n    border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell {\n    border-color: '{{foreground-4}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {\n      border-color: '{{foreground-4}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {\n      color: '{{foreground-3}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {\n      color: '{{primary-default}}'; }\n\nmd-event-calendar._md .md-event-calendar-cell-event {\n  background: '{{foreground-4}}';\n  color: '{{background-900}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected {\n    color: #EEE;\n    background: '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-end-left:after {\n    border-right: 13px solid '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-start-right:after {\n    border-left: 13px solid '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-end-left:after {\n    border-right: 13px solid '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-start-right:after {\n    border-left: 13px solid '{{primary-default}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label {\n  color: '{{foreground-3}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg {\n  fill: '{{foreground-1}}'; }\n")}(),function(){"use strict";function e(e,t){function n(e,n){var a=n.mdEventClick?t(n.mdEventClick,null,!0):void 0;return e.append("<md-event-calendar-month></md-event-calendar-month>"),function(e,t,n,d){function l(){var e=c.$viewValue||c.$modelValue||[];o.selectedEvents=[].concat(e)}var o=d[0],c=d[1];r&&(t.addClass("_md"),r(t)),o.callEventClick=function(t,r){n.mdEventClick&&a(e.$parent,{$event:t,$selectedEvent:r})},c&&(c.$render=l,o.ngModelCtrl=c)}}function a(e,t,n){function a(){l.date=e.getDateInNextMonth(l.date),l.monthDisplay=e.months[l.date.getMonth()],l.yearDisplay=l.date.getFullYear()}function r(){l.date=e.getDateInPreviousMonth(l.date),l.monthDisplay=e.months[l.date.getMonth()],l.yearDisplay=l.date.getFullYear()}function d(e,t){var n=l.events.filter(function(e){return e.$$mdEventId===t});return l.ngModelCtrl&&(l.ngModelCtrl.$setViewValue(n[0]),l.ngModelCtrl.$render()),l.callEventClick(e,n[0]),!0}var l=this;l.$element=t,l.labelProperty=n.mdLabel||"title",l.selectedEvents=[],l.today=e.createDateAtMidnight(),l.date=e.createDateAtMidnight(),l.monthDisplay=e.months[l.date.getMonth()],l.yearDisplay=l.date.getFullYear(),l.nextMonth=a,l.previousMonth=r,l.selectEvent=d}a.$inject=["$$mdEventCalendarUtil","$element","$attrs"];var r=e.has("$mdTheming")?e.get("$mdTheming"):void 0,d={restrict:"E",require:["mdEventCalendar","?ngModel"],scope:{events:"=mdEvents"},compile:n,controller:a,controllerAs:"mdEventCalendar",bindToController:!0};return d}e.$inject=["$injector","$parse"],angular.module("material.components.eventCalendar").directive("mdEventCalendar",e)}(),function(){"use strict";function e(e,n){function a(t){var a=t.date,r=t.selected||[],l=t.events?i(a,t.events):[],o=t.labelProperty,c=document.createDocumentFragment(),m=document.createElement("div");m.classList.add("md-event-calendar-show-more-container");var s=document.createElement("div");s.classList.add("md-event-calendar-show-more-content");var v=document.createElement("div");v.classList.add("md-event-calendar-show-more-date-label"),v.textContent=e.dates[a.getDate()];var u=document.createElement("div");return u.classList.add("md-event-calendar-show-more-close"),u.innerHTML=n.get("icons/ic_close_black_24px.svg"),u.setAttribute("md-show-more-close","true"),m.appendChild(v),m.appendChild(u),m.appendChild(s),c.appendChild(m),l.forEach(function(t){var n,l=e.isSameDay(a,t.start),c=!e.isValidDate(t.end)||e.isSameDay(a,t.end);n=l&&c?d("single",!0,t,o):l?d("start-right",!0,t,o):c?d("end-left",!0,t,o):d("continue",!0,t,o),r.every(function(e){return void 0===e.$$mdEventId||e.$$mdEventId!==t.$$mdEventId||(n.classList.add("md-selected"),!1)}),s.appendChild(n)}),c}function r(t){function n(t,n,r){var d=document.createElement("div");d.classList.add("md-event-calendar-month-cell");var l=document.createElement("div");l.classList.add("md-event-calendar-month-cell-spacer"),d.appendChild(l);var o=document.createElement("div");o.classList.add("md-event-calendar-month-cell-divider"),d.appendChild(o);var c=document.createElement("div");if(c.classList.add("md-event-calendar-month-cell-content"),d.appendChild(c),t){var i=document.createElement("div");i.classList.add("md-event-calendar-cell-data-label"),i.textContent=e.dates[t.getDate()],c.appendChild(i),a(t,n,r,c)}return d}function a(t,n,a,o){function c(){for(;h.indexOf(i)!==-1;)i+=1;return h.push(i),i}var i=0,m=!0,v=!1,h=[],p=s.filter(function(n){var a=e.isDateWithinRange(t,n.start,n.end||n.start);return!!a&&(n.$$place&&h.push(n.$$place),!0)});p.forEach(function(e){e.$$place||(e.$$place=c())}),i=0,p.sort(function(e,t){return e.$$place>t.$$place?1:e.$$place<t.$$place?-1:0}).every(function(c,s){var h,g=e.isSameDay(t,c.start),E=!e.isValidDate(c.end)||e.isSameDay(t,c.end);return m&&c.$$place>0?l(c.$$place,o):c.$$place>i+1&&l(c.$$place-(i+1),o),m=!1,v=!0,i=c.$$place,c.$$hide===!0||i+1>=f&&s!==p.length-1?(c.$$hide=!0,o.appendChild(r(p.length-s,t)),!1):(h=g&&E?d("single",!0,c,u):g?d("start",!0,c,u):E&&0===n?d("end-left",!1,c,u):E?d("end",!1,c,u):0===n?d("continue-left",!0,c,u):6===n?d("continue-right",!1,c,u):d("continue",!1,c,u),a.every(function(e){return void 0===e.$$mdEventId||e.$$mdEventId!==c.$$mdEventId||(h.classList.add("md-selected"),!1)}),o.appendChild(h),!0)}),v===!0&&o.classList.add("md-has-events")}function r(e,t){var n=document.createElement("div");return n.classList.add("md-event-calendar-cell-event-show-more-link"),n.textContent=e+" more",n.setAttribute("md-show-more",t.toISOString()),n}function o(e){var t=document.createElement("div");return t.classList.add("md-event-calendar-month-row"),t}var i=e.isValidDate(t.date)?t.date:new Date,s=t.events?c(i,t.events):[],v=t.selected||[],u=t.labelProperty,h=t.bounds.width/7,f=Math.floor((h-27)/27);s.forEach(m);var p=e.getFirstDateOfMonth(i),g=(p.getDay()+7)%7,E=e.getNumberOfDaysInMonth(i),$=document.createDocumentFragment(),C=1,w=0,D=document.createElement("div");D.classList.add("md-event-calendar-month-row-header");var b=o(C);$.appendChild(D),$.appendChild(b),e.days.forEach(function(e){var t=document.createElement("div");t.classList.add("md-event-calendar-month-cell-header"),t.textContent=e.slice(0,3).toLowerCase(),D.appendChild(t)}),g<=2||(w=3);for(var y=0;y<g;)b.appendChild(n()),y+=1;for(var M=g,_=p,A=1;A<=E;){7===M&&(M=0,C++,b=o(C),$.appendChild(b)),_.setDate(A);var T=n(_,M,v);b.appendChild(T),M+=1,A+=1}for(;b.childNodes.length<7;)b.appendChild(n());return $}function d(t,n,a,r){var d=o(a),l=document.createElement("div");if(l.classList.add("md-event-calendar-cell-event"),l.classList.add("md-"+t),l.setAttribute("md-event-id",d),n===!0){if(t.indexOf("continue")===-1&&a.allDay!==!0){var c=document.createElement("span");c.classList.add("md-event-calendar-cell-event-time"),c.textContent=e.formatEventTime(a.start),l.appendChild(c)}var i=document.createElement("span");i.textContent=a[r],l.appendChild(i)}return l}function l(e,t){var n=document.createElement("div");n.classList.add("md-event-calendar-cell-event-spacer"),n.style.minHeight=23*e+4*(e-1),t.appendChild(n)}function o(e){return angular.isObject(e)?"object_"+(e.$$mdEventId||(e.$$mdEventId=++t)):e}function c(t,n){return n&&n.length?n.filter(function(n){var a=e.isValidDate(n.start),r=e.isValidDate(n.end),d=e.isSameMonthAndYear(t,n.start);return a&&r?d||e.isSameMonthAndYear(t,n.end):d}).sort(function(e,t){return e=new Date(e.start),t=new Date(t.start),e>t?1:e<t?-1:0}):[]}function i(t,n){return n&&n.length?n.filter(function(n){return e.isDateWithinRange(t,n.start,n.end||n.start)}).sort(function(e,t){return e=new Date(e.start),t=new Date(t.start),e>t?1:e<t?-1:0}):[]}function m(e){e.$$hide=void 0,e.$$place=void 0}var s={month:r,showMore:a};return s}e.$inject=["$$mdEventCalendarUtil","$templateCache"],angular.module("material.components.eventCalendar").factory("$$mdEventCalendarBuilder",e);var t=0}(),function(){"use strict";function e(e,t,n){function a(a,r,d,l){function o(){var t=e.month({date:m.date,events:m.events,selected:m.selectedEvents,labelProperty:m.labelProperty,bounds:{width:m.$element[0].offsetWidth}});r.empty(),r.append(t)}function c(t,n){var a=e.showMore({date:n,selected:m.selectedEvents,events:m.events,labelProperty:m.labelProperty});angular.element(t).parent().parent().append(a)}function i(e){return parseInt(e.replace("object_",""))}var m=l,s=n.throttle(function(){a.$evalAsync(function(){o()})});a.$watch(function(){return m.date},o),a.$watch(function(){return m.events},function(e,t){e!==t&&o()},!0),a.$watch(function(){return m.selectedEvents},function(e,t){e!==t&&o()},!0),angular.element(t).on("resize",s),a.$on("$destroy",function(){angular.element(t).off("resize",s)}),r.on("click",function(e){var t=e.target.getAttribute("md-event-id"),n=e.target.getAttribute("md-show-more"),r=e.target.getAttribute("md-show-more-close");if(t){i(t);a.$apply(function(){m.selectEvent(e,i(t))})}n&&c(e.target,new Date(n)),r&&angular.element(e.target.parentNode).remove()})}var r={restrict:"E",require:"^mdEventCalendar",link:a};return r}e.$inject=["$$mdEventCalendarBuilder","$window","$$rAF"],angular.module("material.components.eventCalendar").directive("mdEventCalendarMonth",e)}(),function(){"use strict";function e(){var e={restrict:"E",require:"^mdEventCalendar",template:'<md-button class="md-icon-button" ng-click="mdEventCalendar.nextMonth()" aria-label="mext month"><div class="md-arrow" ng-include="\'icons/ic_keyboard_arrow_right_black_24px.svg\'"></div></md-button>'};return e}angular.module("material.components.eventCalendar").directive("mdEventCalendarNext",e)}(),function(){"use strict";function e(){var e={restrict:"E",require:"^mdEventCalendar",template:'<md-button class="md-icon-button" ng-click="mdEventCalendar.previousMonth()" aria-label="previous month"><div class="md-arrow md-left-arrow" ng-include="\'icons/ic_keyboard_arrow_right_black_24px.svg\'"></div></md-button>'};return e}angular.module("material.components.eventCalendar").directive("mdEventCalendarPrev",e)}(),function(){"use strict";function e(){function e(e,t,n,a){e.mdEventCalendar=a}var t={restrict:"E",require:"^mdEventCalendar",template:'<div class="md-event-calendar-header-label">{{mdEventCalendar.monthDisplay + " " + mdEventCalendar.yearDisplay}}</div>',link:e};return t}angular.module("material.components.eventCalendar").directive("mdEventCalendarTitle",e)}(),function(){"use strict";function e(e,t,n){function a(e){return p(e,"h:mm a")}function r(e,t,n){var a=c(e),r=o(t)?c(t):null,d=o(n)?c(n):null;return(!r||r<=a)&&(!d||d>=a)}function d(e){return"Week "+e}function l(e){o(e)&&e.setHours(0,0,0,0)}function o(e){return e&&e.getTime&&!isNaN(e.getTime())}function c(e){var t;return t=void 0===e?new Date:new Date(e),l(t),t}function i(e){return new Date(e.getFullYear(),e.getMonth()+1,1)}function m(e){return new Date(e.getFullYear(),e.getMonth()-1,1)}function s(e){return new Date(e.getFullYear(),e.getMonth(),1)}function v(e){return new Date(e.getFullYear(),e.getMonth()+1,0).getDate()}function u(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}function h(e,t){return e.getDate()==t.getDate()&&u(e,t)}for(var f=e.has("$mdDateLocale")?e.get("$mdDateLocale"):void 0,p=n("date"),g=f?f.months:t.DATETIME_FORMATS.MONTH,E=f?f.shortMonths:t.DATETIME_FORMATS.SHORTMONTH,$=f?f.days:t.DATETIME_FORMATS.DAY,C=f?f.shortDays:t.DATETIME_FORMATS.SHORTDAY.map(function(e){return e.substring(0,1)}),w=Array(32),D=1;D<=31;D++)w[D]=D;var b={months:g,shortMonths:E,days:$,dates:f?f.dates:w,shortDays:C,isValidDate:o,createDateAtMidnight:c,getDateInNextMonth:i,getDateInPreviousMonth:m,getFirstDateOfMonth:s,getNumberOfDaysInMonth:v,weekNumberFormatter:f?f.weekNumberFormatter:d,isSameMonthAndYear:u,isSameDay:h,isDateWithinRange:r,formatEventTime:a};return b}e.$inject=["$injector","$locale","$filter"],angular.module("material.components.eventCalendar").factory("$$mdEventCalendarUtil",e)}();
+!function(){"use strict";function e(e,n,a){var r;e.has("$mdThemingProvider")?(r=e.get("$mdThemingProvider"),r.registerStyles(a)):n.decorator("$$rAF",["$delegate",t])}function t(e){return e.throttle=function(t){var n,a,r,d;return function(){n=arguments,d=this,r=t,a||(a=!0,e(function(){r.apply(d,Array.prototype.slice.call(n)),a=!1}))}},e}e.$inject=["$injector","$provide","EVENT_CALENDAR_THEME"],angular.module("material.components.eventCalendar",[]).config(e)}(),function(){"use strict";angular.module("material.components.eventCalendar").run(["$templateCache",function(e){e.put("icons/ic_close_black_24px.svg",'<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>'),e.put("icons/ic_keyboard_arrow_right_black_24px.svg",'<svg fill="#EEEEEE" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/>\n    <path d="M0-.25h24v24H0z" fill="none"/>\n</svg>\n')}])}(),function(){"use strict";angular.module("material.components.eventCalendar").constant("EVENT_CALENDAR_THEME","md-event-calendar._md md-event-calendar-header {\n  color: '{{foreground-1}}';\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-header md-event-calendar-next .md-arrow svg, md-event-calendar._md md-event-calendar-header md-event-calendar-prev .md-arrow svg {\n    fill: '{{foreground-2}}'; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row-header {\n  color: '{{foreground-3}}';\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row {\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell-divider {\n    border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell {\n    border-color: '{{foreground-4}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {\n      color: '{{foreground-3}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {\n      color: '{{primary-default}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.different-month {\n      background: '{{background-hue-2}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today {\n      box-shadow: inset 0px 0px 0px 1px '{{primary-default}}'; }\n      md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {\n        color: '{{primary-default}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {\n      border-color: '{{foreground-4}}'; }\n\nmd-event-calendar._md .md-event-calendar-cell-event {\n  background: '{{foreground-4}}';\n  color: '{{background-900}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected {\n    color: #EEE;\n    background: '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-end-left:after {\n    border-right-color: '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-start-right:after {\n    border-left-color: '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-end-left:after {\n    border-right-color: '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-start-right:after {\n    border-left-color: '{{primary-default}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label {\n  color: '{{foreground-3}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg {\n  fill: '{{foreground-1}}'; }\n\nmd-event-calendar._md.md-primary md-event-calendar-header {\n  color: '{{background-100}}';\n  background: '{{primary-default}}'; }\n  md-event-calendar._md.md-primary md-event-calendar-header md-event-calendar-next .md-arrow svg, md-event-calendar._md.md-primary md-event-calendar-header md-event-calendar-prev .md-arrow svg {\n    fill: '{{background-100}}'; }\n\nmd-event-calendar._md.md-primary md-event-calendar-month .md-event-calendar-month-row-header {\n  color: '{{background-100}}';\n  background: '{{primary-default}}'; }\n")}(),function(){"use strict";function e(e,t){function n(e,n){var a=n.mdEventClick?t(n.mdEventClick,null,!0):void 0;return e.append("<md-event-calendar-month></md-event-calendar-month>"),function(e,t,n,d){function l(){var e=c.$viewValue||c.$modelValue||[];o.selectedEvents=[].concat(e)}var o=d[0],c=d[1];r&&(t.addClass("_md"),r(t)),o.callEventClick=function(t,r){n.mdEventClick&&a(e.$parent,{$event:t,$selectedEvent:r})},c&&(c.$render=l,o.ngModelCtrl=c)}}function a(e,t,n){function a(){l.date=e.getDateInNextMonth(l.date),l.monthDisplay=e.months[l.date.getMonth()],l.yearDisplay=l.date.getFullYear()}function r(){l.date=e.getDateInPreviousMonth(l.date),l.monthDisplay=e.months[l.date.getMonth()],l.yearDisplay=l.date.getFullYear()}function d(e,t){var n=l.events.filter(function(e){return e.$$mdEventId===t});return l.ngModelCtrl&&(l.ngModelCtrl.$setViewValue(n[0]),l.ngModelCtrl.$render()),l.callEventClick(e,n[0]),!0}var l=this;l.$element=t,l.labelProperty=n.mdLabel||"title",l.selectedEvents=[],l.today=e.createDateAtMidnight(),l.date=e.createDateAtMidnight(),l.monthDisplay=e.months[l.date.getMonth()],l.yearDisplay=l.date.getFullYear(),l.nextMonth=a,l.previousMonth=r,l.selectEvent=d}a.$inject=["$$mdEventCalendarUtil","$element","$attrs"];var r=e.has("$mdTheming")?e.get("$mdTheming"):void 0,d={restrict:"E",require:["mdEventCalendar","?ngModel"],scope:{events:"=mdEvents"},compile:n,controller:a,controllerAs:"mdEventCalendar",bindToController:!0};return d}e.$inject=["$injector","$parse"],angular.module("material.components.eventCalendar").directive("mdEventCalendar",e)}(),function(){"use strict";function e(e,n){function a(t){var a=t.date,d=t.selected||[],l=t.events?r(a,t.events):[],o=t.labelProperty,c=document.createDocumentFragment(),i=document.createElement("div");i.classList.add("md-event-calendar-show-more-container");var s=document.createElement("div");s.classList.add("md-event-calendar-show-more-content");var v=document.createElement("div");v.classList.add("md-event-calendar-show-more-date-label"),v.textContent=e.dates[a.getDate()];var u=document.createElement("div");return u.classList.add("md-event-calendar-show-more-close"),u.innerHTML=n.get("icons/ic_close_black_24px.svg"),u.setAttribute("md-show-more-close","true"),i.appendChild(v),i.appendChild(u),i.appendChild(s),c.appendChild(i),l.forEach(function(t){var n,r=e.isSameDay(a,t.start),l=!e.isValidDate(t.end)||e.isSameDay(a,t.end),c={labelProperty:o,selected:d};n=r&&l?m({className:"single",hasLabel:!0},t,c):r?m({className:"start-right",hasLabel:!0},t,c):l?m({className:"end-left",hasLabel:!0},t,c):m({className:"continue",hasLabel:!0},t,c),s.appendChild(n)}),c}function r(t,n){return n&&n.length?n.filter(function(n){return e.isDateWithinRange(t,n.start,n.end||n.start)}).sort(function(e,t){return e=new Date(e.start),t=new Date(t.start),e>t?1:e<t?-1:0}):[]}function d(t){var n,a=e.createDateAtMidnight(),r=e.isValidDate(t.date)?t.date:new Date,d=e.getFirstDateOfMonth(r),o=(d.getDay()+7)%7,c=e.getNumberOfDaysInMonth(r),i=p(r,t.events);i.forEach(E);var m=t.selected||[],s=f(),v=g();s.appendChild(v);var u=!0,h=t.bounds.width/7-48,y=Math.floor(h/24),$=0;if(o>0)for(n=e.getFirstDateOfMonth(r),n.setDate(n.getDate()-o);$<o;)v.appendChild(l({date:n,today:a,dayOfWeek:$,differentMonth:!0,events:i,isFirstDay:u,isLastDay:!1,maxEvents:y,selected:m,labelProperty:t.labelProperty})),u=!1,$+=1,n.setDate(n.getDate()+1);var D=o,b=d,w=!1;for($=1;$<=c;)7===D&&(D=0,v=g(),u=!1,s.appendChild(v)),6===D&&$===c&&(w=!0),b.setDate($),v.appendChild(l({date:b,today:a,dayOfWeek:D,events:i,isFirstDay:u,isLastDay:w,maxEvents:y,selected:m,labelProperty:t.labelProperty})),u=!1,D+=1,$+=1;for(;v.childNodes.length<7;)6===D&&(w=!0),b.setDate($),v.appendChild(l({date:b,today:a,dayOfWeek:D,differentMonth:!0,events:i,isFirstDay:!1,isLastDay:w,maxEvents:y,selected:m,labelProperty:t.labelProperty})),D+=1,$+=1;return s}function l(t){var n=document.createElement("div");n.classList.add("md-event-calendar-month-cell"),t.differentMonth===!0&&n.classList.add("different-month"),e.isSameDay(t.date,t.today)&&n.classList.add("today");var a=document.createElement("div");a.classList.add("md-event-calendar-month-cell-spacer"),n.appendChild(a);var r=document.createElement("div");r.classList.add("md-event-calendar-month-cell-divider"),n.appendChild(r);var d=document.createElement("div");d.classList.add("md-event-calendar-month-cell-content"),n.appendChild(d);var l=document.createElement("div");return l.classList.add("md-event-calendar-cell-data-label"),l.textContent=e.dates[t.date.getDate()],d.appendChild(l),o(d,t),n}function o(e,t){var n,a=0,r=!1,d=u(t.date,t.events);d=h(d,t.dayOfWeek),d.every(function(l,o){var s=v(l,t),u=l.$$place-a;for(r=!0,a=l.$$place+1,n=0;n<u;){if(a>=t.maxEvents)return e.appendChild(c(d.length-o,t.date)),!1;e.appendChild(i()),n+=1}return a>=t.maxEvents?(e.appendChild(c(d.length-o,t.date)),!1):(e.appendChild(m(s,l,t)),!0)}),r===!0&&e.classList.add("md-has-events")}function c(e,t){var n=document.createElement("div");return n.classList.add("md-event-calendar-cell-event-show-more-link"),n.textContent=e+" more",n.setAttribute("md-show-more",t.toISOString()),n}function i(){var e=document.createElement("div");return e.classList.add("md-event-calendar-cell-event-spacer"),e}function m(t,n,a){var r=s(n),d=document.createElement("div");if(d.classList.add("md-event-calendar-cell-event"),d.classList.add("md-"+t.className),d.setAttribute("md-event-id",r),t.hasLabel===!0){if(t.allDay!==!0){var l=document.createElement("span");l.classList.add("md-event-calendar-cell-event-time"),l.textContent=e.formatEventTime(n.start),d.appendChild(l)}var o=document.createElement("span");o.textContent=n[a.labelProperty],d.appendChild(o)}return a.selected.every(function(e){return void 0===e.$$mdEventId||e.$$mdEventId!==n.$$mdEventId||(d.classList.add("md-selected"),!1)}),d}function s(e){return angular.isObject(e)?"object_"+(e.$$mdEventId||(e.$$mdEventId=++t)):"id_"+ ++t}function v(t,n){var a,r,d=e.isSameDay(n.date,t.start),l=!e.isValidDate(t.end)||e.isSameDay(n.date,t.end);return d&&(n.allDay||l)?(a="single",r=!0):d?(a="start",r=!0):l&&0===n.dayOfWeek?(a="end-left",r=!0):l?(a="end",r=n.isFirstDay):0===n.dayOfWeek?(a="continue-left",r=!0):6===n.dayOfWeek?(a="continue-right",r=!1):(a="continue",r=!1),{className:a,hasLabel:r,allDay:t.allDay||!1}}function u(t,n){return n.filter(function(n){return e.isDateWithinRange(t,n.start,n.end||n.start)})}function h(e,t){function n(){for(var e=0;a.indexOf(e)!==-1;)e++;return a.push(e),e}var a=[],r=e.sort(function(e,t){return e.end>t.end?-1:e.end<t.end?1:0});return r.forEach(function(e){0===t?e.$$place=void 0:void 0!==e.$$place&&a.push(e.$$place)}),r.forEach(function(e){void 0===e.$$place&&(e.$$place=n())}),r.sort(function(e,t){return e.$$place>t.$$place?1:e.$$place<t.$$place?-1:0})}function f(){var t=document.createDocumentFragment(),n=document.createElement("div");return n.classList.add("md-event-calendar-month-row-header"),t.appendChild(n),e.days.forEach(function(e){var t=document.createElement("div");t.classList.add("md-event-calendar-month-cell-header"),t.textContent=e.slice(0,3).toLowerCase(),n.appendChild(t)}),t}function g(){var e=document.createElement("div");return e.classList.add("md-event-calendar-month-row"),e}function p(t,n){if(!n||!n.length)return[];var a=e.getFirstDateOfMonth(t).getDate(-6),r=e.getFirstDateOfMonth(t).getDate(37);return n.filter(function(t){return!!e.isValidDate(t.start)&&(!!e.isDateWithinRange(t.start,a,r)||!!e.isValidDate(t.end)&&!!e.isDateWithinRange(t.end,a,r))}).sort(function(e,t){return e=new Date(e.start),t=new Date(t.start),e>t?1:e<t?-1:0})}function E(e){e.$$hide=void 0,e.$$place=void 0}var y={month:d,showMore:a};return y}e.$inject=["$$mdEventCalendarUtil","$templateCache"],angular.module("material.components.eventCalendar").factory("$$mdEventCalendarBuilder",e);var t=0}(),function(){"use strict";function e(e,t,n){function a(a,r,d,l){function o(){var t=e.month({date:m.date,events:m.events,selected:m.selectedEvents,labelProperty:m.labelProperty,bounds:{width:m.$element[0].offsetWidth}});r.empty(),r.append(t)}function c(t,n){var a=e.showMore({date:n,selected:m.selectedEvents,events:m.events,labelProperty:m.labelProperty});angular.element(t).parent().parent().append(a)}function i(e){return parseInt(e.replace("object_",""))}var m=l,s=n.throttle(function(){a.$evalAsync(function(){o()})});a.$watch(function(){return m.date},o),a.$watch(function(){return m.events},function(e,t){e!==t&&o()},!0),a.$watch(function(){return m.selectedEvents},function(e,t){e!==t&&o()},!0),angular.element(t).on("resize",s),a.$on("$destroy",function(){angular.element(t).off("resize",s)}),r.on("click",function(e){var t=e.target.getAttribute("md-event-id"),n=e.target.getAttribute("md-show-more"),r=e.target.getAttribute("md-show-more-close");if(t){i(t);a.$apply(function(){m.selectEvent(e,i(t))})}n&&c(e.target,new Date(n)),r&&angular.element(e.target.parentNode).remove()})}var r={restrict:"E",require:"^mdEventCalendar",link:a};return r}e.$inject=["$$mdEventCalendarBuilder","$window","$$rAF"],angular.module("material.components.eventCalendar").directive("mdEventCalendarMonth",e)}(),function(){"use strict";function e(){var e={restrict:"E",require:"^mdEventCalendar",template:'<md-button class="md-icon-button" ng-click="mdEventCalendar.nextMonth()" aria-label="mext month"><div class="md-arrow" ng-include="\'icons/ic_keyboard_arrow_right_black_24px.svg\'"></div></md-button>'};return e}angular.module("material.components.eventCalendar").directive("mdEventCalendarNext",e)}(),function(){"use strict";function e(){var e={restrict:"E",require:"^mdEventCalendar",template:'<md-button class="md-icon-button" ng-click="mdEventCalendar.previousMonth()" aria-label="previous month"><div class="md-arrow md-left-arrow" ng-include="\'icons/ic_keyboard_arrow_right_black_24px.svg\'"></div></md-button>'};return e}angular.module("material.components.eventCalendar").directive("mdEventCalendarPrev",e)}(),function(){"use strict";function e(){function e(e,t,n,a){e.mdEventCalendar=a}var t={restrict:"E",require:"^mdEventCalendar",template:'<div class="md-event-calendar-header-label">{{mdEventCalendar.monthDisplay + " " + mdEventCalendar.yearDisplay}}</div>',link:e};return t}angular.module("material.components.eventCalendar").directive("mdEventCalendarTitle",e)}(),function(){"use strict";function e(e,t,n){function a(e){return g(e,"h:mm a")}function r(e,t,n){var a=c(e),r=o(t)?c(t):null,d=o(n)?c(n):null;return(!r||r<=a)&&(!d||d>=a)}function d(e){return"Week "+e}function l(e){o(e)&&e.setHours(0,0,0,0)}function o(e){return e&&e.getTime&&!isNaN(e.getTime())}function c(e){var t;return t=void 0===e?new Date:new Date(e),l(t),t}function i(e){return new Date(e.getFullYear(),e.getMonth()+1,1)}function m(e){return new Date(e.getFullYear(),e.getMonth()-1,1)}function s(e){return new Date(e.getFullYear(),e.getMonth(),1)}function v(e){return new Date(e.getFullYear(),e.getMonth()+1,0).getDate()}function u(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}function h(e,t){return e.getDate()==t.getDate()&&u(e,t)}for(var f=e.has("$mdDateLocale")?e.get("$mdDateLocale"):void 0,g=n("date"),p=f?f.months:t.DATETIME_FORMATS.MONTH,E=f?f.shortMonths:t.DATETIME_FORMATS.SHORTMONTH,y=f?f.days:t.DATETIME_FORMATS.DAY,$=f?f.shortDays:t.DATETIME_FORMATS.SHORTDAY.map(function(e){return e.substring(0,1)}),D=Array(32),b=1;b<=31;b++)D[b]=b;var w={months:p,shortMonths:E,days:y,dates:f?f.dates:D,shortDays:$,isValidDate:o,createDateAtMidnight:c,getDateInNextMonth:i,getDateInPreviousMonth:m,getFirstDateOfMonth:s,getNumberOfDaysInMonth:v,weekNumberFormatter:f?f.weekNumberFormatter:d,isSameMonthAndYear:u,isSameDay:h,isDateWithinRange:r,formatEventTime:a};return w}e.$inject=["$injector","$locale","$filter"],angular.module("material.components.eventCalendar").factory("$$mdEventCalendarUtil",e)}();

package.json

 {
   "name": "angular-material-event-calendar",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "author": "Ben Rubin",
@@ -5,0 +5,0 @@ "description": "Angular material event calander component",

public/eventCalendar-colors.css

 md-event-calendar:not(._md) md-event-calendar-header {
-  color: #FFF;
-  background: #AAA; }
-  md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-next .md-arrow, md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-prev .md-arrow {
-    fill: #333; }
+  color: #666;
+  background: #FFF;
+  border-color: #DDD; }
+  md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-next .md-arrow svg, md-event-calendar:not(._md) md-event-calendar-header md-event-calendar-prev .md-arrow svg {
+    fill: #666; }
 
 md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row-header {
-  color: #FFF;
-  background: #AAA; }
+  color: #999;
+  background: #FFF;
+  border-color: #DDD; }
 
@@ -18,12 +20,20 @@ md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row {
     border-color: #DDD; }
-    md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {
-      border-color: #DDD; }
     md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {
-      color: #666; }
+      color: #999; }
     md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {
       color: #4189b8; }
+    md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.different-month {
+      background: #F5F5F5; }
+    md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today {
+      box-shadow: inset 0px 0px 0px 1px #AAA; }
+      md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {
+        color: #666; }
+      md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today .md-event-calendar-month-cell-divider {
+        border-color: #AAA; }
+    md-event-calendar:not(._md) md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {
+      border-color: #DDD; }
 
 md-event-calendar:not(._md) .md-event-calendar-cell-event {
-  background: #EEE;
-  color: #333; }
+  background: #DDD;
+  color: #666; }
   md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected {
@@ -33,14 +43,14 @@ color: #EEE;
   md-event-calendar:not(._md) .md-event-calendar-cell-event.md-continue-left:after, md-event-calendar:not(._md) .md-event-calendar-cell-event.md-end-left:after {
-    border-right: 13px solid #EEE; }
+    border-right-color: #DDD; }
   md-event-calendar:not(._md) .md-event-calendar-cell-event.md-continue-right:after, md-event-calendar:not(._md) .md-event-calendar-cell-event.md-start-right:after {
-    border-left: 13px solid #EEE; }
+    border-left-color: #DDD; }
   md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-continue-left:after, md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-end-left:after {
-    border-right: 13px solid #888; }
+    border-right-color: #888; }
   md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-continue-right:after, md-event-calendar:not(._md) .md-event-calendar-cell-event.md-selected.md-start-right:after {
-    border-left: 13px solid #888; }
+    border-left-color: #888; }
 
 md-event-calendar:not(._md) .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label {
-  color: #666; }
+  color: #999; }
 
 md-event-calendar:not(._md) .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg {
-  fill: #666; }
+  fill: #999; }

public/eventCalendar.css

@@ -14,3 +14,5 @@ md-event-calendar {
         -ms-flex-align: center;
-            align-items: center; }
+            align-items: center;
+    border-style: solid;
+    border-width: 1px 1px 0 1px; }
     md-event-calendar md-event-calendar-header.md-center {
@@ -22,3 +24,3 @@ -webkit-box-pack: center;
       display: block;
-      min-width: 150px;
+      min-width: 170px;
       text-align: center;
@@ -53,3 +55,5 @@ font-size: 20px; }
   font-weight: 500;
-  padding-bottom: 12px; }
+  padding-bottom: 12px;
+  border-style: solid;
+  border-width: 0 1px 1px 1px; }
   md-event-calendar md-event-calendar-month .md-event-calendar-month-row-header .md-event-calendar-month-cell-header {
@@ -79,5 +83,2 @@ -webkit-box-flex: 1;
             flex: 1; }
-    md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {
-      border-style: solid;
-      border-width: 0 1px 0 0; }
     md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-spacer {
@@ -100,5 +101,6 @@ margin-top: 100%; }
         font-size: 13px;
-        padding: 6px; }
+        padding: 8px; }
       md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-spacer {
-        margin: 4px 0 4px 0; }
+        margin: 4px 0 4px 0;
+        height: 23px; }
       md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {
@@ -109,2 +111,5 @@ font-size: 13px;
         cursor: pointer; }
+    md-event-calendar md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {
+      border-style: solid;
+      border-width: 0 1px 0 0; }
 
@@ -114,3 +119,4 @@ md-event-calendar .md-event-calendar-cell-event {
   min-height: 15px;
-  padding: 4px; }
+  padding: 4px;
+  cursor: pointer; }
   md-event-calendar .md-event-calendar-cell-event.md-single {
@@ -135,3 +141,3 @@ margin: 4px;
   md-event-calendar .md-event-calendar-cell-event.md-end-left {
-    margin: 4px 4px 4px 13px;
+    margin: 4px 13px 4px 13px;
     border-radius: 0 2px 2px 0; }
@@ -157,3 +163,4 @@ md-event-calendar .md-event-calendar-cell-event.md-continue, md-event-calendar .md-event-calendar-cell-event.md-continue-both {
     border-top: 12px solid transparent;
-    border-bottom: 11.5px solid transparent; }
+    border-bottom: 11.5px solid transparent;
+    border-left: 13px solid #EEE; }
   md-event-calendar .md-event-calendar-cell-event.md-continue-left:after, md-event-calendar .md-event-calendar-cell-event.md-end-left:after {
@@ -167,3 +174,4 @@ content: '';
     border-top: 12px solid transparent;
-    border-bottom: 11.5px solid transparent; }
+    border-bottom: 11.5px solid transparent;
+    border-right: 13px solid #EEE; }
   md-event-calendar .md-event-calendar-cell-event .md-event-calendar-cell-event-time {
@@ -176,2 +184,11 @@ font-weight: 500;
 
+md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-single, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-start-right {
+  padding-left: 16px; }
+
+md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-single, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-start-right {
+  margin-left: 0; }
+
+md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-single, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end, md-event-calendar .md-event-calendar-show-more-content .md-event-calendar-cell-event.md-end-left {
+  margin-right: 0; }
+
 md-event-calendar .md-event-calendar-show-more-container {
@@ -205,3 +222,3 @@ position: absolute;
     padding: 6px;
-    margin-left: -13px;
-    margin-top: -7px; }
+    margin-left: -11px;
+    margin-top: -5px; }

public/eventCalendar.js

@@ -16,2 +16,4 @@ (function(){"use strict";/**
   var $mdThemingProvider;
+
+  // if using angular material, then register the event theme css
   if ($injector.has('$mdThemingProvider')) {
@@ -26,2 +28,3 @@ $mdThemingProvider = $injector.get('$mdThemingProvider');
 
+// polly fill rAF throttle if not using angular material
 function rAFDecorator($delegate) {
@@ -28,0 +31,0 @@ $delegate.throttle = function(cb) {

public/js/_theme.js

 (function(){"use strict";angular.module("material.components.eventCalendar")
 
-.constant("EVENT_CALENDAR_THEME", "md-event-calendar._md md-event-calendar-header {\n  color: #EEE;\n  background: '{{primary-default}}'; }\n  md-event-calendar._md md-event-calendar-header md-event-calendar-next .md-arrow, md-event-calendar._md md-event-calendar-header md-event-calendar-prev .md-arrow {\n    fill: #EEE; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row-header {\n  color: #EEE;\n  background: '{{primary-default}}'; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row {\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell-divider {\n    border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell {\n    border-color: '{{foreground-4}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {\n      border-color: '{{foreground-4}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {\n      color: '{{foreground-3}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {\n      color: '{{primary-default}}'; }\n\nmd-event-calendar._md .md-event-calendar-cell-event {\n  background: '{{foreground-4}}';\n  color: '{{background-900}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected {\n    color: #EEE;\n    background: '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-end-left:after {\n    border-right: 13px solid '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-start-right:after {\n    border-left: 13px solid '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-end-left:after {\n    border-right: 13px solid '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-start-right:after {\n    border-left: 13px solid '{{primary-default}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label {\n  color: '{{foreground-3}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg {\n  fill: '{{foreground-1}}'; }\n")
+.constant("EVENT_CALENDAR_THEME", "md-event-calendar._md md-event-calendar-header {\n  color: '{{foreground-1}}';\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-header md-event-calendar-next .md-arrow svg, md-event-calendar._md md-event-calendar-header md-event-calendar-prev .md-arrow svg {\n    fill: '{{foreground-2}}'; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row-header {\n  color: '{{foreground-3}}';\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n\nmd-event-calendar._md md-event-calendar-month .md-event-calendar-month-row {\n  background: '{{background-hue-1}}';\n  border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell-divider {\n    border-color: '{{foreground-4}}'; }\n  md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell {\n    border-color: '{{foreground-4}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {\n      color: '{{foreground-3}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell .md-event-calendar-month-cell-content .md-event-calendar-cell-event-show-more-link {\n      color: '{{primary-default}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.different-month {\n      background: '{{background-hue-2}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today {\n      box-shadow: inset 0px 0px 0px 1px '{{primary-default}}'; }\n      md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell.today .md-event-calendar-month-cell-content .md-event-calendar-cell-data-label {\n        color: '{{primary-default}}'; }\n    md-event-calendar._md md-event-calendar-month .md-event-calendar-month-row .md-event-calendar-month-cell:last-child {\n      border-color: '{{foreground-4}}'; }\n\nmd-event-calendar._md .md-event-calendar-cell-event {\n  background: '{{foreground-4}}';\n  color: '{{background-900}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected {\n    color: #EEE;\n    background: '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-end-left:after {\n    border-right-color: '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-start-right:after {\n    border-left-color: '{{foreground-4}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-left:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-end-left:after {\n    border-right-color: '{{primary-default}}'; }\n  md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-continue-right:after, md-event-calendar._md .md-event-calendar-cell-event.md-selected.md-start-right:after {\n    border-left-color: '{{primary-default}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-date-label {\n  color: '{{foreground-3}}'; }\n\nmd-event-calendar._md .md-event-calendar-show-more-container .md-event-calendar-show-more-close svg {\n  fill: '{{foreground-1}}'; }\n\nmd-event-calendar._md.md-primary md-event-calendar-header {\n  color: '{{background-100}}';\n  background: '{{primary-default}}'; }\n  md-event-calendar._md.md-primary md-event-calendar-header md-event-calendar-next .md-arrow svg, md-event-calendar._md.md-primary md-event-calendar-header md-event-calendar-prev .md-arrow svg {\n    fill: '{{background-100}}'; }\n\nmd-event-calendar._md.md-primary md-event-calendar-month .md-event-calendar-month-row-header {\n  color: '{{background-100}}';\n  background: '{{primary-default}}'; }\n")
 
 ;}());

public/js/eventCalendar.directive.js

@@ -21,6 +21,2 @@ (function(){"use strict";angular
     },
-    // template: '<div class="md-event-calendar">'+
-    //   '<md-event-calendar-header></md-event-calendar-header>'+
-    //   '<md-event-calendar-month></md-event-calendar-month>'+
-    // '</div>',
     compile: compile,
@@ -27,0 +23,0 @@ controller: controller,

public/js/eventCalendarBuilder.service.js

@@ -49,22 +49,17 @@ (function(){"use strict";angular
       var isEndThisDay = $$mdEventCalendarUtil.isValidDate(item.end) ? $$mdEventCalendarUtil.isSameDay(date, item.end) : true;
+      var eventOptions = {
+        labelProperty: labelProperty,
+        selected: selected
+      };
 
       if (isStartThisDay && isEndThisDay) {
-        eventElement = buildEventItem('single', true, item, labelProperty);
+        eventElement = createEventElement({className: 'single', hasLabel: true}, item, eventOptions);
       } else if (isStartThisDay) {
-        eventElement = buildEventItem('start-right', true, item, labelProperty);
+        eventElement = createEventElement({className: 'start-right', hasLabel: true}, item, eventOptions);
       } else if (isEndThisDay) {
-        eventElement = buildEventItem('end-left', true, item, labelProperty);
+        eventElement = createEventElement({className: 'end-left', hasLabel: true}, item, eventOptions);
       } else {
-        eventElement = buildEventItem('continue', true, item, labelProperty);
+        eventElement = createEventElement({className: 'continue', hasLabel: true}, item, eventOptions);
       }
 
-
-      selected.every(function (sel) {
-        if (sel.$$mdEventId !== undefined && sel.$$mdEventId === item.$$mdEventId) {
-          eventElement.classList.add('md-selected');
-          return false;
-        }
-        return true;
-      });
-
       content.appendChild(eventElement);
@@ -77,46 +72,69 @@ });
 
+  function filterEventsOnDay(date, events) {
+    return !events || !events.length ? [] : events.filter(function (item) {
+      return $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
+    }).sort(function(a, b) {
+      a = new Date(a.start);
+      b = new Date(b.start);
+      return a > b ? 1 : a < b ? -1 : 0;
+    });
+  }
 
-  function month(opts) {
-    var date = $$mdEventCalendarUtil.isValidDate(opts.date) ? opts.date : new Date();
-    var events = opts.events ? filterEventsOnMonth(date, opts.events) : [];
-    var selected = opts.selected || [];
-    var labelProperty = opts.labelProperty;
-    var cellSize = opts.bounds.width / 7;
-    var maxEvents = Math.floor((cellSize - 27) / 27);
-    events.forEach(cleanEvent);
 
+
+
+
+
+
+
+
+
+
+
+  function month(options) {
+    var calendarStartDate;
+    var today = $$mdEventCalendarUtil.createDateAtMidnight();
+    var date = $$mdEventCalendarUtil.isValidDate(options.date) ? options.date : new Date();
     var firstDayOfMonth = $$mdEventCalendarUtil.getFirstDateOfMonth(date);
     var firstDayOfTheWeek = (firstDayOfMonth.getDay() + 7) % 7;
     var numberOfDaysInMonth = $$mdEventCalendarUtil.getNumberOfDaysInMonth(date);
-    var monthBody = document.createDocumentFragment();
+    var events = filterCurrentCalendar(date, options.events);
+    events.forEach(cleanEvent);
+    var selected = options.selected  || [];
     var rowNumber = 1;
-    var blankCellOffset = 0;
-    var headerRow = document.createElement('div');
-    headerRow.classList.add('md-event-calendar-month-row-header');
-    var row = buildDateRow(rowNumber);
-    monthBody.appendChild(headerRow);
-    monthBody.appendChild(row);
+    var monthElement = createMonthElement();
+    var row = createRowElement();
+    monthElement.appendChild(row);
+    var firstCalendarDay = true;
+    var cellSize = (options.bounds.width / 7) - 48;
+    var maxEvents = Math.floor(cellSize / 24);
+    var d = 0;
 
-    $$mdEventCalendarUtil.days.forEach(function (name) {
-      var dayHeader = document.createElement('div');
-      dayHeader.classList.add('md-event-calendar-month-cell-header');
-      dayHeader.textContent = name.slice(0,3).toLowerCase();
-      headerRow.appendChild(dayHeader);
-    });
 
 
-
-    if (firstDayOfTheWeek <= 2) {
-    } else {
-      blankCellOffset = 3;
+    // days from last month
+    if (firstDayOfTheWeek > 0) {
+      calendarStartDate = $$mdEventCalendarUtil.getFirstDateOfMonth(date);
+      calendarStartDate.setDate(calendarStartDate.getDate() - firstDayOfTheWeek);
+      while (d < firstDayOfTheWeek) {
+        row.appendChild(createCellElement({
+          date: calendarStartDate,
+          today: today,
+          dayOfWeek: d,
+          differentMonth: true,
+          events: events,
+          isFirstDay: firstCalendarDay,
+          isLastDay: false,
+          maxEvents: maxEvents,
+          selected: selected,
+          labelProperty: options.labelProperty
+        }));
+        firstCalendarDay = false;
+        d += 1;
+        calendarStartDate.setDate(calendarStartDate.getDate() + 1);
+      }
     }
 
 
-    var i = 0;
-    while (i < firstDayOfTheWeek) {
-      row.appendChild(buildDateCell());
-      i += 1;
-    }
 
-
     // Add a cell for each day of the month, keeping track of the day of the week so that
@@ -126,3 +144,4 @@ // we know when to start a new row.
     var iterationDate = firstDayOfMonth;
-    var d = 1;
+    var lastCalendarDay = false;
+    d = 1;
     while (d <= numberOfDaysInMonth) {
@@ -132,11 +151,24 @@ // If we've reached the end of the week, start a new row.
         dayOfWeek = 0;
-        rowNumber++;
-        row = buildDateRow(rowNumber);
-        monthBody.appendChild(row);
+        row = createRowElement();
+        firstCalendarDay = false;
+        monthElement.appendChild(row);
       }
 
+      if (dayOfWeek === 6 && d === numberOfDaysInMonth) {
+        lastCalendarDay = true;
+      }
+
       iterationDate.setDate(d);
-      var cell = buildDateCell(iterationDate, dayOfWeek, selected);
-      row.appendChild(cell);
-
+      row.appendChild(createCellElement({
+        date: iterationDate,
+        today: today,
+        dayOfWeek: dayOfWeek,
+        events: events,
+        isFirstDay: firstCalendarDay,
+        isLastDay: lastCalendarDay,
+        maxEvents: maxEvents,
+        selected: selected,
+        labelProperty: options.labelProperty
+      }));
+      firstCalendarDay = false;
       dayOfWeek += 1;
@@ -146,159 +178,126 @@ d += 1;
 
-    // Ensure that the last row of the month has 7 cells.
+
+
+    // fill in the rest of the row with next month
     while (row.childNodes.length < 7) {
-      row.appendChild(buildDateCell());
+      if (dayOfWeek === 6) {
+        lastCalendarDay = true;
+      }
+      iterationDate.setDate(d);
+      row.appendChild(createCellElement({
+        date: iterationDate,
+        today: today,
+        dayOfWeek: dayOfWeek,
+        differentMonth: true,
+        events: events,
+        isFirstDay: false,
+        isLastDay: lastCalendarDay,
+        maxEvents: maxEvents,
+        selected: selected,
+        labelProperty: options.labelProperty
+      }));
+      dayOfWeek += 1;
+      d += 1;
     }
 
-    return monthBody;
 
+    return monthElement;
+  }
 
 
-    function buildDateCell(date, dayOfWeek, selected) {
-      var cell = document.createElement('div');
-      cell.classList.add('md-event-calendar-month-cell');
 
-      var cellSpacer = document.createElement('div');
-      cellSpacer.classList.add('md-event-calendar-month-cell-spacer');
-      cell.appendChild(cellSpacer);
+  function createCellElement(options) {
+    var cell = document.createElement('div');
+    cell.classList.add('md-event-calendar-month-cell');
+    if (options.differentMonth === true) { cell.classList.add('different-month'); }
+    if ($$mdEventCalendarUtil.isSameDay(options.date, options.today)) { cell.classList.add('today'); }
 
-      var divider = document.createElement('div');
-      divider.classList.add('md-event-calendar-month-cell-divider');
-      cell.appendChild(divider);
+    var cellSpacer = document.createElement('div');
+    cellSpacer.classList.add('md-event-calendar-month-cell-spacer');
+    cell.appendChild(cellSpacer);
 
-      var cellContent = document.createElement('div');
-      cellContent.classList.add('md-event-calendar-month-cell-content');
-      cell.appendChild(cellContent);
+    var divider = document.createElement('div');
+    divider.classList.add('md-event-calendar-month-cell-divider');
+    cell.appendChild(divider);
 
-      if (date) {
-        var dateLabel = document.createElement('div');
-        dateLabel.classList.add('md-event-calendar-cell-data-label');
-        dateLabel.textContent = $$mdEventCalendarUtil.dates[date.getDate()];
-        cellContent.appendChild(dateLabel);
-        buildEvents(date, dayOfWeek, selected, cellContent);
-      }
+    var cellContent = document.createElement('div');
+    cellContent.classList.add('md-event-calendar-month-cell-content');
+    cell.appendChild(cellContent);
 
-      return cell;
-    }
+    var dateLabel = document.createElement('div');
+    dateLabel.classList.add('md-event-calendar-cell-data-label');
+    dateLabel.textContent = $$mdEventCalendarUtil.dates[options.date.getDate()];
+    cellContent.appendChild(dateLabel);
 
+    createEventElements(cellContent, options);
 
+    return cell;
+  }
 
-    function buildEvents(date, dayOfWeek, selected, cell) {
-      var eventPlace = 0; // place in single day cell, from the first time used
-      var first = true;
-      var hasEvents = false;
 
-      var takenPlaces = [];
-      var validEvents = events.filter(function (item) {
-        var isInRange = $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
-        if (isInRange) {
-          if (item.$$place) { takenPlaces.push(item.$$place); }
-          return true;
-        } else { return false; }
-      });
-      validEvents.forEach(function(item) {
-        if (!item.$$place) {
-          item.$$place = getPlace();
-        }
-      });
 
-      eventPlace = 0;
-      validEvents.sort(function(a, b) {
-        if (a.$$place > b.$$place) { return 1; }
-        if (a.$$place < b.$$place) { return -1; }
-        return 0;
-      }).every(function (item, pos) {
-        var eventElement;
-        var isStartThisDay = $$mdEventCalendarUtil.isSameDay(date, item.start);
-        var isEndThisDay = $$mdEventCalendarUtil.isValidDate(item.end) ? $$mdEventCalendarUtil.isSameDay(date, item.end) : true;
-        if (first && item.$$place > 0) { addEventSpacer(item.$$place, cell); } // spacer if first event is from previous day and not at the top
-        else if (item.$$place > eventPlace + 1) { addEventSpacer((item.$$place - (eventPlace+1)), cell); } // spacer for gaps
-        first = false;
-        hasEvents = true;
-        eventPlace = item.$$place;
-
-
-        // if it doesn't fit add a link to see the rest
-        if (item.$$hide === true || ((eventPlace + 1) >= maxEvents && pos !== (validEvents.length-1))) {
-          item.$$hide = true; // set hide so the event does not show on next day
-          cell.appendChild(buildShowMoreLink(validEvents.length - pos, date));
+  function createEventElements(cellContent, options) {
+    var i;
+    var place = 0;
+    var hasEvents = false;
+    var matchingEvents = getEventsInRange(options.date, options.events);
+    matchingEvents = setEventPlaces(matchingEvents, options.dayOfWeek);
+    matchingEvents.every(function (eventItem, pos) {
+      var type = getEventDisplayType(eventItem, options);
+      var placeDiff = eventItem.$$place - place;
+      hasEvents = true;
+      place = eventItem.$$place + 1;
+      i = 0;
+      // add spacer items for overflow events from last day
+      while (i < placeDiff) {
+        if (place >= options.maxEvents) {
+          cellContent.appendChild(createShowMore(matchingEvents.length - pos, options.date));
           return false;
         }
-
-
-        if (isStartThisDay && isEndThisDay) {
-          eventElement = buildEventItem('single', true, item, labelProperty);
-        } else if (isStartThisDay) {
-          eventElement = buildEventItem('start', true, item, labelProperty);
-        } else if (isEndThisDay && dayOfWeek === 0) {
-          eventElement = buildEventItem('end-left', false, item, labelProperty);
-        } else if (isEndThisDay) {
-          eventElement = buildEventItem('end', false, item, labelProperty);
-        } else if (dayOfWeek === 0) {
-          eventElement = buildEventItem('continue-left', true, item, labelProperty);
-        } else if (dayOfWeek === 6) {
-          eventElement = buildEventItem('continue-right', false, item, labelProperty);
-        } else {
-          eventElement = buildEventItem('continue', false, item, labelProperty);
-        }
-
-        selected.every(function (sel) {
-          if (sel.$$mdEventId !== undefined && sel.$$mdEventId === item.$$mdEventId) {
-            eventElement.classList.add('md-selected');
-            return false;
-          }
-          return true;
-        });
-
-        cell.appendChild(eventElement);
-        return true;
-      });
-
-      if (hasEvents === true) {
-        cell.classList.add('md-has-events');
+        cellContent.appendChild(createEventSpacerElement());
+        i += 1;
       }
 
-      function getPlace() {
-        while (takenPlaces.indexOf(eventPlace) !== -1) {
-          eventPlace += 1;
-        }
-        takenPlaces.push(eventPlace);
-        return eventPlace;
+      if (place >= options.maxEvents) {
+        cellContent.appendChild(createShowMore(matchingEvents.length - pos, options.date));
+        return false;
       }
-    }
+      cellContent.appendChild(createEventElement(type, eventItem, options));
+      return true;
+    });
 
-
-
-    function buildShowMoreLink(num, date) {
-      var showMoreElement = document.createElement('div');
-      showMoreElement.classList.add('md-event-calendar-cell-event-show-more-link');
-      showMoreElement.textContent = num+' more';
-      showMoreElement.setAttribute('md-show-more', date.toISOString());
-      return showMoreElement;
+    if (hasEvents === true) {
+      cellContent.classList.add('md-has-events');
     }
+  }
 
 
-    function buildDateRow(rowNumber) {
-      var row = document.createElement('div');
-      row.classList.add("md-event-calendar-month-row");
-      return row;
-    }
+  function createShowMore(num, date) {
+    var showMoreElement = document.createElement('div');
+    showMoreElement.classList.add('md-event-calendar-cell-event-show-more-link');
+    showMoreElement.textContent = num+' more';
+    showMoreElement.setAttribute('md-show-more', date.toISOString());
+    return showMoreElement;
   }
 
 
+  function createEventSpacerElement() {
+    var spacer = document.createElement('div');
+    spacer.classList.add('md-event-calendar-cell-event-spacer');
+    return spacer;
+  }
 
-
-
-
-  function buildEventItem(type, showLabel, eventObj, labelProperty) {
-    var hash = getHashValue(eventObj);
+  function createEventElement(type, eventItem, options) {
+    var hash = getHashValue(eventItem);
     var eventElement = document.createElement('div');
     eventElement.classList.add('md-event-calendar-cell-event');
-    eventElement.classList.add('md-'+type);
+    eventElement.classList.add('md-'+type.className);
     eventElement.setAttribute('md-event-id', hash);
 
-    if (showLabel === true) {
-      if (type.indexOf('continue') === -1 && eventObj.allDay !== true) {
+    if (type.hasLabel === true) {
+      // do not show time for allDay events
+      if (type.allDay !== true) {
         var dateLabelTime = document.createElement('span');
         dateLabelTime.classList.add('md-event-calendar-cell-event-time');
-        dateLabelTime.textContent = $$mdEventCalendarUtil.formatEventTime(eventObj.start);
+        dateLabelTime.textContent = $$mdEventCalendarUtil.formatEventTime(eventItem.start);
         eventElement.appendChild(dateLabelTime);
@@ -308,6 +307,14 @@ }
       var dateLabelText = document.createElement('span');
-      dateLabelText.textContent = eventObj[labelProperty];
+      dateLabelText.textContent = eventItem[options.labelProperty];
       eventElement.appendChild(dateLabelText);
     }
 
+    options.selected.every(function (sel) {
+      if (sel.$$mdEventId !== undefined && sel.$$mdEventId === eventItem.$$mdEventId) {
+        eventElement.classList.add('md-selected');
+        return false;
+      }
+      return true;
+    });
+
     return eventElement;
@@ -318,10 +325,2 @@ }
 
-  function addEventSpacer(place, cell) {
-    var spacer = document.createElement('div');
-    spacer.classList.add('md-event-calendar-cell-event-spacer');
-    spacer.style.minHeight = place * 23 + ((place-1) * 4); // 23 is the height of an event item. 4 for padding inbetween
-    cell.appendChild(spacer);
-  }
-
-
   function getHashValue(value) {
@@ -331,22 +330,139 @@ if (angular.isObject(value)) {
     }
-    return value;
+    return 'id_' + (++nextId);
   }
 
-  function filterEventsOnMonth(date, events) {
-    return !events || !events.length ? [] : events.filter(function (item) {
-      var isStartValid = $$mdEventCalendarUtil.isValidDate(item.start);
-      var isEndValid = $$mdEventCalendarUtil.isValidDate(item.end);
-      var isStartSame = $$mdEventCalendarUtil.isSameMonthAndYear(date, item.start);
-      return isStartValid && isEndValid ? (isStartSame || $$mdEventCalendarUtil.isSameMonthAndYear(date, item.end)) : isStartSame;
-    }).sort(function(a, b) {
-      a = new Date(a.start);
-      b = new Date(b.start);
-      return a > b ? 1 : a < b ? -1 : 0;
+
+  function getEventDisplayType(item, options) {
+    var className;
+    var hasLabel;
+
+    var isStartThisDay = $$mdEventCalendarUtil.isSameDay(options.date, item.start);
+    var isEndThisDay = $$mdEventCalendarUtil.isValidDate(item.end) ? $$mdEventCalendarUtil.isSameDay(options.date, item.end) : true;
+
+    // single day event
+    if (isStartThisDay && (options.allDay || isEndThisDay)) {
+      className = 'single';
+      hasLabel = true;
+
+    // starts today
+    } else if (isStartThisDay) {
+      className = 'start';
+      hasLabel = true;
+
+    // ends on sunday
+    } else if (isEndThisDay && options.dayOfWeek === 0) {
+      className = 'end-left';
+      hasLabel = true;
+
+    // last day of event
+    } else if (isEndThisDay) {
+      className = 'end';
+      hasLabel = options.isFirstDay; // add label if event is continuing from last month
+
+    // continuation on sunday
+    } else if (options.dayOfWeek === 0) {
+      className = 'continue-left';
+      hasLabel = true;
+
+    // continue on sat
+    } else if (options.dayOfWeek === 6) {
+      className = 'continue-right';
+      hasLabel = false;
+
+    // continuation
+    } else {
+      className = 'continue';
+      hasLabel = false;
+    }
+
+    return {
+      className: className,
+      hasLabel: hasLabel,
+      allDay: item.allDay || false
+    };
+  }
+
+  function getEventsInRange(date, events) {
+    return events.filter(function (item) {
+      return $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
     });
   }
 
+  function setEventPlaces(events, dayOfWeek) {
+    var takenPlaces = [];
+    var sorted = events.sort(function (a, b) {
+      if (a.end > b.end) { return -1; }
+      if (a.end < b.end) { return 1; }
+      return 0;
+    });
 
-  function filterEventsOnDay(date, events) {
-    return !events || !events.length ? [] : events.filter(function (item) {
-      return $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
+    // if not first day of week then get event palces. this is for dates that come from previous days
+    // otherwise reset places
+    sorted.forEach(function (item) {
+      if (dayOfWeek === 0) { item.$$place = undefined; }
+      else if (item.$$place !== undefined) { takenPlaces.push(item.$$place); }
+    });
+
+    // fill in places that have not been set
+    sorted.forEach(function(item) {
+      if (item.$$place === undefined) { item.$$place = getPlace(); }
+    });
+
+    // sort on places
+    return sorted.sort(function(a, b) {
+      if (a.$$place > b.$$place) { return 1; }
+      if (a.$$place < b.$$place) { return -1; }
+      return 0;
+    });
+
+
+    // find lowest place not taken
+    function getPlace() {
+      var place = 0;
+      while (takenPlaces.indexOf(place) !== -1) {
+        place++;
+      }
+      takenPlaces.push(place);
+      return place;
+    }
+  }
+
+
+  function createMonthElement() {
+    var monthBody = document.createDocumentFragment();
+    var headerRow = document.createElement('div');
+    headerRow.classList.add('md-event-calendar-month-row-header');
+    monthBody.appendChild(headerRow);
+
+    // add header day labels
+    $$mdEventCalendarUtil.days.forEach(function (name) {
+      var dayHeader = document.createElement('div');
+      dayHeader.classList.add('md-event-calendar-month-cell-header');
+      dayHeader.textContent = name.slice(0,3).toLowerCase();
+      headerRow.appendChild(dayHeader);
+    });
+
+    return monthBody;
+  }
+
+  function createRowElement() {
+    var row = document.createElement('div');
+    row.classList.add("md-event-calendar-month-row");
+    return row;
+  }
+
+
+  function filterCurrentCalendar(date, events) {
+    if (!events || !events.length) { return []; }
+    // back fill 6 days for posibility of last month days showing up
+    var start = $$mdEventCalendarUtil.getFirstDateOfMonth(date).getDate(-6);
+    // front fill 6 days for posibility of next month days showing up
+    var end = $$mdEventCalendarUtil.getFirstDateOfMonth(date).getDate(37);
+
+    return events.filter(function (item) {
+      if (!$$mdEventCalendarUtil.isValidDate(item.start)) { return false; }
+      if ($$mdEventCalendarUtil.isDateWithinRange(item.start, start, end)) { return true; }
+      if (!$$mdEventCalendarUtil.isValidDate(item.end)) { return false; }
+      if ($$mdEventCalendarUtil.isDateWithinRange(item.end, start, end)) { return true; }
+      return false;
     }).sort(function(a, b) {
@@ -353,0 +469,0 @@ a = new Date(a.start);

public/js/eventCalendarMonth.directive.js

@@ -88,3 +88,3 @@ (function(){"use strict";angular
         events: mdEventCalendarCtrl.events,
-        labelProperty: mdEventCalendarCtrl.labelProperty,
+        labelProperty: mdEventCalendarCtrl.labelProperty
       });
@@ -91,0 +91,0 @@ angular.element(el).parent().parent().append(showMoreElement);

public/pages/home/home.controller.js

@@ -7,66 +7,38 @@ (function(){"use strict";angular
 function HomeController($scope, $timeout) {
+
   $scope.events = [
     {
-      start: new Date(new Date().getTime() - 348 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() - 296 * 60 * 60 * 1000),
+      start: getDate(0, 10),
+      end: getDate(1, 11),
       title: 'Event 1'
     },
     {
-      start: new Date(new Date().getTime() - 348 * 60 * 60 * 1000),
-      allDay: true,
+      start: getDate(1, 11),
+      end: getDate(2, 12),
       title: 'Event 2'
     },
     {
-      start: new Date(new Date().getTime() - 348 * 60 * 60 * 1000),
+      start: getDate(2, 12),
+      end: getDate(3, 13),
       title: 'Event 3'
     },
-
     {
-      start: new Date(new Date().getTime() - 348 * 60 * 60 * 1000),
+      start: getDate(4, 12),
+      end: getDate(5, 13),
       title: 'Event 4'
     },
     {
-      start: new Date(new Date().getTime() - 348 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() - 296 * 60 * 60 * 1000),
+      start: getDate(5, 12),
+      end: getDate(6, 13),
       title: 'Event 5'
     },
     {
-      start: new Date(),
-      title: 'Event One'
+      start: getDate(6, 12),
+      end: getDate(6, 13),
+      title: 'Event 6'
     },
     {
-      start: new Date(),
-      end: new Date(new Date().getTime() + 48 * 60 * 60 * 1000),
-      title: 'Event Two Two Two'
-    },
-    {
-      start: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 48 * 60 * 60 * 1000),
-      title: 'Event Three'
-    },
-    {
-      start: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
-      title: 'Event Three2'
-    },
-    {
-      start: new Date(new Date().getTime() + 72 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 72 * 60 * 60 * 1000),
-      title: 'Event four'
-    },
-
-    {
-      start: new Date(new Date().getTime() + 72 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 72 * 60 * 60 * 1000),
-      title: 'Event four2'
-    },
-    {
-      start: new Date(new Date().getTime() + 72 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 144 * 60 * 60 * 1000),
-      title: 'Event five'
-    },
-    {
-      start: new Date(new Date().getTime() + 144 * 60 * 60 * 1000),
-      end: new Date(new Date().getTime() + 144 * 60 * 60 * 1000),
-      title: 'Event six'
+      start: getDate(6, 12),
+      allDay: true,
+      title: 'Event 7'
     }
@@ -80,3 +52,11 @@ ];
 
+  function getDate(offsetDays, hour) {
+    offsetDays = offsetDays || 0;
+    var offset = offsetDays * 24 * 60 * 60 * 1000;
+    var date = new Date(new Date().getTime() + offset);
+    if (hour) { date.setHours(hour); }
+    return date;
+  }
 
+
   // $timeout(function () {
@@ -83,0 +63,0 @@ //   $scope.events.push({

public/pages/home/home.html

 <md-event-calendar
+  class="md-primary"
   ng-model="selected"
@@ -3,0 +4,0 @@ md-events="events"

README.md

@@ -16,2 +16,3 @@ # angular-material-event-calendar
 * [Usage](#usage)
+* [Colors](#colors)
 * [Documentation](#documentation)
@@ -114,3 +115,4 @@ * [FAQ](#faq)
   md-event-click="eventClicked($selectedEvent)"
-  md-label="title"
+  md-label="title",
+  class="md-primary"
 >
@@ -127,3 +129,22 @@ <md-event-calendar-header class="md-center">
 
+## <a name="colors"></a> Colors
 
+**With Angular Material**
+
+If you want to have the header and selected elements use the primary color for their backgrounds the just add the `md-primary` class
+```html
+<md-event-calendar
+  class="md-primary"
+>
+</md-event-calendar>
+```
+
+
+**Without Angular Material**
+
+If you want to change the header and selected event background colors you add this [scss](https://github.com/B-3PO/angular-material-event-calendar/blob/master/app/eventCalendar-primary.scss) file after the `angular-material-event-calendar.css` file
+
+Primary Color scss: [Click Here](https://github.com/B-3PO/angular-material-event-calendar/blob/master/app/eventCalendar-primary.scss)
+
+
 ## <a name="documentation"></a> Documentation
@@ -130,0 +151,0 @@

src/eventCalendar-colors.scss

@@ -0,9 +1,32 @@
+// Borders
+$border: #DDD;
+$todayBorder: #AAA;
+
+// Backgrounds
+$headerBackground: #FFF;
+$eventBackground: #DDD;
+$eventBackgroundSelected: #EEE;
+$rowBackground: #FFF;
+$previousMonthDayBackground: #F5F5F5;
+
+// Fonts
+$eventFont: #666;
+$headerFont: #666;
+$monthDayfont: #999;
+$monthDayHeaderFont: #999;
+$showMoreLink: #4189b8;
+$eventSelectedFont: #888;
+
+
+
+
 md-event-calendar:not(._md) {
   md-event-calendar-header {
-    color: #FFF;
-    background: #AAA;
+    color: $headerFont;
+    background: $headerBackground;
+    border-color: $border;
 
     md-event-calendar-next, md-event-calendar-prev {
-      .md-arrow {
-        fill: #333;
+      .md-arrow svg {
+        fill: $headerFont;
       }
@@ -16,30 +39,51 @@ }
     .md-event-calendar-month-row-header {
-      color: #FFF;
-      background: #AAA;
+      color: $monthDayHeaderFont;
+      background: $headerBackground;
+      border-color: $border;
     }
 
     .md-event-calendar-month-row {
-      background: #FFF;
-      border-color: #DDD;
+      background: $rowBackground;
+      border-color: $border;
 
       .md-event-calendar-month-cell-divider {
-        border-color: #DDD;
+        border-color: $border;
       }
 
       .md-event-calendar-month-cell {
-        border-color: #DDD;
+        border-color: $border;
 
-        &:last-child {
-          border-color: #DDD;
-        }
-
         .md-event-calendar-month-cell-content {
           .md-event-calendar-cell-data-label {
-            color: #666;
+            color: $monthDayfont;
           }
 
           .md-event-calendar-cell-event-show-more-link {
-            color: #4189b8;
+            color: $showMoreLink;
           }
         }
+
+
+
+        &.different-month {
+          background: $previousMonthDayBackground;
+        }
+
+        &.today {
+          box-shadow: inset 0px 0px 0px 1px $todayBorder;
+
+          .md-event-calendar-month-cell-content {
+            .md-event-calendar-cell-data-label {
+              color: $headerFont;
+            }
+          }
+
+          .md-event-calendar-month-cell-divider {
+            border-color: $todayBorder;
+          }
+        }
+
+        &:last-child {
+          border-color: $border;
+        }
       }
@@ -50,8 +94,8 @@ }
   .md-event-calendar-cell-event {
-    background: #EEE;
-    color: #333;
+    background: $eventBackground;
+    color: $eventFont;
 
     &.md-selected {
-      color: #EEE;
-      background: #888;
+      color: $eventBackgroundSelected;
+      background: $eventSelectedFont;
     }
@@ -61,3 +105,3 @@
       &:after {
-        border-right:13px solid #EEE;
+        border-right-color: $eventBackground;
       }
@@ -68,3 +112,3 @@ }
       &:after {
-        border-left:13px solid #EEE;
+        border-left-color: $eventBackground;
       }
@@ -77,3 +121,3 @@ }
         &:after {
-          border-right:13px solid #888;
+          border-right-color: $eventSelectedFont;
         }
@@ -84,3 +128,3 @@ }
         &:after {
-          border-left:13px solid #888;
+          border-left-color: $eventSelectedFont;
         }
@@ -93,9 +137,9 @@ }
     .md-event-calendar-show-more-date-label {
-      color: #666;
+      color: $monthDayfont;
     }
 
     .md-event-calendar-show-more-close svg {
-      fill: #666;
+      fill: $monthDayfont;
     }
   }
 }

src/eventCalendar-theme.scss

 md-event-calendar._md {
   md-event-calendar-header {
-    color: #EEE;
-    background: '{{primary-default}}';
+    color: '{{foreground-1}}';
+    background: '{{background-hue-1}}';
+    border-color: '{{foreground-4}}';
 
     md-event-calendar-next, md-event-calendar-prev {
-      .md-arrow {
-        fill: #EEE;
+      .md-arrow svg {
+        fill: '{{foreground-2}}';
       }
@@ -16,4 +17,5 @@ }
     .md-event-calendar-month-row-header {
-      color: #EEE;
-      background: '{{primary-default}}';
+      color: '{{foreground-3}}';
+      background: '{{background-hue-1}}';
+      border-color: '{{foreground-4}}';
     }
@@ -25,2 +27,3 @@
 
+
       .md-event-calendar-month-cell-divider {
@@ -33,6 +36,2 @@ border-color: '{{foreground-4}}';
 
-        &:last-child {
-          border-color: '{{foreground-4}}';
-        }
-
         .md-event-calendar-month-cell-content {
@@ -47,2 +46,22 @@ .md-event-calendar-cell-data-label {
         }
+
+
+
+        &.different-month {
+          background: '{{background-hue-2}}';
+        }
+
+        &.today {
+          box-shadow: inset 0px 0px 0px 1px '{{primary-default}}';
+
+          .md-event-calendar-month-cell-content {
+            .md-event-calendar-cell-data-label {
+              color: '{{primary-default}}';
+            }
+          }
+        }
+
+        &:last-child {
+          border-color: '{{foreground-4}}';
+        }
       }
@@ -63,3 +82,3 @@ }
       &:after {
-        border-right:13px solid '{{foreground-4}}';
+        border-right-color:'{{foreground-4}}';
       }
@@ -70,3 +89,3 @@ }
       &:after {
-        border-left:13px solid '{{foreground-4}}';
+        border-left-color: '{{foreground-4}}';
       }
@@ -79,3 +98,3 @@ }
         &:after {
-          border-right:13px solid '{{primary-default}}';
+          border-right-color: '{{primary-default}}';
         }
@@ -86,3 +105,3 @@ }
         &:after {
-          border-left:13px solid '{{primary-default}}';
+          border-left-color: '{{primary-default}}';
         }
@@ -103,1 +122,23 @@ }
 }
+
+
+
+md-event-calendar._md.md-primary {
+  md-event-calendar-header {
+    color: '{{background-100}}';
+    background: '{{primary-default}}';
+
+    md-event-calendar-next, md-event-calendar-prev {
+      .md-arrow svg {
+        fill: '{{background-100}}';
+      }
+    }
+  }
+
+  md-event-calendar-month {
+    .md-event-calendar-month-row-header {
+      color: '{{background-100}}';
+      background: '{{primary-default}}';
+    }
+  }
+}

src/eventCalendar.js

@@ -16,2 +16,4 @@ /**
   var $mdThemingProvider;
+
+  // if using angular material, then register the event theme css
   if ($injector.has('$mdThemingProvider')) {
@@ -26,2 +28,3 @@ $mdThemingProvider = $injector.get('$mdThemingProvider');
 
+// polly fill rAF throttle if not using angular material
 function rAFDecorator($delegate) {
@@ -28,0 +31,0 @@ $delegate.throttle = function(cb) {

src/eventCalendar.scss

@@ -9,2 +9,4 @@ md-event-calendar {
     align-items: center;
+    border-style: solid;
+    border-width: 1px 1px 0 1px;
 
@@ -18,3 +20,3 @@ &.md-center {
       display: block;
-      min-width: 150px;
+      min-width: 170px;
       text-align: center;
@@ -57,2 +59,4 @@ font-size: 20px;
       padding-bottom: 12px;
+      border-style: solid;
+      border-width: 0 1px 1px 1px;
 
@@ -78,8 +82,2 @@ .md-event-calendar-month-cell-header {
 
-        &:last-child {
-          border-style: solid;
-          border-width: 0 1px 0 0;
-        }
-
-
         .md-event-calendar-month-cell-spacer {
@@ -107,3 +105,3 @@ margin-top: 100%
             font-size: 13px;
-            padding: 6px;
+            padding: 8px;
           }
@@ -113,2 +111,3 @@
             margin: 4px 0 4px 0;
+            height: 23px;
           }
@@ -123,2 +122,8 @@
         }
+
+
+        &:last-child {
+          border-style: solid;
+          border-width: 0 1px 0 0;
+        }
       }
@@ -133,2 +138,3 @@ }
     padding: 4px;
+    cursor: pointer;
 
@@ -162,3 +168,3 @@ &.md-single {
     &.md-end-left {
-      margin: 4px 4px 4px 13px;
+      margin: 4px 13px 4px 13px;
       border-radius: 0 2px 2px 0;
@@ -194,2 +200,3 @@ }
         border-bottom: 11.5px solid transparent;
+        border-left:13px solid #EEE;
       }
@@ -208,2 +215,3 @@ }
         border-bottom: 11.5px solid transparent;
+        border-right:13px solid #EEE;
       }
@@ -223,4 +231,28 @@ }
 
+  // show more popup
+  .md-event-calendar-show-more-content .md-event-calendar-cell-event {
+    &.md-single,
+    &.md-end,
+    &.md-start-right
+    {
+      padding-left: 16px;
+    }
 
+    &.md-single,
+    &.md-end,
+    &.md-start-right
+    {
+      margin-left: 0;
+    }
 
+    &.md-single,
+    &.md-end,
+    &.md-end-left
+    {
+      margin-right: 0;
+    }
+  }
+
+
+
   .md-event-calendar-show-more-container {
@@ -261,6 +293,6 @@ position: absolute;
       padding: 6px;
-      margin-left: -13px;
-      margin-top: -7px;
+      margin-left: -11px;
+      margin-top: -5px;
     }
   }
 }

src/js/eventCalendar.directive.js

@@ -21,6 +21,2 @@ angular
     },
-    // template: '<div class="md-event-calendar">'+
-    //   '<md-event-calendar-header></md-event-calendar-header>'+
-    //   '<md-event-calendar-month></md-event-calendar-month>'+
-    // '</div>',
     compile: compile,
@@ -27,0 +23,0 @@ controller: controller,

src/js/eventCalendarBuilder.service.js

@@ -49,22 +49,17 @@ angular
       var isEndThisDay = $$mdEventCalendarUtil.isValidDate(item.end) ? $$mdEventCalendarUtil.isSameDay(date, item.end) : true;
+      var eventOptions = {
+        labelProperty: labelProperty,
+        selected: selected
+      };
 
       if (isStartThisDay && isEndThisDay) {
-        eventElement = buildEventItem('single', true, item, labelProperty);
+        eventElement = createEventElement({className: 'single', hasLabel: true}, item, eventOptions);
       } else if (isStartThisDay) {
-        eventElement = buildEventItem('start-right', true, item, labelProperty);
+        eventElement = createEventElement({className: 'start-right', hasLabel: true}, item, eventOptions);
       } else if (isEndThisDay) {
-        eventElement = buildEventItem('end-left', true, item, labelProperty);
+        eventElement = createEventElement({className: 'end-left', hasLabel: true}, item, eventOptions);
       } else {
-        eventElement = buildEventItem('continue', true, item, labelProperty);
+        eventElement = createEventElement({className: 'continue', hasLabel: true}, item, eventOptions);
       }
 
-
-      selected.every(function (sel) {
-        if (sel.$$mdEventId !== undefined && sel.$$mdEventId === item.$$mdEventId) {
-          eventElement.classList.add('md-selected');
-          return false;
-        }
-        return true;
-      });
-
       content.appendChild(eventElement);
@@ -77,46 +72,69 @@ });
 
+  function filterEventsOnDay(date, events) {
+    return !events || !events.length ? [] : events.filter(function (item) {
+      return $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
+    }).sort(function(a, b) {
+      a = new Date(a.start);
+      b = new Date(b.start);
+      return a > b ? 1 : a < b ? -1 : 0;
+    });
+  }
 
-  function month(opts) {
-    var date = $$mdEventCalendarUtil.isValidDate(opts.date) ? opts.date : new Date();
-    var events = opts.events ? filterEventsOnMonth(date, opts.events) : [];
-    var selected = opts.selected || [];
-    var labelProperty = opts.labelProperty;
-    var cellSize = opts.bounds.width / 7;
-    var maxEvents = Math.floor((cellSize - 27) / 27);
-    events.forEach(cleanEvent);
 
+
+
+
+
+
+
+
+
+
+
+  function month(options) {
+    var calendarStartDate;
+    var today = $$mdEventCalendarUtil.createDateAtMidnight();
+    var date = $$mdEventCalendarUtil.isValidDate(options.date) ? options.date : new Date();
     var firstDayOfMonth = $$mdEventCalendarUtil.getFirstDateOfMonth(date);
     var firstDayOfTheWeek = (firstDayOfMonth.getDay() + 7) % 7;
     var numberOfDaysInMonth = $$mdEventCalendarUtil.getNumberOfDaysInMonth(date);
-    var monthBody = document.createDocumentFragment();
+    var events = filterCurrentCalendar(date, options.events);
+    events.forEach(cleanEvent);
+    var selected = options.selected  || [];
     var rowNumber = 1;
-    var blankCellOffset = 0;
-    var headerRow = document.createElement('div');
-    headerRow.classList.add('md-event-calendar-month-row-header');
-    var row = buildDateRow(rowNumber);
-    monthBody.appendChild(headerRow);
-    monthBody.appendChild(row);
+    var monthElement = createMonthElement();
+    var row = createRowElement();
+    monthElement.appendChild(row);
+    var firstCalendarDay = true;
+    var cellSize = (options.bounds.width / 7) - 48;
+    var maxEvents = Math.floor(cellSize / 24);
+    var d = 0;
 
-    $$mdEventCalendarUtil.days.forEach(function (name) {
-      var dayHeader = document.createElement('div');
-      dayHeader.classList.add('md-event-calendar-month-cell-header');
-      dayHeader.textContent = name.slice(0,3).toLowerCase();
-      headerRow.appendChild(dayHeader);
-    });
 
 
-
-    if (firstDayOfTheWeek <= 2) {
-    } else {
-      blankCellOffset = 3;
+    // days from last month
+    if (firstDayOfTheWeek > 0) {
+      calendarStartDate = $$mdEventCalendarUtil.getFirstDateOfMonth(date);
+      calendarStartDate.setDate(calendarStartDate.getDate() - firstDayOfTheWeek);
+      while (d < firstDayOfTheWeek) {
+        row.appendChild(createCellElement({
+          date: calendarStartDate,
+          today: today,
+          dayOfWeek: d,
+          differentMonth: true,
+          events: events,
+          isFirstDay: firstCalendarDay,
+          isLastDay: false,
+          maxEvents: maxEvents,
+          selected: selected,
+          labelProperty: options.labelProperty
+        }));
+        firstCalendarDay = false;
+        d += 1;
+        calendarStartDate.setDate(calendarStartDate.getDate() + 1);
+      }
     }
 
 
-    var i = 0;
-    while (i < firstDayOfTheWeek) {
-      row.appendChild(buildDateCell());
-      i += 1;
-    }
 
-
     // Add a cell for each day of the month, keeping track of the day of the week so that
@@ -126,3 +144,4 @@ // we know when to start a new row.
     var iterationDate = firstDayOfMonth;
-    var d = 1;
+    var lastCalendarDay = false;
+    d = 1;
     while (d <= numberOfDaysInMonth) {
@@ -132,11 +151,24 @@ // If we've reached the end of the week, start a new row.
         dayOfWeek = 0;
-        rowNumber++;
-        row = buildDateRow(rowNumber);
-        monthBody.appendChild(row);
+        row = createRowElement();
+        firstCalendarDay = false;
+        monthElement.appendChild(row);
       }
 
+      if (dayOfWeek === 6 && d === numberOfDaysInMonth) {
+        lastCalendarDay = true;
+      }
+
       iterationDate.setDate(d);
-      var cell = buildDateCell(iterationDate, dayOfWeek, selected);
-      row.appendChild(cell);
-
+      row.appendChild(createCellElement({
+        date: iterationDate,
+        today: today,
+        dayOfWeek: dayOfWeek,
+        events: events,
+        isFirstDay: firstCalendarDay,
+        isLastDay: lastCalendarDay,
+        maxEvents: maxEvents,
+        selected: selected,
+        labelProperty: options.labelProperty
+      }));
+      firstCalendarDay = false;
       dayOfWeek += 1;
@@ -146,159 +178,126 @@ d += 1;
 
-    // Ensure that the last row of the month has 7 cells.
+
+
+    // fill in the rest of the row with next month
     while (row.childNodes.length < 7) {
-      row.appendChild(buildDateCell());
+      if (dayOfWeek === 6) {
+        lastCalendarDay = true;
+      }
+      iterationDate.setDate(d);
+      row.appendChild(createCellElement({
+        date: iterationDate,
+        today: today,
+        dayOfWeek: dayOfWeek,
+        differentMonth: true,
+        events: events,
+        isFirstDay: false,
+        isLastDay: lastCalendarDay,
+        maxEvents: maxEvents,
+        selected: selected,
+        labelProperty: options.labelProperty
+      }));
+      dayOfWeek += 1;
+      d += 1;
     }
 
-    return monthBody;
 
+    return monthElement;
+  }
 
 
-    function buildDateCell(date, dayOfWeek, selected) {
-      var cell = document.createElement('div');
-      cell.classList.add('md-event-calendar-month-cell');
 
-      var cellSpacer = document.createElement('div');
-      cellSpacer.classList.add('md-event-calendar-month-cell-spacer');
-      cell.appendChild(cellSpacer);
+  function createCellElement(options) {
+    var cell = document.createElement('div');
+    cell.classList.add('md-event-calendar-month-cell');
+    if (options.differentMonth === true) { cell.classList.add('different-month'); }
+    if ($$mdEventCalendarUtil.isSameDay(options.date, options.today)) { cell.classList.add('today'); }
 
-      var divider = document.createElement('div');
-      divider.classList.add('md-event-calendar-month-cell-divider');
-      cell.appendChild(divider);
+    var cellSpacer = document.createElement('div');
+    cellSpacer.classList.add('md-event-calendar-month-cell-spacer');
+    cell.appendChild(cellSpacer);
 
-      var cellContent = document.createElement('div');
-      cellContent.classList.add('md-event-calendar-month-cell-content');
-      cell.appendChild(cellContent);
+    var divider = document.createElement('div');
+    divider.classList.add('md-event-calendar-month-cell-divider');
+    cell.appendChild(divider);
 
-      if (date) {
-        var dateLabel = document.createElement('div');
-        dateLabel.classList.add('md-event-calendar-cell-data-label');
-        dateLabel.textContent = $$mdEventCalendarUtil.dates[date.getDate()];
-        cellContent.appendChild(dateLabel);
-        buildEvents(date, dayOfWeek, selected, cellContent);
-      }
+    var cellContent = document.createElement('div');
+    cellContent.classList.add('md-event-calendar-month-cell-content');
+    cell.appendChild(cellContent);
 
-      return cell;
-    }
+    var dateLabel = document.createElement('div');
+    dateLabel.classList.add('md-event-calendar-cell-data-label');
+    dateLabel.textContent = $$mdEventCalendarUtil.dates[options.date.getDate()];
+    cellContent.appendChild(dateLabel);
 
+    createEventElements(cellContent, options);
 
+    return cell;
+  }
 
-    function buildEvents(date, dayOfWeek, selected, cell) {
-      var eventPlace = 0; // place in single day cell, from the first time used
-      var first = true;
-      var hasEvents = false;
 
-      var takenPlaces = [];
-      var validEvents = events.filter(function (item) {
-        var isInRange = $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
-        if (isInRange) {
-          if (item.$$place) { takenPlaces.push(item.$$place); }
-          return true;
-        } else { return false; }
-      });
-      validEvents.forEach(function(item) {
-        if (!item.$$place) {
-          item.$$place = getPlace();
-        }
-      });
 
-      eventPlace = 0;
-      validEvents.sort(function(a, b) {
-        if (a.$$place > b.$$place) { return 1; }
-        if (a.$$place < b.$$place) { return -1; }
-        return 0;
-      }).every(function (item, pos) {
-        var eventElement;
-        var isStartThisDay = $$mdEventCalendarUtil.isSameDay(date, item.start);
-        var isEndThisDay = $$mdEventCalendarUtil.isValidDate(item.end) ? $$mdEventCalendarUtil.isSameDay(date, item.end) : true;
-        if (first && item.$$place > 0) { addEventSpacer(item.$$place, cell); } // spacer if first event is from previous day and not at the top
-        else if (item.$$place > eventPlace + 1) { addEventSpacer((item.$$place - (eventPlace+1)), cell); } // spacer for gaps
-        first = false;
-        hasEvents = true;
-        eventPlace = item.$$place;
-
-
-        // if it doesn't fit add a link to see the rest
-        if (item.$$hide === true || ((eventPlace + 1) >= maxEvents && pos !== (validEvents.length-1))) {
-          item.$$hide = true; // set hide so the event does not show on next day
-          cell.appendChild(buildShowMoreLink(validEvents.length - pos, date));
+  function createEventElements(cellContent, options) {
+    var i;
+    var place = 0;
+    var hasEvents = false;
+    var matchingEvents = getEventsInRange(options.date, options.events);
+    matchingEvents = setEventPlaces(matchingEvents, options.dayOfWeek);
+    matchingEvents.every(function (eventItem, pos) {
+      var type = getEventDisplayType(eventItem, options);
+      var placeDiff = eventItem.$$place - place;
+      hasEvents = true;
+      place = eventItem.$$place + 1;
+      i = 0;
+      // add spacer items for overflow events from last day
+      while (i < placeDiff) {
+        if (place >= options.maxEvents) {
+          cellContent.appendChild(createShowMore(matchingEvents.length - pos, options.date));
           return false;
         }
-
-
-        if (isStartThisDay && isEndThisDay) {
-          eventElement = buildEventItem('single', true, item, labelProperty);
-        } else if (isStartThisDay) {
-          eventElement = buildEventItem('start', true, item, labelProperty);
-        } else if (isEndThisDay && dayOfWeek === 0) {
-          eventElement = buildEventItem('end-left', false, item, labelProperty);
-        } else if (isEndThisDay) {
-          eventElement = buildEventItem('end', false, item, labelProperty);
-        } else if (dayOfWeek === 0) {
-          eventElement = buildEventItem('continue-left', true, item, labelProperty);
-        } else if (dayOfWeek === 6) {
-          eventElement = buildEventItem('continue-right', false, item, labelProperty);
-        } else {
-          eventElement = buildEventItem('continue', false, item, labelProperty);
-        }
-
-        selected.every(function (sel) {
-          if (sel.$$mdEventId !== undefined && sel.$$mdEventId === item.$$mdEventId) {
-            eventElement.classList.add('md-selected');
-            return false;
-          }
-          return true;
-        });
-
-        cell.appendChild(eventElement);
-        return true;
-      });
-
-      if (hasEvents === true) {
-        cell.classList.add('md-has-events');
+        cellContent.appendChild(createEventSpacerElement());
+        i += 1;
       }
 
-      function getPlace() {
-        while (takenPlaces.indexOf(eventPlace) !== -1) {
-          eventPlace += 1;
-        }
-        takenPlaces.push(eventPlace);
-        return eventPlace;
+      if (place >= options.maxEvents) {
+        cellContent.appendChild(createShowMore(matchingEvents.length - pos, options.date));
+        return false;
       }
-    }
+      cellContent.appendChild(createEventElement(type, eventItem, options));
+      return true;
+    });
 
-
-
-    function buildShowMoreLink(num, date) {
-      var showMoreElement = document.createElement('div');
-      showMoreElement.classList.add('md-event-calendar-cell-event-show-more-link');
-      showMoreElement.textContent = num+' more';
-      showMoreElement.setAttribute('md-show-more', date.toISOString());
-      return showMoreElement;
+    if (hasEvents === true) {
+      cellContent.classList.add('md-has-events');
     }
+  }
 
 
-    function buildDateRow(rowNumber) {
-      var row = document.createElement('div');
-      row.classList.add("md-event-calendar-month-row");
-      return row;
-    }
+  function createShowMore(num, date) {
+    var showMoreElement = document.createElement('div');
+    showMoreElement.classList.add('md-event-calendar-cell-event-show-more-link');
+    showMoreElement.textContent = num+' more';
+    showMoreElement.setAttribute('md-show-more', date.toISOString());
+    return showMoreElement;
   }
 
 
+  function createEventSpacerElement() {
+    var spacer = document.createElement('div');
+    spacer.classList.add('md-event-calendar-cell-event-spacer');
+    return spacer;
+  }
 
-
-
-
-  function buildEventItem(type, showLabel, eventObj, labelProperty) {
-    var hash = getHashValue(eventObj);
+  function createEventElement(type, eventItem, options) {
+    var hash = getHashValue(eventItem);
     var eventElement = document.createElement('div');
     eventElement.classList.add('md-event-calendar-cell-event');
-    eventElement.classList.add('md-'+type);
+    eventElement.classList.add('md-'+type.className);
     eventElement.setAttribute('md-event-id', hash);
 
-    if (showLabel === true) {
-      if (type.indexOf('continue') === -1 && eventObj.allDay !== true) {
+    if (type.hasLabel === true) {
+      // do not show time for allDay events
+      if (type.allDay !== true) {
         var dateLabelTime = document.createElement('span');
         dateLabelTime.classList.add('md-event-calendar-cell-event-time');
-        dateLabelTime.textContent = $$mdEventCalendarUtil.formatEventTime(eventObj.start);
+        dateLabelTime.textContent = $$mdEventCalendarUtil.formatEventTime(eventItem.start);
         eventElement.appendChild(dateLabelTime);
@@ -308,6 +307,14 @@ }
       var dateLabelText = document.createElement('span');
-      dateLabelText.textContent = eventObj[labelProperty];
+      dateLabelText.textContent = eventItem[options.labelProperty];
       eventElement.appendChild(dateLabelText);
     }
 
+    options.selected.every(function (sel) {
+      if (sel.$$mdEventId !== undefined && sel.$$mdEventId === eventItem.$$mdEventId) {
+        eventElement.classList.add('md-selected');
+        return false;
+      }
+      return true;
+    });
+
     return eventElement;
@@ -318,10 +325,2 @@ }
 
-  function addEventSpacer(place, cell) {
-    var spacer = document.createElement('div');
-    spacer.classList.add('md-event-calendar-cell-event-spacer');
-    spacer.style.minHeight = place * 23 + ((place-1) * 4); // 23 is the height of an event item. 4 for padding inbetween
-    cell.appendChild(spacer);
-  }
-
-
   function getHashValue(value) {
@@ -331,22 +330,139 @@ if (angular.isObject(value)) {
     }
-    return value;
+    return 'id_' + (++nextId);
   }
 
-  function filterEventsOnMonth(date, events) {
-    return !events || !events.length ? [] : events.filter(function (item) {
-      var isStartValid = $$mdEventCalendarUtil.isValidDate(item.start);
-      var isEndValid = $$mdEventCalendarUtil.isValidDate(item.end);
-      var isStartSame = $$mdEventCalendarUtil.isSameMonthAndYear(date, item.start);
-      return isStartValid && isEndValid ? (isStartSame || $$mdEventCalendarUtil.isSameMonthAndYear(date, item.end)) : isStartSame;
-    }).sort(function(a, b) {
-      a = new Date(a.start);
-      b = new Date(b.start);
-      return a > b ? 1 : a < b ? -1 : 0;
+
+  function getEventDisplayType(item, options) {
+    var className;
+    var hasLabel;
+
+    var isStartThisDay = $$mdEventCalendarUtil.isSameDay(options.date, item.start);
+    var isEndThisDay = $$mdEventCalendarUtil.isValidDate(item.end) ? $$mdEventCalendarUtil.isSameDay(options.date, item.end) : true;
+
+    // single day event
+    if (isStartThisDay && (options.allDay || isEndThisDay)) {
+      className = 'single';
+      hasLabel = true;
+
+    // starts today
+    } else if (isStartThisDay) {
+      className = 'start';
+      hasLabel = true;
+
+    // ends on sunday
+    } else if (isEndThisDay && options.dayOfWeek === 0) {
+      className = 'end-left';
+      hasLabel = true;
+
+    // last day of event
+    } else if (isEndThisDay) {
+      className = 'end';
+      hasLabel = options.isFirstDay; // add label if event is continuing from last month
+
+    // continuation on sunday
+    } else if (options.dayOfWeek === 0) {
+      className = 'continue-left';
+      hasLabel = true;
+
+    // continue on sat
+    } else if (options.dayOfWeek === 6) {
+      className = 'continue-right';
+      hasLabel = false;
+
+    // continuation
+    } else {
+      className = 'continue';
+      hasLabel = false;
+    }
+
+    return {
+      className: className,
+      hasLabel: hasLabel,
+      allDay: item.allDay || false
+    };
+  }
+
+  function getEventsInRange(date, events) {
+    return events.filter(function (item) {
+      return $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
     });
   }
 
+  function setEventPlaces(events, dayOfWeek) {
+    var takenPlaces = [];
+    var sorted = events.sort(function (a, b) {
+      if (a.end > b.end) { return -1; }
+      if (a.end < b.end) { return 1; }
+      return 0;
+    });
 
-  function filterEventsOnDay(date, events) {
-    return !events || !events.length ? [] : events.filter(function (item) {
-      return $$mdEventCalendarUtil.isDateWithinRange(date, item.start, item.end || item.start);
+    // if not first day of week then get event palces. this is for dates that come from previous days
+    // otherwise reset places
+    sorted.forEach(function (item) {
+      if (dayOfWeek === 0) { item.$$place = undefined; }
+      else if (item.$$place !== undefined) { takenPlaces.push(item.$$place); }
+    });
+
+    // fill in places that have not been set
+    sorted.forEach(function(item) {
+      if (item.$$place === undefined) { item.$$place = getPlace(); }
+    });
+
+    // sort on places
+    return sorted.sort(function(a, b) {
+      if (a.$$place > b.$$place) { return 1; }
+      if (a.$$place < b.$$place) { return -1; }
+      return 0;
+    });
+
+
+    // find lowest place not taken
+    function getPlace() {
+      var place = 0;
+      while (takenPlaces.indexOf(place) !== -1) {
+        place++;
+      }
+      takenPlaces.push(place);
+      return place;
+    }
+  }
+
+
+  function createMonthElement() {
+    var monthBody = document.createDocumentFragment();
+    var headerRow = document.createElement('div');
+    headerRow.classList.add('md-event-calendar-month-row-header');
+    monthBody.appendChild(headerRow);
+
+    // add header day labels
+    $$mdEventCalendarUtil.days.forEach(function (name) {
+      var dayHeader = document.createElement('div');
+      dayHeader.classList.add('md-event-calendar-month-cell-header');
+      dayHeader.textContent = name.slice(0,3).toLowerCase();
+      headerRow.appendChild(dayHeader);
+    });
+
+    return monthBody;
+  }
+
+  function createRowElement() {
+    var row = document.createElement('div');
+    row.classList.add("md-event-calendar-month-row");
+    return row;
+  }
+
+
+  function filterCurrentCalendar(date, events) {
+    if (!events || !events.length) { return []; }
+    // back fill 6 days for posibility of last month days showing up
+    var start = $$mdEventCalendarUtil.getFirstDateOfMonth(date).getDate(-6);
+    // front fill 6 days for posibility of next month days showing up
+    var end = $$mdEventCalendarUtil.getFirstDateOfMonth(date).getDate(37);
+
+    return events.filter(function (item) {
+      if (!$$mdEventCalendarUtil.isValidDate(item.start)) { return false; }
+      if ($$mdEventCalendarUtil.isDateWithinRange(item.start, start, end)) { return true; }
+      if (!$$mdEventCalendarUtil.isValidDate(item.end)) { return false; }
+      if ($$mdEventCalendarUtil.isDateWithinRange(item.end, start, end)) { return true; }
+      return false;
     }).sort(function(a, b) {
@@ -353,0 +469,0 @@ a = new Date(a.start);

src/js/eventCalendarMonth.directive.js

@@ -88,3 +88,3 @@ angular
         events: mdEventCalendarCtrl.events,
-        labelProperty: mdEventCalendarCtrl.labelProperty,
+        labelProperty: mdEventCalendarCtrl.labelProperty
       });
@@ -91,0 +91,0 @@ angular.element(el).parent().parent().append(showMoreElement);

public/js/eventCalendarHeader.directive.js

-(function(){"use strict";// angular
-//   .module('material.components.eventCalendar')
-//   .directive('mdEventCalendarHeader', mdEventCalendarHeaderDirective);
-//
-// // TODO replace arrows with custom buttons, so it will look the same without angular material
-// /**
-//  * @ngdoc directive
-//  * @name mdEventCalendarHeaderDirective
-//  * @module material.components.eventCalendar
-//  *
-//  * @restrict E
-//  **/
-// function mdEventCalendarHeaderDirective() {
-//   var directive = {
-//     restrict: 'E',
-//     require: '^mdEventCalendar',
-//     template: '<div class="md-event-calendar-header">'+
-//       '<md-button class="md-icon-button" ng-click="mdEventCalendar.previousMonth()" aria-label="previous month">'+
-//         '<div class="md-arrow md-left-arrow" ng-include="\'icons/ic_keyboard_arrow_right_black_24px.svg\'"></div>'+
-//       '</md-button>'+
-//       '<div class="md-event-calendar-header-label">{{mdEventCalendar.monthDisplay + " " + mdEventCalendar.yearDisplay}}</div>'+
-//       '<md-button class="md-icon-button" ng-click="mdEventCalendar.nextMonth()" aria-label="mext month">'+
-//         '<div class="md-arrow" ng-include="\'icons/ic_keyboard_arrow_right_black_24px.svg\'"></div>'+
-//       '</md-button>'+
-//     '</div>'
-//   };
-//   return directive;
-// }
-}());

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

192404

11.21%

Number of package files

55

1.85%

Lines of code

3532

8.74%

Number of lines in readme file

272

8.37%

Worsened metrics

Number of low supply chain risk alerts

18

80%

No dependency changes