feat(week-view): 5 days semi-weeks

docs/examples/3-days-week/javascript.js

@@ -0,0 +1,33 @@
+angular
+  .module('mwl.calendar.docs') //you will need to declare your module with the dependencies ['mwl.calendar', 'ui.bootstrap', 'ngAnimate']
+  .controller('3DaysWeek', function(moment, calendarConfig) {
+    var vm = this;
+    vm.weekViewDays = 3; //number of days in week <1..7>, if not set full week of 7 days is used
+
+    //These variables MUST be set as a minimum for the calendar to work
+    vm.calendarView = 'week';
+    vm.viewDate = new Date();
+
+    vm.events = [{
+        title: 'An 2-day event',
+        color: calendarConfig.colorTypes.info,
+        startsAt: moment(vm.viewDate).add(1, 'day').toDate(),
+        endsAt: moment(vm.viewDate).add(2, 'day').toDate()
+      },
+      {
+        title: 'An 4-day event',
+        color: calendarConfig.colorTypes.warning,
+        startsAt: moment(vm.viewDate).add(1, 'day').toDate(),
+        endsAt: moment(vm.viewDate).add(4, 'day').toDate()
+      },
+      {
+        title: 'An 5-day event',
+        color: calendarConfig.colorTypes.error,
+        startsAt: moment(vm.viewDate).startOf('day').toDate(),
+        endsAt: moment(vm.viewDate).add(5, 'day').toDate()
+      }
+    ];
+
+    vm.cellIsOpen = true;
+
+  });

docs/examples/3-days-week/markup.html

@@ -0,0 +1,85 @@
+<div ng-controller="3DaysWeek as vm">
+  <h2 class="text-center">{{ vm.calendarTitle }}</h2>
+
+  <div class="row">
+
+    <div class="col-md-4 text-center">
+      <div class="btn-group">
+
+        <button
+          class="btn btn-primary"
+          mwl-date-modifier
+          date="vm.viewDate"
+          decrement="vm.calendarView"
+          week-view-days="vm.weekViewDays"
+          ng-click="vm.cellIsOpen = false">
+          Previous
+        </button>
+        <button
+          class="btn btn-default"
+          mwl-date-modifier
+          date="vm.viewDate"
+          set-to-today
+          ng-click="vm.cellIsOpen = false">
+          Today
+        </button>
+        <button
+          class="btn btn-primary"
+          mwl-date-modifier
+          date="vm.viewDate"
+          increment="vm.calendarView"
+          week-view-days="vm.weekViewDays"
+          ng-click="vm.cellIsOpen = false">
+          Next
+        </button>
+      </div>
+    </div>
+
+    <br class="visible-xs visible-sm">
+
+    <div class="col-md-4 text-center">
+      <div class="btn-group">
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'" ng-click="vm.cellIsOpen = false">Year</label>
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'" ng-click="vm.cellIsOpen = false">Month</label>
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'" ng-click="vm.cellIsOpen = false">Week</label>
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'" ng-click="vm.cellIsOpen = false">Day</label>
+      </div>
+    </div>
+
+    <div class="col-md-12 text-center">
+      <br/>
+      <h4>Number of days of the "semi" week</h3>
+      <p>Quite usefull to use on mobile devices</p>
+      <div class="btn-group">
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="7">7 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="6">6 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="5">5 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="4">4 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="3">3 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="2">2 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="1">1 day</label>
+      </div>
+    </div>
+
+  </div>
+
+  <br>
+
+  <mwl-calendar
+    events="vm.events"
+    view="vm.calendarView"
+    view-title="vm.calendarTitle"
+    view-date="vm.viewDate"
+    on-event-click="vm.eventClicked(calendarEvent)"
+    on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
+    cell-is-open="vm.cellIsOpen"
+    day-view-start="06:00"
+    day-view-end="22:59"
+    day-view-split="30"
+    week-view-days="vm.weekViewDays"
+    cell-modifier="vm.modifyCell(calendarCell)"
+    cell-auto-open-disabled="true"
+    on-timespan-click="vm.timespanClicked(calendarDate, calendarCell)">
+  </mwl-calendar>
+
+</div>

docs/examples/examples.json

