feat(calendar): add week number column (#1963)

packages-smoke/package.json

@@ -27,7 +27,7 @@
     "@nebular/security": "4.1.3",
     "@nebular/theme": "4.1.3",
     "core-js": "^2.5.7",
-    "date-fns": "^1.29.0",
+    "date-fns": "^2.0.0-alpha.27",
     "eva-icons": "1.1.1",
     "moment": "^2.22.2",
     "rxjs": "6.5.2",

scripts/gulp/tasks/build/bundle/rollup-config.ts

@@ -38,6 +38,7 @@ const ROLLUP_GLOBALS = {
   'moment': 'moment',
   'date-fns/parse': 'date-fns.parse',
   'date-fns/format': 'date-fns.format',
+  'date-fns/getWeek': 'date-fns.getWeek',
 
   // @nebular dependencies
   '@nebular/theme': 'nb.theme',

src/app/playground-components.ts

@@ -245,6 +245,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'CalendarWithoutHeaderComponent',
         name: 'Calendar Without Header',
       },
+      {
+        path: 'calendar-week-number.component',
+        link: '/calendar/calendar-week-number.component',
+        component: 'CalendarWeekNumberComponent',
+        name: 'Calendar Week Number',
+      },
     ],
   },
   {

src/framework/date-fns/services/date-fns-date.service.ts

@@ -14,14 +14,19 @@ import { default as rollupParse } from 'date-fns/parse';
 import * as dateFnsFormat from 'date-fns/format';
 // @ts-ignore
 import { default as rollupFormat } from 'date-fns/format';
+import * as dateFnsGetWeek from 'date-fns/getWeek';
+// @ts-ignore
+import { default as rollupGetWeek } from 'date-fns/getWeek';
 
 const parse = rollupParse || dateFnsParse;
 const formatDate = rollupFormat || dateFnsFormat;
+const getWeek = rollupGetWeek || dateFnsGetWeek;
 
 export interface NbDateFnsOptions {
   format: string;
   parseOptions: {},
   formatOptions: {},
+  getWeekOptions: {},
 }
 
 @Injectable()
@@ -52,4 +57,8 @@ export class NbDateFnsDateService extends NbNativeDateService {
   getId(): string {
     return 'date-fns';
   }
+
+  getWeekNumber(date: Date): number {
+    return getWeek(date, this.options.getWeekOptions);
+  }
 }

src/framework/moment/services/moment-date.service.ts

@@ -167,4 +167,8 @@ export class NbMomentDateService extends NbDateService<Moment> {
       },
     };
   }
+
+  getWeekNumber(date: Moment): number {
+    return date.week();
+  }
 }

src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss

@@ -51,16 +51,57 @@
     width: nb-theme(calendar-navigation-button-width);
   }
 
-  nb-calendar-days-names .day {
-    width: nb-theme(calendar-weekday-width);
-    height: nb-theme(calendar-weekday-height);
-    color: nb-theme(calendar-weekday-text-color);
-    font-size: nb-theme(calendar-weekday-text-font-size);
-    font-weight: nb-theme(calendar-weekday-text-font-weight);
-    line-height: nb-theme(calendar-weekday-text-line-height);
+  nb-calendar-week-numbers {
+    background: nb-theme(calendar-weeknumber-background);
+    font-size: nb-theme(calendar-weeknumber-text-font-size);
+    font-weight: nb-theme(calendar-weeknumber-text-font-weight);
+    line-height: nb-theme(calendar-weeknumber-text-line-height);
+    border-right: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color);
+    border-top: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color);
+
+    .sign {
+      border-bottom: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color);
+    }
+
+    &.size-medium {
+      .sign,
+      .week-cell {
+        height: nb-theme(calendar-day-cell-height);
+      }
+    }
+
+    &.size-large {
+      .sign,
+      .week-cell {
+        height: nb-theme(calendar-day-cell-large-height);
+      }
+    }
+
+    .sign,
+    .week-cell {
+      height: nb-theme(calendar-weeknumber-height);
+      width: nb-theme(calendar-weeknumber-width);
+    }
+
 
