From 28e7468e9f8adf3f21419c61346058c8c0469c1d Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <yggg@users.noreply.github.com>
Date: Fri, 20 Sep 2019 11:39:51 +0300
Subject: [PATCH] feat(calendar): add week number column (#1963)

---
 packages-smoke/package-lock.json              |  6 +-
 packages-smoke/package.json                   |  2 +-
 .../gulp/tasks/build/bundle/rollup-config.ts  |  1 +
 src/app/playground-components.ts              |  6 ++
 .../services/date-fns-date.service.ts         |  9 ++
 .../moment/services/moment-date.service.ts    |  4 +
 .../calendar-kit/_calendar-kit.theme.scss     | 96 +++++++++++++++----
 .../calendar-kit/calendar-kit.module.ts       |  2 +
 .../calendar-day-picker.component.ts          | 50 +++++++---
 .../calendar-days-names.component.scss        |  1 -
 ...alendar-pageable-navigation.component.scss | 24 +++++
 .../calendar-pageable-navigation.component.ts |  4 +-
 .../nb-calendar-week-number.component.scss    |  4 +
 .../nb-calendar-week-number.component.ts      | 52 ++++++++++
 .../calendar-kit/services/date.service.ts     |  2 +
 .../services/native-date.service.ts           |  4 +
 .../calendar/_calendar.component.theme.scss   | 16 +++-
 .../calendar/base-calendar.component.html     |  4 +-
 .../calendar/base-calendar.component.ts       | 20 ++++
 .../calendar/calendar-range.component.ts      | 40 +++++++-
 .../components/calendar/calendar.component.ts | 41 +++++++-
 .../datepicker/datepicker.component.ts        | 21 ++++
 .../theme/styles/themes/_mapping.scss         | 36 ++++---
 .../calendar/calendar-routing.module.ts       |  5 +
 .../calendar-week-number.component.ts         | 20 ++++
 .../with-layout/calendar/calendar.module.ts   |  5 +-
 26 files changed, 419 insertions(+), 56 deletions(-)
 create mode 100644 src/framework/theme/components/calendar-kit/components/calendar-week-number/nb-calendar-week-number.component.scss
 create mode 100644 src/framework/theme/components/calendar-kit/components/calendar-week-number/nb-calendar-week-number.component.ts
 create mode 100644 src/playground/with-layout/calendar/calendar-week-number.component.ts

diff --git a/packages-smoke/package-lock.json b/packages-smoke/package-lock.json
index f07e036ae1..1922d48447 100644
--- a/packages-smoke/package-lock.json
+++ b/packages-smoke/package-lock.json
@@ -3390,9 +3390,9 @@
       }
     },
     "date-fns": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
-      "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw=="
+      "version": "2.0.0-alpha.27",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.0.0-alpha.27.tgz",
+      "integrity": "sha512-cqfVLS+346P/Mpj2RpDrBv0P4p2zZhWWvfY5fuWrXNR/K38HaAGEkeOwb47hIpQP9Jr/TIxjZ2/sNMQwdXuGMg=="
     },
     "date-format": {
       "version": "1.2.0",
diff --git a/packages-smoke/package.json b/packages-smoke/package.json
index b71e163b27..81a7528eb4 100644
--- a/packages-smoke/package.json
+++ b/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",
diff --git a/scripts/gulp/tasks/build/bundle/rollup-config.ts b/scripts/gulp/tasks/build/bundle/rollup-config.ts
index 42561d6f38..155ee45c11 100644
--- a/scripts/gulp/tasks/build/bundle/rollup-config.ts
+++ b/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',
diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts
index 0f1edd6ed0..e51b148a29 100644
--- a/src/app/playground-components.ts
+++ b/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',
+      },
     ],
   },
   {
diff --git a/src/framework/date-fns/services/date-fns-date.service.ts b/src/framework/date-fns/services/date-fns-date.service.ts
index 3f0f479911..bfe2650acd 100644
--- a/src/framework/date-fns/services/date-fns-date.service.ts
+++ b/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);
+  }
 }
