feat(slide-box-disabled): add new option to disable the slidebox on t…

…he month and year views

Closes #292

README.md

@@ -189,6 +189,10 @@ An optional expression that is evaluated when the view is changed by clicking on
 
 An optional expression that is evaluated on each cell generated for the year and month views. `calendarCell` can be used in the expression and is an object containing the current cell data which you can modify (see the `calendarHelper` service source code or just console.log it to see what data is available). If you add the `cssClass` property it will be applied to the cell.
 
+### slide-box-disabled
+
+If set it true it will disable the slidebox on the month and year views
+
 ## Configuring the calendar default config
 
 You can easily customise the date formats and i18n strings used throughout the calendar by using the `calendarConfig` value. Please note that these example formats are those used by moment.js and these won't work if using angular as the date formatter. Example usage:

docs/examples/examples.json

@@ -55,4 +55,7 @@
 }, {
   "key": "draggable-external-events",
   "label": "Draggable external events"
+}, {
+  "key": "slide-box-disabled",
+  "label": "Disable the slidebox"
 }]

docs/examples/slide-box-disabled/javascript.js

@@ -0,0 +1,25 @@
+angular
+  .module('mwl.calendar.docs')
+  .controller('SlideBoxDisabledCtrl', function(moment) {
+
+    var vm = this;
+
+    vm.events = [
+      {
+        title: 'Increments the badge total on the day cell',
+        type: 'warning',
+        startsAt: moment().startOf('month').toDate(),
+        incrementsBadgeTotal: true
+      },
+      {
+        title: 'Does not increment the badge total ',
+        type: 'info',
+        startsAt: moment().startOf('month').toDate(),
+        incrementsBadgeTotal: false
+      }
+    ];
+
+    vm.calendarView = 'month';
+    vm.viewDate = moment().startOf('month').toDate();
+
+  });

docs/examples/slide-box-disabled/markup.html

@@ -0,0 +1,9 @@
+<div ng-controller="SlideBoxDisabledCtrl as vm">
+  <ng-include src="'calendarControls.html'"></ng-include>
+  <mwl-calendar
+    events="vm.events"
+    view="vm.calendarView"
+    view-date="vm.viewDate"
+    slide-box-disabled="true">
+  </mwl-calendar>
+</div>

src/directives/mwlCalendar.js

@@ -128,6 +128,7 @@ angular
         editEventHtml: '=?',
         deleteEventHtml: '=?',
         cellIsOpen: '=?',
+        slideBoxDisabled: '=?',
         onEventClick: '&',
         onEventTimesChanged: '&',
         onEditEventClick: '&',

src/directives/mwlCalendarMonth.js

@@ -108,7 +108,8 @@ angular
         deleteEventHtml: '=',
         cellIsOpen: '=',
         onTimespanClick: '=',
-        cellModifier: '='
+        cellModifier: '=',
+        slideBoxDisabled: '='
       },
       controller: 'MwlCalendarMonthCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {

src/directives/mwlCalendarYear.js

@@ -80,7 +80,8 @@ angular
         deleteEventHtml: '=',
         cellIsOpen: '=',
         onTimespanClick: '=',
-        cellModifier: '='
+        cellModifier: '=',
+        slideBoxDisabled: '='
       },
       controller: 'MwlCalendarYearCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {

src/templates/calendar.html

@@ -19,6 +19,7 @@
     delete-event-html="vm.deleteEventHtml"
     cell-is-open="vm.cellIsOpen"
     cell-modifier="vm.cellModifier"
+    slide-box-disabled="vm.slideBoxDisabled"
     ng-switch-when="year">
   </mwl-calendar-year>
 
@@ -34,6 +35,7 @@
     delete-event-html="vm.deleteEventHtml"
     cell-is-open="vm.cellIsOpen"
     cell-modifier="vm.cellModifier"
+    slide-box-disabled="vm.slideBoxDisabled"
     ng-switch-when="month">
   </mwl-calendar-month>
 

src/templates/calendarMonthCell.html

@@ -24,7 +24,7 @@
     ng-bind="day.label">
   </span>
 
-  <div class="cal-day-tick" ng-show="dayIndex === vm.openDayIndex && vm.view[vm.openDayIndex].events.length > 0">
+  <div class="cal-day-tick" ng-show="dayIndex === vm.openDayIndex && vm.view[vm.openDayIndex].events.length > 0 && !vm.slideBoxDisabled">
     <i class="glyphicon glyphicon-chevron-up"></i>
     <i class="fa fa-chevron-up"></i>
   </div>

src/templates/calendarMonthView.html

@@ -21,7 +21,7 @@
     </div>
 
     <mwl-calendar-slide-box
-      is-open="vm.openRowIndex === $index && vm.view[vm.openDayIndex].events.length > 0"
+      is-open="vm.openRowIndex === $index && vm.view[vm.openDayIndex].events.length > 0 && !vm.slideBoxDisabled"
       events="vm.view[vm.openDayIndex].events"
       on-event-click="vm.onEventClick"
       edit-event-html="vm.editEventHtml"

src/templates/calendarYearView.html

@@ -25,7 +25,7 @@
 
         <div
           class="cal-day-tick"
-          ng-show="monthIndex === vm.openMonthIndex && vm.view[vm.openMonthIndex].events.length > 0">
+          ng-show="monthIndex === vm.openMonthIndex && vm.view[vm.openMonthIndex].events.length > 0 && !vm.slideBoxDisabled">
           <i class="glyphicon glyphicon-chevron-up"></i>
           <i class="fa fa-chevron-up"></i>
         </div>
@@ -34,7 +34,7 @@
     </div>
 
     <mwl-calendar-slide-box
-      is-open="vm.openRowIndex === $index && vm.view[vm.openMonthIndex].events.length > 0"
+      is-open="vm.openRowIndex === $index && vm.view[vm.openMonthIndex].events.length > 0 && !vm.slideBoxDisabled"
       events="vm.view[vm.openMonthIndex].events"
       on-event-click="vm.onEventClick"
       edit-event-html="vm.editEventHtml"