-    &.holiday {
-      color: nb-theme(calendar-weekday-holiday-text-color);
+  }
+
+  nb-calendar-days-names {
+    background: nb-theme(calendar-weekday-background);
+    border-top: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color);
+    border-bottom: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color);
+
+    .day {
+      width: nb-theme(calendar-weekday-width);
+      height: nb-theme(calendar-weekday-height);
+      color: nb-theme(calendar-weekday-text-color);
+      font-size: nb-theme(calendar-weekday-text-font-size);
+      font-weight: nb-theme(calendar-weekday-text-font-weight);
+      line-height: nb-theme(calendar-weekday-text-line-height);
+
+      &.holiday {
+        color: nb-theme(calendar-weekday-holiday-text-color);
+      }
     }
   }
 
@@ -70,9 +111,15 @@
       height: nb-theme(calendar-day-cell-height);
     }
 
-    &.large .day-cell {
-      width: nb-theme(calendar-day-cell-large-width);
-      height: nb-theme(calendar-day-cell-large-height);
+    &.large {
+      .day-cell {
+        width: nb-theme(calendar-day-cell-large-width);
+        height: nb-theme(calendar-day-cell-large-height);
+      }
+      .day {
+        height: nb-theme(calendar-weekday-large-height);
+        width: nb-theme(calendar-weekday-large-width);
+      }
     }
   }
 
@@ -114,20 +161,33 @@
     }
   }
 
