feat(excludeDays): add an option to hide days on the month and week views

Author: etwillbefine

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 typings
 coverage
+dist

demos/demo-app.module.ts

@@ -34,6 +34,7 @@ import * as disableTooltips from './demo-modules/disable-tooltips';
 import * as additionalEventProperties from './demo-modules/additional-event-properties';
 import * as selectableMonthDay from './demo-modules/selectable-month-day';
 import * as minMaxDate from './demo-modules/min-max-date';
+import * as excludeDays from './demo-modules/exclude-days';
 
 @NgModule({
   declarations: [DemoAppComponent],
@@ -64,6 +65,7 @@ import * as minMaxDate from './demo-modules/min-max-date';
     additionalEventProperties.DemoModule,
     selectableMonthDay.DemoModule,
     minMaxDate.DemoModule,
+    excludeDays.DemoModule,
     RouterModule.forRoot([{
       path: 'kitchen-sink',
       component: kitchenSink.DemoComponent,
@@ -154,6 +156,12 @@ import * as minMaxDate from './demo-modules/min-max-date';
       data: {
         label: 'Day modifier'
       }
+    }, {
+      path: 'exclude-days',
+      component: excludeDays.DemoComponent,
+      data: {
+        label: 'Exclude Weekends'
+      }
     }, {
       path: 'i18n',
       component: i18n.DemoComponent,
@@ -217,4 +225,4 @@ import * as minMaxDate from './demo-modules/min-max-date';
   ],
   bootstrap: [DemoAppComponent]
 })
-export class DemoAppModule {}
+export class DemoAppModule {}

demos/demo-modules/day-modifier/template.html

@@ -20,4 +20,4 @@
     [viewDate]="viewDate"
     [events]="events">
   </mwl-calendar-day-view>
-</div>
+</div>

demos/demo-modules/exclude-days/component.ts

@@ -0,0 +1,48 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { CalendarEvent } from 'angular-calendar';
+import { subDays, addDays } from 'date-fns';
+import { colors } from '../demo-utils/colors';
+
+@Component({
+  selector: 'mwl-demo-component',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: 'template.html',
+})
+export class DemoComponent {
+
+  view: string = 'month';
+
+  viewDate: Date = new Date('2016-01-05');
+
+  events: CalendarEvent[] = [{
+    start: new Date('2016-01-08'),
+    end: new Date('2016-01-10'),
+    title: 'One day excluded event',
+    color: colors.red
+  }, {
+    start: new Date('2016-01-01'),
+    end: new Date('2016-01-09'),
+    title: 'Multiple weeks event',
+    color: colors.blue
+  }];
+
+  // exclude weekends
+  excludeDays: number[] = [0, 6];
+
+  skipWeekends(direction: 'back' | 'forward'): void {
+    if (this.view === 'day') {
+      if (direction === 'back') {
+        while (this.excludeDays.indexOf(this.viewDate.getDay()) > -1) {
+          this.viewDate = subDays(this.viewDate, 1);
+        }
+      } else if (direction === 'forward') {
+        while (this.excludeDays.indexOf(this.viewDate.getDay()) > -1) {
+          this.viewDate = addDays(this.viewDate, 1);
+        }
+      }
+    }
+  }
+
+}
+

demos/demo-modules/exclude-days/index.ts

@@ -0,0 +1,2 @@
+export * from './module';
+export * from './component';

demos/demo-modules/exclude-days/module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CalendarModule } from 'angular-calendar';
+import { DemoUtilsModule } from '../demo-utils/module';
+import { DemoComponent } from './component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CalendarModule.forRoot(),
+    DemoUtilsModule
+  ],
+  declarations: [
+    DemoComponent
+  ],
+  exports: [
+    DemoComponent
+  ]
+})
+export class DemoModule {}

demos/demo-modules/exclude-days/template.html