diff --git a/src/framework/moment/services/moment-date.service.ts b/src/framework/moment/services/moment-date.service.ts
index aa3d419d51..8be266511c 100644
--- a/src/framework/moment/services/moment-date.service.ts
+++ b/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();
+  }
 }
diff --git a/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss b/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss
index f5ec14e113..c0337d732c 100644
--- a/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss
+++ b/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;
diff --git a/src/framework/theme/components/calendar-kit/calendar-kit.module.ts b/src/framework/theme/components/calendar-kit/calendar-kit.module.ts
index 49b58a2059..2c6520c721 100644
--- a/src/framework/theme/components/calendar-kit/calendar-kit.module.ts
+++ b/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,
 ];
 
 /**
diff --git a/src/framework/theme/components/calendar-kit/components/calendar-day-picker/calendar-day-picker.component.ts b/src/framework/theme/components/calendar-kit/components/calendar-day-picker/calendar-day-picker.component.ts
index c1054e7f58..d084bd79a2 100644
--- a/src/framework/theme/components/calendar-kit/components/calendar-day-picker/calendar-day-picker.component.ts
+++ b/src/framework/theme/components/calendar-kit/components/calendar-day-picker/calendar-day-picker.component.ts
@@ -19,6 +19,7 @@ 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';
 
 
 /**
@@ -26,19 +27,26 @@ import { NbCalendarCell, NbCalendarSize } from '../../model';
  * */
 @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.
    * */
diff --git a/src/framework/theme/components/calendar-kit/components/calendar-days-names/calendar-days-names.component.scss b/src/framework/theme/components/calendar-kit/components/calendar-days-names/calendar-days-names.component.scss
index 0df53eba99..6532d6cd96 100644
--- a/src/framework/theme/components/calendar-kit/components/calendar-days-names/calendar-days-names.component.scss
+++ b/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;
   }
 }
