feat(weekendDays): allow weekend days to be customised

Matt Lewis · Matt Lewis · commit 581b9a87f34d · 2017-06-25T16:41:03.000+01:00
Closes #255
diff --git a/demos/demo-modules/i18n/component.ts b/demos/demo-modules/i18n/component.ts
@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CalendarEvent, CalendarDateFormatter } from 'angular-calendar';
+import { CalendarEvent, CalendarDateFormatter, DAYS_OF_WEEK } from 'angular-calendar';
 import { CustomDateFormatter } from './custom-date-formatter.provider';
 
 @Component({
@@ -21,7 +21,12 @@ export class DemoComponent {
 
   locale: string = 'fr';
 
-  weekStartsOn: number = 1;
+  weekStartsOn: number = DAYS_OF_WEEK.MONDAY;
+
+  weekendDays: number[] = [
+    DAYS_OF_WEEK.FRIDAY,
+    DAYS_OF_WEEK.SATURDAY
+  ];
 
 }
 
diff --git a/demos/demo-modules/i18n/template.html b/demos/demo-modules/i18n/template.html
@@ -10,14 +10,16 @@
     [viewDate]="viewDate"
     [events]="events"
     [locale]="locale"
-    [weekStartsOn]="weekStartsOn">
+    [weekStartsOn]="weekStartsOn"
+    [weekendDays]="weekendDays">
   </mwl-calendar-month-view>
   <mwl-calendar-week-view
     *ngSwitchCase="'week'"
     [viewDate]="viewDate"
     [events]="events"
     [locale]="locale"
-    [weekStartsOn]="weekStartsOn">
+    [weekStartsOn]="weekStartsOn"
+    [weekendDays]="weekendDays">
   </mwl-calendar-week-view>
   <mwl-calendar-day-view
     *ngSwitchCase="'day'"
diff --git a/package.json b/package.json
@@ -143,7 +143,7 @@
   "dependencies": {
     "angular-draggable-droppable": "^1.0.1",
     "angular-resizable-element": "^1.1.1",
-    "calendar-utils": "0.0.53",
+    "calendar-utils": "0.0.54",
     "date-fns": "^1.28.5",
     "positioning": "^1.0.4"
   }
diff --git a/src/components/month/calendarMonthView.component.ts b/src/components/month/calendarMonthView.component.ts
@@ -147,6 +147,11 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
    */
   @Input() openDayEventsTemplate: TemplateRef<any>;
 
+  /**
+   * An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends
+   */
+  @Input() weekendDays: number[];
+
   /**
    * Called when the day cell is clicked
    */
@@ -211,11 +216,11 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
    */
   ngOnChanges(changes: any): void {
 
-    if (changes.viewDate || changes.excludeDays) {
+    if (changes.viewDate || changes.excludeDays || changes.weekendDays) {
       this.refreshHeader();
     }
 
-    if (changes.viewDate || changes.events || changes.excludeDays) {
+    if (changes.viewDate || changes.events || changes.excludeDays || changes.weekendDays) {
       this.refreshBody();
     }
 
@@ -266,7 +271,8 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
     this.columnHeaders = this.utils.getWeekViewHeader({
       viewDate: this.viewDate,
       weekStartsOn: this.weekStartsOn,
-      excluded: this.excludeDays
+      excluded: this.excludeDays,
+      weekendDays: this.weekendDays
     });
   }
 
@@ -275,7 +281,8 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
       events: this.events,
       viewDate: this.viewDate,
       weekStartsOn: this.weekStartsOn,
-      excluded: this.excludeDays
+      excluded: this.excludeDays,
+      weekendDays: this.weekendDays
     });
     if (this.dayModifier) {
       this.view.days.forEach(day => this.dayModifier(day));
diff --git a/src/components/week/calendarWeekView.component.ts b/src/components/week/calendarWeekView.component.ts
@@ -147,6 +147,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() allowDragOutside: boolean = false;
 
+  /**
+   * An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends
+   */
+  @Input() weekendDays: number[];
+
   /**
    * Called when a header week day is clicked
    */
@@ -216,7 +221,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   ngOnChanges(changes: any): void {
 
-    if (changes.viewDate || changes.excludeDays) {
+    if (changes.viewDate || changes.excludeDays || changes.weekendDays) {
       this.refreshHeader();
     }
 
@@ -349,7 +354,8 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
     this.days = this.utils.getWeekViewHeader({
       viewDate: this.viewDate,
       weekStartsOn: this.weekStartsOn,
-      excluded: this.excludeDays
+      excluded: this.excludeDays,
+      weekendDays: this.weekendDays
     });
   }
 
diff --git a/src/index.ts b/src/index.ts
@@ -9,4 +9,9 @@ export * from './calendar.module';
 export * from './components/day/calendarDayView.component';
 export * from './components/month/calendarMonthView.component';
 export * from './components/week/calendarWeekView.component';
-export { CalendarEvent, EventAction as CalendarEventAction, MonthViewDay as CalendarMonthViewDay } from 'calendar-utils';
+export {
+  CalendarEvent,
+  EventAction as CalendarEventAction,
+  MonthViewDay as CalendarMonthViewDay,
+  DAYS_OF_WEEK
+} from 'calendar-utils';
diff --git a/test/calendarMonthView.component.spec.ts b/test/calendarMonthView.component.spec.ts
@@ -16,7 +16,8 @@ import {
   CalendarDateFormatter,
   CalendarModule,
   MOMENT,
-  CalendarMonthViewDay
+  CalendarMonthViewDay,
+  DAYS_OF_WEEK
 } from './../src';
 import { CalendarMonthViewComponent } from './../src/components/month/calendarMonthView.component';
 import { Subject } from 'rxjs/Subject';
@@ -527,4 +528,23 @@ describe('calendarMonthView component', () => {
     fixture.destroy();
   });
 
+  it('should allow the weekend days to be customised', () => {
+    const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
+    fixture.componentInstance.viewDate = new Date('2017-06-25');
+    fixture.componentInstance.weekendDays = [
+      DAYS_OF_WEEK.FRIDAY,
+      DAYS_OF_WEEK.SATURDAY
+    ];
+    fixture.componentInstance.ngOnChanges({viewDate: {}, weekendDays: {}});
+    fixture.detectChanges();
+    expect(fixture.componentInstance.view.days[0].isWeekend).to.equal(false);
+    expect(fixture.componentInstance.view.days[5].isWeekend).to.equal(true);
+    expect(fixture.componentInstance.view.days[6].isWeekend).to.equal(true);
+    const headerCells: HTMLElement[] = fixture.nativeElement.querySelectorAll('.cal-header .cal-cell');
+    expect(headerCells[0].classList.contains('cal-weekend')).to.equal(false);
+    expect(headerCells[5].classList.contains('cal-weekend')).to.equal(true);
+    expect(headerCells[6].classList.contains('cal-weekend')).to.equal(true);
+    fixture.destroy();
+  });
+
 });
diff --git a/test/calendarWeekView.component.spec.ts b/test/calendarWeekView.component.spec.ts
@@ -14,7 +14,8 @@ import {
   CalendarDateFormatter,
   CalendarModule,
   MOMENT,
-  CalendarEventTimesChangedEvent
+  CalendarEventTimesChangedEvent,
+  DAYS_OF_WEEK
 } from '../src';
 import { CalendarWeekViewComponent } from '../src/components/week/calendarWeekView.component';
 import { DragAndDropModule } from 'angular-draggable-droppable';
@@ -600,4 +601,20 @@ describe('calendarWeekView component', () => {
     });
   });
 