@@ -0,0 +1,74 @@
+<div class="row text-center">
+  <div class="col-md-4">
+    <div class="btn-group">
+      <div
+        class="btn btn-primary"
+        mwlCalendarPreviousView
+        [view]="view"
+        [(viewDate)]="viewDate"
+        (viewDateChange)="skipWeekends('back')">
+        Previous
+      </div>
+      <div
+        class="btn btn-secondary"
+        mwlCalendarToday
+        [(viewDate)]="viewDate">
+        Today
+      </div>
+      <div
+        class="btn btn-primary"
+        mwlCalendarNextView
+        [view]="view"
+        [(viewDate)]="viewDate"
+        (viewDateChange)="skipWeekends('forward')">
+        Next
+      </div>
+    </div>
+  </div>
+  <div class="col-md-4">
+    <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
+  </div>
+  <div class="col-md-4">
+    <div class="btn-group">
+      <div
+        class="btn btn-primary"
+        (click)="view = 'month'"
+        [class.active]="view === 'month'">
+        Month
+      </div>
+      <div
+        class="btn btn-primary"
+        (click)="view = 'week'"
+        [class.active]="view === 'week'">
+        Week
+      </div>
+      <div
+        class="btn btn-primary"
+        (click)="view = 'day'"
+        [class.active]="view === 'day'">
+        Day
+      </div>
+    </div>
+  </div>
+</div>
+<br>
+
+<div [ngSwitch]="view">
+  <mwl-calendar-month-view
+    *ngSwitchCase="'month'"
+    [viewDate]="viewDate"
+    [events]="events"
+    [excludeDays]="excludeDays">
+  </mwl-calendar-month-view>
+  <mwl-calendar-week-view
+    *ngSwitchCase="'week'"
+    [excludeDays]="excludeDays"
+    [viewDate]="viewDate"
+    [events]="events">
+  </mwl-calendar-week-view>
+  <mwl-calendar-day-view
+    *ngSwitchCase="'day'"
+    [viewDate]="viewDate"
+    [events]="events">
+  </mwl-calendar-day-view>
+</div>

demos/demo-modules/selectable-month-day/component.ts

@@ -31,4 +31,3 @@ export class DemoComponent {
   }
 
 }
-

demos/demo-modules/selectable-month-day/template.html

@@ -2,4 +2,4 @@
   [viewDate]="viewDate"
   [events]="events"
   (dayClicked)="dayClicked($event.day)">
-</mwl-calendar-month-view>
+</mwl-calendar-month-view>

src/components/month/calendarMonthView.component.ts

@@ -60,7 +60,7 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTi
         <div *ngFor="let rowIndex of view.rowOffsets">
           <div class="cal-cell-row">
             <mwl-calendar-month-cell
-              *ngFor="let day of view.days | slice : rowIndex : rowIndex + 7"
+              *ngFor="let day of view.days | slice : rowIndex : rowIndex + (view.totalDaysVisibleInWeek)"
               [class.cal-drag-over]="day.dragOver"
               [day]="day"
               [openDay]="openDay"
@@ -98,6 +98,11 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
    */
   @Input() events: CalendarEvent[] = [];
 
+  /**
+   * An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view
+   */
+  @Input() excludeDays: number[] = [];
+
   /**
    * Whether the events list for the day of the `viewDate` option is visible or not
    */