@@ -1,4 +1,7 @@
 [{
+  "key": "3-days-week",
+  "label": "3 days week"
+}, {
   "key": "kitchen-sink",
   "label": "Kitchen sink"
 }, {

docs/examples/five-days-week/markup.html

@@ -0,0 +1,84 @@
+<div ng-controller="3DaysWeek as vm">
+  <h2 class="text-center">{{ vm.calendarTitle }}</h2>
+
+  <div class="row">
+
+    <div class="col-md-4 text-center">
+      <div class="btn-group">
+
+        <button
+          class="btn btn-primary"
+          mwl-date-modifier
+          date="vm.viewDate"
+          decrement="vm.calendarView"
+          week-view-days="vm.weekViewDays"
+          ng-click="vm.cellIsOpen = false">
+          Previous
+        </button>
+        <button
+          class="btn btn-default"
+          mwl-date-modifier
+          date="vm.viewDate"
+          set-to-today
+          ng-click="vm.cellIsOpen = false">
+          Today
+        </button>
+        <button
+          class="btn btn-primary"
+          mwl-date-modifier
+          date="vm.viewDate"
+          increment="vm.calendarView"
+          week-view-days="vm.weekViewDays"
+          ng-click="vm.cellIsOpen = false">
+          Next
+        </button>
+      </div>
+    </div>
+
+    <br class="visible-xs visible-sm">
+
+    <div class="col-md-4 text-center">
+      <div class="btn-group">
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'" ng-click="vm.cellIsOpen = false">Year</label>
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'" ng-click="vm.cellIsOpen = false">Month</label>
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'" ng-click="vm.cellIsOpen = false">Week</label>
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'" ng-click="vm.cellIsOpen = false">Day</label>
+      </div>
+    </div>
+
+    <div class="col-md-12 text-center">
+      <h3>Number of days of week </h3>
+      <p>Quite usefull to use on mobile devices</p>
+      <div class="btn-group">
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="7">7 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="6">6 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="5">5 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="4">4 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="3">3 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="2">2 days</label>
+        <label class="btn btn-info" ng-model="vm.weekViewDays" uib-btn-radio="1">1 day</label>
+      </div>
+    </div>
+
+  </div>
+
+  <br>
+
+  <mwl-calendar
+    events="vm.events"
+    view="vm.calendarView"
+    view-title="vm.calendarTitle"
+    view-date="vm.viewDate"
+    on-event-click="vm.eventClicked(calendarEvent)"
+    on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
+    cell-is-open="vm.cellIsOpen"
+    day-view-start="06:00"
+    day-view-end="22:59"
+    day-view-split="30"
+    week-view-days="vm.weekViewDays"
+    cell-modifier="vm.modifyCell(calendarCell)"
+    cell-auto-open-disabled="true"
+    on-timespan-click="vm.timespanClicked(calendarDate, calendarCell)">
+  </mwl-calendar>
+
+</div>

package.json

@@ -20,7 +20,7 @@
     "angular": "~1.6.0",
     "angular-mocks": "~1.6.0",
     "bootstrap": "^3.3.6",
-    "calendar-utils": "^0.0.42",
+    "calendar-utils": "github:azachar/calendar-utils",
     "codecov-lite": "^0.1.3",
     "commitizen": "^2.9.2",
     "concurrently": "^3.1.0",

src/directives/mwlCalendar.js

@@ -38,6 +38,7 @@ angular
       }
 
       vm.events = vm.events || [];
+      vm.weekViewDays = vm.weekViewDays || 7;
 
       var previousDate = moment(vm.viewDate);
       var previousView = vm.view;
@@ -73,10 +74,11 @@ angular
         //if on-timespan-click="calendarDay = calendarDate" is set then don't update the view as nothing needs to change
         var currentDate = moment(vm.viewDate);
         var shouldUpdate = true;
-        if (
-          previousDate.clone().startOf(vm.view).isSame(currentDate.clone().startOf(vm.view)) &&
-          !previousDate.isSame(currentDate) &&
-          vm.view === previousView
+        if (!previousDate.isSame(currentDate) && vm.view === previousView &&
+             ((vm.view !== 'week' || vm.view !== 'weeks') && previousDate.clone().startOf(vm.view).isSame(currentDate.clone().startOf(vm.view)) &&
+              (vm.view === 'week' || vm.view === 'weeks') &&
+              calendarHelper.getStartOfWeek(previousDate.clone(), vm.weekViewDays).isSame(calendarHelper.getStartOfWeek(currentDate.clone(), vm.weekViewDays))
+             )
         ) {
           shouldUpdate = false;
         }
@@ -101,6 +103,7 @@ angular
           'vm.viewDate',
           'vm.view',
           'vm.cellIsOpen',
+          'vm.weekViewDays',
           function() {
             return moment.locale() + $locale.id; //Auto update the calendar when the locale changes
           }
@@ -151,6 +154,7 @@ angular
         dayViewEventChunkSize: '@',
         dayViewEventWidth: '@',
         templateScope: '=?',
+        weekViewDays: '=?',
         dayViewTimePosition: '@'
       },
       controller: 'MwlCalendarCtrl as vm',

src/directives/mwlCalendarWeek.js

@@ -13,6 +13,7 @@ angular
 
     $scope.$on('calendar.refreshView', function() {
       vm.dayViewSplit = vm.dayViewSplit || 30;
+      vm.weekViewDays = vm.weekViewDays || 7;
       vm.dayViewHeight = calendarHelper.getDayViewHeight(
         vm.dayViewStart,
         vm.dayViewEnd,
@@ -24,10 +25,11 @@ angular
           vm.viewDate,
           vm.dayViewStart,
           vm.dayViewEnd,
-          vm.dayViewSplit
+          vm.dayViewSplit,
+          vm.weekViewDays
         );
       } else {
-        vm.view = calendarHelper.getWeekView(vm.events, vm.viewDate);
+        vm.view = calendarHelper.getWeekView(vm.events, vm.viewDate, vm.weekViewDays);
       }
     });
 