+  it('should allow the weekend days to be customised', () => {
+    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(CalendarWeekViewComponent);
+    fixture.componentInstance.viewDate = new Date('2017-06-25');
+    fixture.componentInstance.weekendDays = [
+      DAYS_OF_WEEK.FRIDAY,
+      DAYS_OF_WEEK.SATURDAY
+    ];
+    fixture.componentInstance.ngOnChanges({viewDate: {}, weekendDays: {}});
+    fixture.detectChanges();
+    const headerCells: HTMLElement[] = fixture.nativeElement.querySelectorAll('.cal-header');
+    expect(headerCells[0].classList.contains('cal-weekend')).to.equal(false);
+    expect(headerCells[5].classList.contains('cal-weekend')).to.equal(true);
+    expect(headerCells[6].classList.contains('cal-weekend')).to.equal(true);
+    fixture.destroy();
+  });
+
 });
diff --git a/yarn.lock b/yarn.lock
@@ -825,9 +825,9 @@ cachedir@^1.1.0:
   dependencies:
     os-homedir "^1.0.1"
 
-calendar-utils@0.0.53:
-  version "0.0.53"
-  resolved "https://registry.yarnpkg.com/calendar-utils/-/calendar-utils-0.0.53.tgz#64284dfc2d01d8e58d672ab0d8fb13ba38bb6f88"
+calendar-utils@0.0.54:
+  version "0.0.54"
+  resolved "https://registry.yarnpkg.com/calendar-utils/-/calendar-utils-0.0.54.tgz#deb7a2d53711bd86c10a58a1e96bb733d7b61f9b"
 
 callsite@1.0.0:
   version "1.0.0"

Original file line number	Diff line number	Diff line change
`@@ -143,7 +143,7 @@`
`143`	`143`	`"dependencies": {`
`144`	`144`	`"angular-draggable-droppable": "^1.0.1",`
`145`	`145`	`"angular-resizable-element": "^1.1.1",`
`146`		`- "calendar-utils": "0.0.53",`
	`146`	`+ "calendar-utils": "0.0.54",`
`147`	`147`	`"date-fns": "^1.28.5",`
`148`	`148`	`"positioning": "^1.0.4"`
`149`	`149`	`}`