@@ -193,18 +198,17 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
    */
   ngOnChanges(changes: any): void {
 
-    if (changes.viewDate) {
+    if (changes.viewDate || changes.excludeDays) {
       this.refreshHeader();
     }
 
-    if (changes.viewDate || changes.events) {
+    if (changes.viewDate || changes.events || changes.excludeDays) {
       this.refreshBody();
     }
 
-    if (changes.activeDayIsOpen || changes.viewDate || changes.events) {
+    if (changes.activeDayIsOpen || changes.viewDate || changes.events || changes.excludeDays) {
       this.checkActiveDayIsOpen();
     }
-
   }
 
   /**
@@ -248,15 +252,17 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
   private refreshHeader(): void {
     this.columnHeaders = getWeekViewHeader({
       viewDate: this.viewDate,
-      weekStartsOn: this.weekStartsOn
+      weekStartsOn: this.weekStartsOn,
+      excluded: this.excludeDays
     });
   }
 
   private refreshBody(): void {
     this.view = getMonthView({
       events: this.events,
       viewDate: this.viewDate,
-      weekStartsOn: this.weekStartsOn
+      weekStartsOn: this.weekStartsOn,
+      excluded: this.excludeDays
     });
     if (this.dayModifier) {
       this.view.days.forEach(day => this.dayModifier(day));
@@ -267,7 +273,7 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
     if (this.activeDayIsOpen === true) {
       this.openDay = this.view.days.find(day => isSameDay(day.date, this.viewDate));
       const index: number = this.view.days.indexOf(this.openDay);
-      this.openRowIndex = Math.floor(index / 7) * 7;
+      this.openRowIndex = Math.floor(index / this.view.totalDaysVisibleInWeek) * this.view.totalDaysVisibleInWeek;
     } else {
       this.openRowIndex = null;
       this.openDay = null;

src/components/week/calendarWeekView.component.ts

@@ -59,8 +59,8 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTi
           #event
           [class.cal-draggable]="weekEvent.event.draggable"
           *ngFor="let weekEvent of eventRow.row"
-          [style.width]="((100 / 7) * weekEvent.span) + '%'"
-          [style.marginLeft]="((100 / 7) * weekEvent.offset) + '%'"
+          [style.width]="((100 / days.length) * weekEvent.span) + '%'"
+          [style.marginLeft]="((100 / days.length) * weekEvent.offset) + '%'"
           mwlResizable
           [resizeEdges]="{left: weekEvent.event?.resizable?.beforeStart, right: weekEvent.event?.resizable?.afterEnd}"
           [resizeSnapGrid]="{left: getDayColumnWidth(eventRowContainer), right: getDayColumnWidth(eventRowContainer)}"
@@ -96,6 +96,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() events: CalendarEvent[] = [];
 
+  /**
+   * An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view
+   */
+  @Input() excludeDays: number[] = [];
+
   /**
    * An observable that when emitted on will re-render the current view
    */
@@ -189,11 +194,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   ngOnChanges(changes: any): void {
 
-    if (changes.viewDate) {
+    if (changes.viewDate || changes.excludeDays) {
       this.refreshHeader();
     }
 
-    if (changes.events || changes.viewDate) {
+    if (changes.events || changes.viewDate || changes.excludeDays) {
       this.refreshBody();
     }
 
@@ -284,7 +289,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    * @hidden
    */
   getDayColumnWidth(eventRowContainer: HTMLElement): number {
-    return Math.floor(eventRowContainer.offsetWidth / 7);
+    return Math.floor(eventRowContainer.offsetWidth / this.days.length);
   }
 
   /**
@@ -299,15 +304,17 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   private refreshHeader(): void {
     this.days = getWeekViewHeader({
       viewDate: this.viewDate,
-      weekStartsOn: this.weekStartsOn
+      weekStartsOn: this.weekStartsOn,
+      excluded: this.excludeDays
     });
   }
 
   private refreshBody(): void {
     this.eventRows = getWeekView({
       events: this.events,
       viewDate: this.viewDate,
-      weekStartsOn: this.weekStartsOn
+      weekStartsOn: this.weekStartsOn,
+      excluded: this.excludeDays
     });
   }
 

test/calendarMonthView.component.spec.ts

@@ -45,10 +45,33 @@ describe('calendarMonthView component', () => {
     fixture.componentInstance.ngOnChanges({viewDate: {}});
     expect(fixture.componentInstance.view.rowOffsets).to.deep.equal([0, 7, 14, 21, 28]);
     expect(fixture.componentInstance.view.days.length).to.equal(35);
+    expect(fixture.componentInstance.view.totalDaysVisibleInWeek).to.equal(7);
     expect(fixture.componentInstance.view.days[0].date).to.deep.equal(moment('2016-05-29').toDate());
     fixture.destroy();
   });
 
+  it('should generate the month view without from week excluded days', () => {
+    const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-01-10');
+    fixture.componentInstance.excludeDays = [0, 6];
+    fixture.componentInstance.ngOnChanges({viewDate: {}});
+    expect(fixture.componentInstance.view.days.length).to.equal(30);
+    expect(fixture.componentInstance.view.totalDaysVisibleInWeek).to.equal(5);
+    expect(fixture.componentInstance.view.rowOffsets).to.deep.equal([0, 5, 10, 15, 20, 25]);
+    expect(fixture.componentInstance.view.days[0].date).to.deep.equal(moment('2015-12-28').toDate());
+    fixture.destroy();
+  });
+
+  it('should update the month view when excluded days changed', () => {
+    const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-01-10');
+    fixture.componentInstance.excludeDays = [0, 1, 2];
+    fixture.componentInstance.ngOnChanges({excludeDays: {}});
+    expect(fixture.componentInstance.view.days.length).to.equal(24);
+    expect(fixture.componentInstance.view.totalDaysVisibleInWeek).to.equal(4);
+    fixture.destroy();
+  });
+
   it('should open and close the active day events list', () => {
     const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
     expect(fixture.componentInstance.openRowIndex).to.be.undefined;