+  nb-calendar-week-numbers .week-cell,
+  nb-calendar-week-numbers .sign,
+  nb-calendar-day-picker .day-cell,
+  nb-calendar-month-picker .month-cell,
+  nb-calendar-year-picker .year-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 1px;
+  }
+
+  nb-calendar-week-numbers .week-cell,
+  nb-calendar-week-numbers .sign {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
   nb-calendar-day-picker .day-cell,
   nb-calendar-month-picker .month-cell,
   nb-calendar-year-picker .year-cell {
-    border-radius: nb-theme(calendar-border-radius);
-    color: nb-theme(calendar-text-color);
     font-family: nb-theme(calendar-text-font-family);
     font-size: nb-theme(calendar-text-font-size);
     font-weight: nb-theme(calendar-text-font-weight);
     line-height: nb-theme(calendar-text-line-height);
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 1px;
+    border-radius: nb-theme(calendar-border-radius);
+    color: nb-theme(calendar-text-color);
 
     &:not(.empty):not(.disabled) {
       cursor: pointer;

src/framework/theme/components/calendar-kit/calendar-kit.module.ts

@@ -28,6 +28,7 @@ import { NbCalendarPickerComponent } from './components/calendar-picker/calendar
 import { NbCalendarPickerRowComponent } from './components/calendar-picker/calendar-picker-row.component';
 import { NbCalendarYearCellComponent } from './components/calendar-year-picker/calendar-year-cell.component';
 import { NbCalendarYearPickerComponent } from './components/calendar-year-picker/calendar-year-picker.component';
+import { NbCalendarWeekNumberComponent } from './components/calendar-week-number/nb-calendar-week-number.component';
 
 import { NbNativeDateService } from './services/native-date.service';
 
@@ -51,6 +52,7 @@ const COMPONENTS = [
   NbCalendarYearCellComponent,
   NbCalendarPickerRowComponent,
   NbCalendarPickerComponent,
+  NbCalendarWeekNumberComponent,
 ];
 
 /**

src/framework/theme/components/calendar-kit/components/calendar-day-picker/calendar-day-picker.component.ts

@@ -19,26 +19,34 @@ import {
 import { NbCalendarMonthModelService } from '../../services/calendar-month-model.service';
 import { NbCalendarDayCellComponent } from './calendar-day-cell.component';
 import { NbCalendarCell, NbCalendarSize } from '../../model';
+import { convertToBoolProperty } from '../../../helpers';
 
 
 /**
  * Provides capability pick days.
  * */
 @Component({
   selector: 'nb-calendar-day-picker',
-  styles: [` :host { display: block; } `],
+  styles: [` :host { display: flex; } `],
   template: `
-    <nb-calendar-days-names></nb-calendar-days-names>
-    <nb-calendar-picker
-      [data]="weeks"
-      [visibleDate]="visibleDate"
-      [selectedValue]="date"
-      [cellComponent]="cellComponent"
-      [min]="min"
-      [max]="max"
-      [filter]="filter"
-      (select)="onSelect($event)">
-    </nb-calendar-picker>
+    <nb-calendar-week-numbers *ngIf="showWeekNumber"
+                              [weeks]="weeks"
+                              [size]="size"
+                              [weekNumberSymbol]="weekNumberSymbol">
+    </nb-calendar-week-numbers>
+    <div>
+      <nb-calendar-days-names></nb-calendar-days-names>
+      <nb-calendar-picker
+          [data]="weeks"
+          [visibleDate]="visibleDate"
+          [selectedValue]="date"
+          [cellComponent]="cellComponent"
+          [min]="min"
+          [max]="max"
+          [filter]="filter"
+          (select)="onSelect($event)">
+      </nb-calendar-picker>
+    </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -92,6 +100,24 @@ export class NbCalendarDayPickerComponent<D, T> implements OnChanges {
    * */
   @Input() date: T;
 
+  /**
+   * Determines should we show week numbers column.
+   * False by default.
+   * */
+  @Input()
+  get showWeekNumber(): boolean {
+    return this._showWeekNumber;
+  }
+  set showWeekNumber(value: boolean) {
+    this._showWeekNumber = convertToBoolProperty(value);
+  }
+  protected _showWeekNumber: boolean = false;
+
+  /**
+   * Sets symbol used as a header for week numbers column
+   * */
+  @Input() weekNumberSymbol: string;
+
   /**
    * Fires newly selected date.
    * */

src/framework/theme/components/calendar-kit/components/calendar-days-names/calendar-days-names.component.scss

@@ -12,6 +12,5 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: 1px;
   }
 }

src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.scss

@@ -4,10 +4,34 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
+@import '../../../../styles/core/mixins';
+
 :host {
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  .prev-month {
+    @include nb-ltr() {
+      margin-left: auto;
+      margin-right: 0.4rem;
+    }
+    @include nb-rtl() {
+      margin-left: 0.4rem;
+      margin-right: auto;
+    }
+  }
+
+  .next-month {
+    @include nb-ltr() {
+      margin-left: 0.4rem;
+      margin-right: auto;
+    }
+    @include nb-rtl() {
+      margin-left: auto;
+      margin-right: 0.4rem;
+    }
+  }
 }
 
 nb-calendar-navigation {

src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.ts

@@ -13,11 +13,11 @@ import { NbLayoutDirectionService } from '../../../../services/direction.service
   selector: 'nb-calendar-pageable-navigation',
   styleUrls: ['./calendar-pageable-navigation.component.scss'],
   template: `
-    <button nbButton (click)="prev.emit()" ghost>
+    <button nbButton (click)="prev.emit()" ghost size="small" class="prev-month">
       <nb-icon [icon]="isLtr ? 'chevron-left-outline' : 'chevron-right-outline'" pack="nebular-essentials"></nb-icon>
     </button>
     <nb-calendar-navigation [date]="date" (changeMode)="changeMode.emit()"></nb-calendar-navigation>
-    <button nbButton (click)="next.emit()" ghost>
+    <button nbButton (click)="next.emit()" ghost size="small" class="next-month">
       <nb-icon [icon]="isLtr ? 'chevron-right-outline' : 'chevron-left-outline'" pack="nebular-essentials"></nb-icon>
     </button>
   `,

src/framework/theme/components/calendar-kit/components/calendar-week-number/nb-calendar-week-number.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: flex; // prevents margin collapsing
+  flex-direction: column;
+}