diff --git a/src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.scss b/src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.scss
index f89b1d053b..c0724ad2bb 100644
--- a/src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.scss
+++ b/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 {
diff --git a/src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.ts b/src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.ts
index 0c3c2f495c..11fad1ffe0 100644
--- a/src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.ts
+++ b/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>
   `,
diff --git a/src/framework/theme/components/calendar-kit/components/calendar-week-number/nb-calendar-week-number.component.scss b/src/framework/theme/components/calendar-kit/components/calendar-week-number/nb-calendar-week-number.component.scss
new file mode 100644
index 0000000000..6eac789cae
--- /dev/null
+++ b/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;
+}
diff --git a/src/framework/theme/components/calendar-kit/components/calendar-week-number/nb-calendar-week-number.component.ts b/src/framework/theme/components/calendar-kit/components/calendar-week-number/nb-calendar-week-number.component.ts
new file mode 100644
index 0000000000..100eb17d04
--- /dev/null
+++ b/src/framework/theme/components/calendar-kit/components/calendar-week-number/nb-calendar-week-number.component.ts
@@ -0,0 +1,52 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, Input, HostBinding, ChangeDetectionStrategy } from '@angular/core';
+import { NbDateService } from '../../services/date.service';
+import { NbCalendarSize } from '../../model';
+
+@Component({
+  selector: 'nb-calendar-week-numbers',
+  template: `
+    <div class="sign">{{ weekNumberSymbol }}</div>
+    <div class="week-cell" *ngFor="let week of getWeeks()">{{ week }}</div>
+  `,
+  styleUrls: ['./nb-calendar-week-number.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NbCalendarWeekNumberComponent<D> {
+
+  @Input()
+  weeks: D[][];
+
+  @Input()
+  size: NbCalendarSize;
+
+  /**
+   * Sets symbol used as a header for week numbers column
+   * */
+  @Input() weekNumberSymbol: string;
+
+  @HostBinding('class.size-medium')
+  get isMedium() {
+    return this.size === NbCalendarSize.MEDIUM;
+  }
+
+  @HostBinding('class.size-large')
+  get isLarge() {
+    return this.size === NbCalendarSize.LARGE;
+  }
+
+  constructor(private dateService: NbDateService<D>) {}
+
+  getWeeks(): number[] {
+    return this.weeks.map((week: D[]) => {
+      // Use last day of the week to determine week number.
+      // This way weeks which span between sibling years is marked first
+      return this.dateService.getWeekNumber(week[6]);
+    });
+  }
+}
diff --git a/src/framework/theme/components/calendar-kit/services/date.service.ts b/src/framework/theme/components/calendar-kit/services/date.service.ts
index df9d66931c..bc96d2a447 100644
--- a/src/framework/theme/components/calendar-kit/services/date.service.ts
+++ b/src/framework/theme/components/calendar-kit/services/date.service.ts
@@ -179,4 +179,6 @@ export abstract class NbDateService<D> {
   abstract addYear(date: D, years: number): D;
 
   abstract getId(): string;
+
+  abstract getWeekNumber(date: D): number;
 }
diff --git a/src/framework/theme/components/calendar-kit/services/native-date.service.ts b/src/framework/theme/components/calendar-kit/services/native-date.service.ts
index e6c07ecc91..190cd83c91 100644
--- a/src/framework/theme/components/calendar-kit/services/native-date.service.ts
+++ b/src/framework/theme/components/calendar-kit/services/native-date.service.ts
@@ -163,4 +163,8 @@ export class NbNativeDateService extends NbDateService<Date> {
   getId(): string {
     return 'native';
   }
+
+  getWeekNumber(date: Date): number {
+    return parseInt(this.datePipe.transform(date, 'w'), 10);
+  }
 }
diff --git a/src/framework/theme/components/calendar/_calendar.component.theme.scss b/src/framework/theme/components/calendar/_calendar.component.theme.scss
index 13b1b099d3..98453c541b 100644
--- a/src/framework/theme/components/calendar/_calendar.component.theme.scss
+++ b/src/framework/theme/components/calendar/_calendar.component.theme.scss
@@ -7,6 +7,10 @@
 @mixin nb-calendar-theme() {
 
   nb-base-calendar {
+    nb-card {
+      overflow: hidden;
+    }
+
     &.medium nb-card {
       width: nb-theme(calendar-width);
 
@@ -23,14 +27,24 @@
       }
     }
 
+    &.has-week-number.medium nb-card {
+      width: calc(#{nb-theme(calendar-width)} + #{nb-theme(calendar-day-cell-width)} + 1px);
+    }
+
+    &.has-week-number.large nb-card {
+      width: calc(#{nb-theme(calendar-large-width)} + #{nb-theme(calendar-day-cell-width)} + 1px);
+    }
+
     nb-card {
       border: none;
       margin: 0;
     }
 
     nb-card-body {
+      padding: 0;
+
       & > nb-calendar-pageable-navigation, & > nb-calendar-navigation {
-        padding: 0 1rem 1.5rem;
+        padding: 1rem 0;
       }
     }
   }
diff --git a/src/framework/theme/components/calendar/base-calendar.component.html b/src/framework/theme/components/calendar/base-calendar.component.html
index a1020acfc8..8597795fca 100644
--- a/src/framework/theme/components/calendar/base-calendar.component.html
+++ b/src/framework/theme/components/calendar/base-calendar.component.html
@@ -24,7 +24,9 @@
         [visibleDate]="visibleDate"
         [size]="size"
         [date]="date"
-        (dateChange)="dateChange.emit($event)">
+        [showWeekNumber]="showWeekNumber"
+        (dateChange)="dateChange.emit($event)"
+        [weekNumberSymbol]="weekNumberSymbol">
       </nb-calendar-day-picker>
 
     </ng-container>
diff --git a/src/framework/theme/components/calendar/base-calendar.component.ts b/src/framework/theme/components/calendar/base-calendar.component.ts
index cb7739a681..c4273f0ad8 100644
--- a/src/framework/theme/components/calendar/base-calendar.component.ts
+++ b/src/framework/theme/components/calendar/base-calendar.component.ts
@@ -9,6 +9,7 @@ import { Component, EventEmitter, HostBinding, Input, OnInit, Output, Type } fro
 import { YEARS_IN_VIEW } from '../calendar-kit/components/calendar-year-picker/calendar-year-picker.component';
 import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-kit/model';
 import { NbDateService } from '../calendar-kit/services/date.service';
+import { convertToBoolProperty } from '../helpers';
 
 /**
  * The basis for calendar and range calendar components.
@@ -80,6 +81,25 @@ export class NbBaseCalendarComponent<D, T> implements OnInit {
    * */
   @Input() date: T;
 
+  /**
+   * Determines should we show week numbers column.
+   * False by default.
+   * */
+  @Input()
+  @HostBinding('class.has-week-number')
+  get showWeekNumber(): boolean {
+    return this._showWeekNumber;
+  }
+  set showWeekNumber(value: boolean) {
+    this._showWeekNumber = convertToBoolProperty(value);
+  }
+  protected _showWeekNumber = false;
+
+  /**
+   * Sets symbol used as a header for week numbers column
+   * */
+  @Input() weekNumberSymbol: string;
+
   /**
    * Emits date when selected.
    * */
diff --git a/src/framework/theme/components/calendar/calendar-range.component.ts b/src/framework/theme/components/calendar/calendar-range.component.ts
index e0c104da91..d954333e12 100644
--- a/src/framework/theme/components/calendar/calendar-range.component.ts
+++ b/src/framework/theme/components/calendar/calendar-range.component.ts
@@ -9,6 +9,7 @@ import { Component, EventEmitter, Input, Output, Type } from '@angular/core';
 import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-kit/model';
 import { NbDateService } from '../calendar-kit/services/date.service';
 import { NbCalendarRangeDayCellComponent, NbCalendarRangeYearCellComponent } from './calendar-range-cells';
+import { convertToBoolProperty } from '../helpers';
 
 
 export interface NbCalendarRange<D> {
@@ -65,6 +66,7 @@ export interface NbCalendarRange<D> {
  * calendar-header-sub-title-text-line-height:
  * calendar-navigation-button-width:
  * calendar-cell-inactive-text-color:
+ * calendar-cell-in-range-background-color:
  * calendar-cell-disabled-background-color:
  * calendar-cell-disabled-text-color:
  * calendar-cell-selected-background-color:
@@ -93,18 +95,30 @@ export interface NbCalendarRange<D> {
  * calendar-month-cell-height:
  * calendar-year-cell-width:
  * calendar-year-cell-height:
- * calendar-weekday-width:
- * calendar-weekday-height:
+ * calendar-weekday-background:
+ * calendar-weekday-divider-color:
  * calendar-weekday-text-color:
  * calendar-weekday-text-font-size:
  * calendar-weekday-text-font-weight:
  * calendar-weekday-text-line-height:
  * calendar-weekday-holiday-text-color:
- * calendar-cell-in-range-background-color:
+ * calendar-weekday-height:
+ * calendar-weekday-width:
+ * calendar-weeknumber-background:
+ * calendar-weeknumber-divider-color:
+ * calendar-weeknumber-divider-width:
+ * calendar-weeknumber-text-color:
+ * calendar-weeknumber-text-font-size:
+ * calendar-weeknumber-text-font-weight:
+ * calendar-weeknumber-text-line-height:
+ * calendar-weeknumber-height:
+ * calendar-weeknumber-width:
  * calendar-large-width:
  * calendar-large-body-height:
  * calendar-day-cell-large-width:
  * calendar-day-cell-large-height:
+ * calendar-weekday-large-height:
+ * calendar-weekday-large-width:
  * calendar-month-cell-large-width:
  * calendar-month-cell-large-height:
  * calendar-year-cell-large-width:
@@ -127,6 +141,8 @@ export interface NbCalendarRange<D> {
       [visibleDate]="visibleDate"
       [showHeader]="showHeader"
       [size]="size"
+      [showWeekNumber]="showWeekNumber"
+      [weekNumberSymbol]="weekNumberSymbol"
     ></nb-base-calendar>
   `,
 })
