feat(day-view): make previous and next view helpers respect excludeDays

Author: mattlewis92

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

@@ -4,7 +4,6 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { CalendarEvent } from 'angular-calendar';
-import { subDays, addDays } from 'date-fns';
 import { colors } from '../demo-utils/colors';
 
 @Component({
@@ -34,18 +33,4 @@ export class DemoComponent {
 
   // 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/template.html

@@ -6,7 +6,7 @@
         mwlCalendarPreviousView
         [view]="view"
         [(viewDate)]="viewDate"
-        (viewDateChange)="skipWeekends('back')">
+        [excludeDays]="excludeDays">
         Previous
       </div>
       <div
@@ -20,7 +20,7 @@
         mwlCalendarNextView
         [view]="view"
         [(viewDate)]="viewDate"
-        (viewDateChange)="skipWeekends('forward')">
+        [excludeDays]="excludeDays">
         Next
       </div>
     </div>

src/modules/common/calendar-next-view.directive.ts

@@ -34,6 +34,11 @@ export class CalendarNextViewDirective {
    */
   @Input() viewDate: Date;
 
+  /**
+   * Days to skip when going forward by 1 day
+   */
+  @Input() excludeDays: number[];
+
   /**
    * Called when the view date is changed
    */
@@ -52,6 +57,16 @@ export class CalendarNextViewDirective {
       month: this.dateAdapter.addMonths
     }[this.view];
 
-    this.viewDateChange.emit(addFn(this.viewDate, 1));
+    let newDate = addFn(this.viewDate, 1);
+
+    while (
+      this.view === CalendarView.Day &&
+      this.excludeDays &&
+      this.excludeDays.indexOf(newDate.getDay()) > -1
+    ) {
+      newDate = this.dateAdapter.addDays(newDate, 1);
+    }
+
+    this.viewDateChange.emit(newDate);
   }
 }

src/modules/common/calendar-previous-view.directive.ts

@@ -34,6 +34,11 @@ export class CalendarPreviousViewDirective {
    */
   @Input() viewDate: Date;
 
+  /**
+   * Days to skip when going back by 1 day
+   */
+  @Input() excludeDays: number[];
+
   /**
    * Called when the view date is changed
    */
@@ -52,6 +57,16 @@ export class CalendarPreviousViewDirective {
       month: this.dateAdapter.subMonths
     }[this.view];
 
-    this.viewDateChange.emit(subFn(this.viewDate, 1));
+    let newDate = subFn(this.viewDate, 1);
+
+    while (
+      this.view === CalendarView.Day &&
+      this.excludeDays &&
+      this.excludeDays.indexOf(newDate.getDay()) > -1
+    ) {
+      newDate = this.dateAdapter.subDays(newDate, 1);
+    }
+
+    this.viewDateChange.emit(newDate);
   }
 }

test/calendar-next-view.directive.spec.ts

@@ -1,16 +1,17 @@
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { expect } from 'chai';
 import { CalendarModule, DateAdapter } from '../src';
 import { adapterFactory } from '../src/date-adapters/date-fns';
 
 @Component({
   template:
-    '<button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate">Next</button>'
+    '<button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" [excludeDays]="excludeDays">Next</button>'
 })
 class TestComponent {
-  public view: string;
-  public viewDate: Date;
+  view: string;
+  viewDate: Date;
+  excludeDays: number[];
 }
 
 describe('mwlCalendarNextView directive', () => {
@@ -27,9 +28,7 @@ describe('mwlCalendarNextView directive', () => {
   });
 
   it('should increase the view date by 1 month', () => {
-    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(
-      TestComponent
-    );
+    const fixture = TestBed.createComponent<TestComponent>(TestComponent);
     fixture.componentInstance.view = 'month';
     fixture.componentInstance.viewDate = new Date('2017-01-28');
     fixture.detectChanges();
@@ -42,9 +41,7 @@ describe('mwlCalendarNextView directive', () => {
   });
 
   it('should increase the view date by 1 week', () => {
-    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(
-      TestComponent
-    );
+    const fixture = TestBed.createComponent<TestComponent>(TestComponent);
     fixture.componentInstance.view = 'week';
     fixture.componentInstance.viewDate = new Date('2017-01-28');
     fixture.detectChanges();
@@ -57,9 +54,7 @@ describe('mwlCalendarNextView directive', () => {
   });
 
   it('should increase the view date by 1 day', () => {
-    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(
-      TestComponent
-    );
+    const fixture = TestBed.createComponent<TestComponent>(TestComponent);
     fixture.componentInstance.view = 'day';
     fixture.componentInstance.viewDate = new Date('2017-01-28');
     fixture.detectChanges();
@@ -70,4 +65,18 @@ describe('mwlCalendarNextView directive', () => {
     );
     fixture.destroy();
   });
+
+  it('should increase the view date by 1 day, skipping weekends', () => {
+    const fixture = TestBed.createComponent<TestComponent>(TestComponent);
+    fixture.componentInstance.view = 'day';
+    fixture.componentInstance.viewDate = new Date('2018-06-15');
+    fixture.componentInstance.excludeDays = [0, 6];
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.viewDate).to.deep.equal(
+      new Date('2018-06-18')
+    );
+    fixture.destroy();
+  });
 });

test/calendar-previous-view.directive.spec.ts

@@ -1,16 +1,17 @@
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { expect } from 'chai';
 import { CalendarModule, DateAdapter } from '../src';
 import { adapterFactory } from '../src/date-adapters/date-fns';
 
 @Component({
   template:
-    '<button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate">Previous</button>'
+    '<button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" [excludeDays]="excludeDays">Previous</button>'
 })
 class TestComponent {
   public view: string;
   public viewDate: Date;
+  excludeDays: number[];
 }
 
 describe('calendarPreviousView directive', () => {
@@ -27,9 +28,7 @@ describe('calendarPreviousView directive', () => {
   });
 
   it('should decrease the view date by 1 month', () => {
-    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(
-      TestComponent
-    );
+    const fixture = TestBed.createComponent<TestComponent>(TestComponent);
     fixture.componentInstance.view = 'month';
     fixture.componentInstance.viewDate = new Date('2017-02-28');
     fixture.detectChanges();
@@ -42,9 +41,7 @@ describe('calendarPreviousView directive', () => {
   });
 
   it('should decrease the view date by 1 week', () => {
-    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(
-      TestComponent
-    );
+    const fixture = TestBed.createComponent<TestComponent>(TestComponent);
     fixture.componentInstance.view = 'week';
     fixture.componentInstance.viewDate = new Date('2017-01-28');
     fixture.detectChanges();
@@ -57,9 +54,7 @@ describe('calendarPreviousView directive', () => {
   });
 
   it('should decrease the view date by 1 day', () => {
-    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(
-      TestComponent
-    );
+    const fixture = TestBed.createComponent<TestComponent>(TestComponent);
     fixture.componentInstance.view = 'day';
     fixture.componentInstance.viewDate = new Date('2017-01-28');
     fixture.detectChanges();
@@ -70,4 +65,18 @@ describe('calendarPreviousView directive', () => {
     );
     fixture.destroy();
   });
+
+  it('should decrease the view date by 1 day, skipping weekends', () => {
+    const fixture = TestBed.createComponent<TestComponent>(TestComponent);
+    fixture.componentInstance.view = 'day';
+    fixture.componentInstance.viewDate = new Date('2018-06-18');
+    fixture.componentInstance.excludeDays = [0, 6];
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.viewDate).to.deep.equal(
+      new Date('2018-06-15')
+    );
+    fixture.destroy();
+  });
 });