@@ -99,6 +101,7 @@ angular
         onDateRangeSelect: '=',
         customTemplateUrls: '=?',
         cellModifier: '=',
+        weekViewDays: '=?',
         templateScope: '='
       },
       controller: 'MwlCalendarWeekCtrl as vm',

src/directives/mwlDateModifier.js

@@ -12,9 +12,17 @@ angular
       if (angular.isDefined($attrs.setToToday)) {
         vm.date = new Date();
       } else if (angular.isDefined($attrs.increment)) {
-        vm.date = moment(vm.date).add(1, vm.increment).toDate();
+        if ((vm.increment === 'weeks' || vm.increment === 'week') && angular.isDefined($attrs.weekViewDays)) {
+          vm.date = moment(vm.date).add(vm.weekViewDays, 'days').toDate();
+        } else {
+          vm.date = moment(vm.date).add(1, vm.increment).toDate();
+        }
       } else if (angular.isDefined($attrs.decrement)) {
-        vm.date = moment(vm.date).subtract(1, vm.decrement).toDate();
+        if ((vm.decrement === 'weeks' || vm.decrement === 'week') && angular.isDefined($attrs.weekViewDays)) {
+          vm.date = moment(vm.date).subtract(vm.weekViewDays, 'days').toDate();
+        } else {
+          vm.date = moment(vm.date).subtract(1, vm.decrement).toDate();
+        }
       }
       $scope.$apply();
     }
@@ -34,7 +42,8 @@ angular
       scope: {
         date: '=',
         increment: '=',
-        decrement: '='
+        decrement: '=',
+        weekViewDays: '=?'
       },
       bindToController: true
     };

src/less/grid-mixin.less

@@ -0,0 +1,33 @@
+.gridForWeekOf(@days) {
+  @oneDay: 100% / @days;
+  @oneDayIE: 0.9993781095 * @oneDay;
+  //magic constant, have no idea from where it comes from
+
+  .generate-day();
+
+  .generate-day(@i:1) when (@i =< @days) {
+    .cal-row-fluid .cal-cell@{i} {
+      width:  (@i * @oneDay);
+      *width: (@i * @oneDayIE);
+    }
+
+    .cal-row-fluid .cal-offset@{i},
+    .cal-row-fluid .cal-offset@{i}:first-child,
+    .cal-week-box .cal-offset@{i} {
+      margin-left: (@i * @oneDay);
+      *margin-left: (@i * @oneDayIE);
+    }
+    .generate-day(@i + 1);
+  }
+
+}
+
+.gridForWeeks(@i:1) when (@i =< 7) {
+  .cal-week-box {
+    &.cal-grid-@{i} {
+      .gridForWeekOf(@i);
+    }
+  }
+
+  .gridForWeeks(@i + 1);
+}