@@ -202,6 +218,24 @@ export class NbCalendarRangeComponent<D> {
    * */
   @Input() range: NbCalendarRange<D>;
 
+  /**
+   * 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 = '#';
+
   /**
    * Emits range when start selected and emits again when end selected.
    * */
diff --git a/src/framework/theme/components/calendar/calendar.component.ts b/src/framework/theme/components/calendar/calendar.component.ts
index 4a35704d19..0c8625f392 100644
--- a/src/framework/theme/components/calendar/calendar.component.ts
+++ b/src/framework/theme/components/calendar/calendar.component.ts
@@ -7,6 +7,7 @@
 import { Component, EventEmitter, Input, Output, Type } from '@angular/core';
 
 import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-kit/model';
+import { convertToBoolProperty } from '../helpers';
 
 
 /**
@@ -68,6 +69,9 @@ import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-
  * which disables weekdays.
  * @stacked-example(Filter, calendar/calendar-filter.component)
  *
+ * Week numbers column could be enabled via `showWeekNumber` binding:
+ * @stacked-example(Week number, calendar/calendar-week-number.component)
+ *
  * If you need create custom cells you can easily provide custom components for
  * calendar. For examples if you want to show any average price under each date you can
  * just provide custom `dayCellComponent`. Custom cells for month and year can be provided
@@ -123,17 +127,30 @@ import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-
  * calendar-month-cell-height:
  * calendar-year-cell-width:
  * calendar-year-cell-height:
- * calendar-weekday-width:
- * calendar-weekday-height:
+ * calendar-weekday-background:
+ * calendar-weekday-divider-color:
  * calendar-weekday-text-color:
  * calendar-weekday-text-font-size:
  * calendar-weekday-text-font-weight:
  * calendar-weekday-text-line-height:
  * calendar-weekday-holiday-text-color:
+ * calendar-weekday-height:
+ * calendar-weekday-width:
+ * calendar-weeknumber-background:
+ * calendar-weeknumber-divider-color:
+ * calendar-weeknumber-divider-width:
+ * calendar-weeknumber-text-color:
+ * calendar-weeknumber-text-font-size:
+ * calendar-weeknumber-text-font-weight:
+ * calendar-weeknumber-text-line-height:
+ * calendar-weeknumber-height:
+ * calendar-weeknumber-width:
  * calendar-large-width:
  * calendar-large-body-height:
  * calendar-day-cell-large-width:
  * calendar-day-cell-large-height:
+ * calendar-weekday-large-height:
+ * calendar-weekday-large-width:
  * calendar-month-cell-large-width:
  * calendar-month-cell-large-height:
  * calendar-year-cell-large-width:
@@ -155,6 +172,8 @@ import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-
       [size]="size"
       [visibleDate]="visibleDate"
       [showHeader]="showHeader"
+      [showWeekNumber]="showWeekNumber"
+      [weekNumberSymbol]="weekNumberSymbol"
       (dateChange)="dateChange.emit($event)"
     ></nb-base-calendar>
   `,
@@ -220,6 +239,24 @@ export class NbCalendarComponent<D> {
    * */
   @Input() date: D;
 
+  /**
+   * 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 = '#';
+
   /**
    * Emits date when selected.
    * */
diff --git a/src/framework/theme/components/datepicker/datepicker.component.ts b/src/framework/theme/components/datepicker/datepicker.component.ts
index 1ed2b554cf..dd2868c58b 100644
--- a/src/framework/theme/components/datepicker/datepicker.component.ts
+++ b/src/framework/theme/components/datepicker/datepicker.component.ts
@@ -44,6 +44,7 @@ import {
 } from '../calendar-kit/model';
 import { NbDateService } from '../calendar-kit/services/date.service';
 import { NB_DATE_SERVICE_OPTIONS, NbDatepicker, NbPickerValidatorConfig } from './datepicker.directive';
+import { convertToBoolProperty } from '../helpers';
 
 
 /**
@@ -122,6 +123,24 @@ export abstract class NbBasePicker<D, T, P>
    */
   @Input() showHeader: boolean = true;
 
+  /**
+   * Sets symbol used as a header for week numbers column
+   * */
+  @Input() weekNumberSymbol: string = '#';
+
+  /**
+   * 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;
+
   /**
    * Calendar component class that has to be instantiated inside overlay.
    * */
@@ -356,6 +375,8 @@ export abstract class NbBasePicker<D, T, P>
     this.picker.size = this.size;
     this.picker.showHeader = this.showHeader;
     this.picker.visibleDate = this.visibleDate;
+    this.picker.showWeekNumber = this.showWeekNumber;
+    this.picker.weekNumberSymbol = this.weekNumberSymbol;
   }
 
   protected checkFormat() {
diff --git a/src/framework/theme/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss
index dff793f7b8..66227c8ed0 100644
--- a/src/framework/theme/styles/themes/_mapping.scss
+++ b/src/framework/theme/styles/themes/_mapping.scss
@@ -1207,7 +1207,7 @@ $eva-mapping: (
   list-item-font-weight: text-paragraph-font-weight,
   list-item-line-height: text-paragraph-line-height,
 
-  calendar-width: 21.875rem,
+  calendar-width: 19.25rem,
   calendar-body-height: 25.625rem,
   calendar-border-radius: border-radius,
   calendar-text-color: text-basic-color,
@@ -1221,9 +1221,9 @@ $eva-mapping: (
   calendar-header-title-text-font-size: text-heading-6-font-size,
   calendar-header-title-text-font-weight: text-heading-6-font-weight,
   calendar-header-title-text-line-height: text-heading-6-line-height,
-  calendar-header-sub-title-text-font-size: text-paragraph-line-height,
-  calendar-header-sub-title-text-font-weight: text-paragraph-font-weight,
-  calendar-header-sub-title-text-line-height: text-paragraph-line-height,
+  calendar-header-sub-title-text-font-size: text-paragraph-2-line-height,
+  calendar-header-sub-title-text-font-weight: text-paragraph-2-font-weight,
+  calendar-header-sub-title-text-line-height: text-paragraph-2-line-height,
 
   calendar-navigation-button-width: 10rem,
 
@@ -1259,18 +1259,32 @@ $eva-mapping: (
   calendar-year-cell-width: calendar-month-cell-width,
   calendar-year-cell-height: calendar-month-cell-height,
 
-  calendar-weekday-width: calendar-day-cell-width,
-  calendar-weekday-height: 1.75rem,
+  calendar-weekday-background: background-basic-color-2,
+  calendar-weekday-divider-color: divider-color,
   calendar-weekday-text-color: text-hint-color,
-  calendar-weekday-text-font-size: text-paragraph-2-font-size,
-  calendar-weekday-text-font-weight: text-paragraph-2-font-weight,
-  calendar-weekday-text-line-height: text-paragraph-2-line-height,
-  calendar-weekday-holiday-text-color: text-danger-color,
+  calendar-weekday-text-font-size: text-button-small-font-size,
+  calendar-weekday-text-font-weight: text-button-font-weight,
+  calendar-weekday-text-line-height: text-button-small-line-height,
+  calendar-weekday-holiday-text-color: calendar-weekday-text-color,
+  calendar-weekday-height: calendar-day-cell-height,
+  calendar-weekday-width: calendar-day-cell-width,
 
-  calendar-large-width: 24.375rem,
+  calendar-weeknumber-background: background-basic-color-2,
+  calendar-weeknumber-divider-color: divider-color,
+  calendar-weeknumber-divider-width: divider-width,
+  calendar-weeknumber-text-color: text-basic-color,
+  calendar-weeknumber-text-font-size: text-button-small-font-size,
+  calendar-weeknumber-text-font-weight: text-button-font-weight,
+  calendar-weeknumber-text-line-height: text-button-small-line-height,
+  calendar-weeknumber-height: calendar-weekday-height,
+  calendar-weeknumber-width: calendar-weekday-width,
+
+  calendar-large-width: 21.875rem,
   calendar-large-body-height: 27.75rem,
   calendar-day-cell-large-width: 3rem,
   calendar-day-cell-large-height: 3rem,
+  calendar-weekday-large-height: calendar-day-cell-large-width,
+  calendar-weekday-large-width: calendar-day-cell-large-height,
   calendar-month-cell-large-width: 4.25rem,
   calendar-month-cell-large-height: 2.375rem,
   calendar-year-cell-large-width: calendar-month-cell-width,
diff --git a/src/playground/with-layout/calendar/calendar-routing.module.ts b/src/playground/with-layout/calendar/calendar-routing.module.ts
index 4fb79a244e..c502381f81 100644
--- a/src/playground/with-layout/calendar/calendar-routing.module.ts
+++ b/src/playground/with-layout/calendar/calendar-routing.module.ts
@@ -15,6 +15,7 @@ import { CalendarShowcaseComponent } from './calendar-showcase.component';
 import { CalendarSizeComponent } from './calendar-size.component';
 import { CalendarStartViewComponent } from './calendar-start-view.component';
 import { CalendarWithoutHeaderComponent } from './calendar-without-header.component';
+import { CalendarWeekNumberComponent } from './calendar-week-number.component';
 
 const routes: Route[] = [
   {
@@ -53,6 +54,10 @@ const routes: Route[] = [
     path: 'calendar-without-header.component',
     component: CalendarWithoutHeaderComponent,
   },
+  {
+    path: 'calendar-week-number.component',
+    component: CalendarWeekNumberComponent,
+  },
 ];
 
 @NgModule({
diff --git a/src/playground/with-layout/calendar/calendar-week-number.component.ts b/src/playground/with-layout/calendar/calendar-week-number.component.ts
new file mode 100644
index 0000000000..001be8be43
--- /dev/null
+++ b/src/playground/with-layout/calendar/calendar-week-number.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+    <button (click)="toggleWeekNumber()" nbButton>
+      {{ this.showWeekNumber ? 'Hide' : 'Show' }} week number column
+    </button>
+
+    <nb-calendar [(date)]="date" [showWeekNumber]="showWeekNumber"></nb-calendar>
+  `,
+  styles: [` button { margin-bottom: 1rem; } `],
+})
+export class CalendarWeekNumberComponent {
+  showWeekNumber = true;
+  date = new Date();
+
+  toggleWeekNumber() {
+    this.showWeekNumber = !this.showWeekNumber;
+  }
+}
diff --git a/src/playground/with-layout/calendar/calendar.module.ts b/src/playground/with-layout/calendar/calendar.module.ts
index 757e80d34f..a794c9b053 100644
--- a/src/playground/with-layout/calendar/calendar.module.ts
+++ b/src/playground/with-layout/calendar/calendar.module.ts
@@ -6,7 +6,7 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { NbCalendarModule, NbCalendarRangeModule } from '@nebular/theme';
+import { NbCalendarModule, NbCalendarRangeModule, NbButtonModule } from '@nebular/theme';
 import { CalendarRoutingModule } from './calendar-routing.module';
 import { CalendarBoundingMonthComponent } from './calendar-bounding-month.component';
 import { CalendarCustomDayCellShowcaseComponent } from './calendar-custom-day-cell-showcase.component';
@@ -18,6 +18,7 @@ import { CalendarSizeComponent } from './calendar-size.component';
 import { CalendarStartViewComponent } from './calendar-start-view.component';
 import { CalendarWithoutHeaderComponent } from './calendar-without-header.component';
 import { CalendarCustomDayCellComponent } from './components/calendar-custom-day-cell.component';
+import { CalendarWeekNumberComponent } from './calendar-week-number.component';
 
 @NgModule({
   declarations: [
@@ -31,9 +32,11 @@ import { CalendarCustomDayCellComponent } from './components/calendar-custom-day
     CalendarStartViewComponent,
     CalendarWithoutHeaderComponent,
     CalendarCustomDayCellComponent,
+    CalendarWeekNumberComponent,
   ],
   imports: [
     CommonModule,
+    NbButtonModule,
     NbCalendarModule,
     NbCalendarRangeModule,
     CalendarRoutingModule,