feat(calendar): add capability to hide header (#838)

Closes #828

src/framework/theme/components/calendar/_calendar.component.theme.scss

@@ -9,12 +9,18 @@
   nb-base-calendar {
     &.medium nb-card {
       width: nb-theme(calendar-width);
-      height: nb-theme(calendar-height);
+
+      nb-card-body {
+        height: nb-theme(calendar-body-height);
+      }
     }
 
     &.large nb-card {
       width: nb-theme(calendar-large-width);
-      height: nb-theme(calendar-large-height);
+
+      nb-card-body {
+        height: nb-theme(calendar-large-body-height);
+      }
     }
 
     nb-card {

src/framework/theme/components/calendar/base-calendar.component.html

@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-header>
+  <nb-card-header *ngIf="showHeader">
     <nb-calendar-header (navigateToday)="navigateToday()"></nb-calendar-header>
   </nb-card-header>
 

src/framework/theme/components/calendar/base-calendar.component.ts

@@ -69,6 +69,11 @@ export class NbBaseCalendarComponent<D, T> implements OnInit {
 
   @Input() visibleDate: D;
 
+  /**
+   * Determines should we show calendars header or not.
+   * */
+  @Input() showHeader: boolean = true;
+
   /**
    * Value which will be rendered as selected.
    * */

src/framework/theme/components/calendar/calendar-range.component.ts

@@ -50,6 +50,7 @@ export interface NbCalendarRange<D> {
       [monthCellComponent]="monthCellComponent"
       [yearCellComponent]="yearCellComponent"
       [visibleDate]="visibleDate"
+      [showHeader]="showHeader"
       [size]="size"
     ></nb-base-calendar>
   `,
@@ -116,6 +117,11 @@ export class NbCalendarRangeComponent<D> {
 
   @Input() visibleDate: D;
 
+  /**
+   * Determines should we show calendars header or not.
+   * */
+  @Input() showHeader: boolean = true;
+
   /**
    * Range which will be rendered as selected.
    * */

src/framework/theme/components/calendar/calendar.component.ts

@@ -44,6 +44,10 @@ import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-
  * In order to use it, you have to import `NbCalendarRangeModule`.
  * @stacked-example(Range, calendar/calendar-range-showcase.component)
  *
+ * The calendar component is supplied with a calendar header that contains navigate today button.
+ * If you do not want to use it you can hide calendar header using `showHeader` property.
+ * @stacked-example(Header, calendar/calendar-without-header.component)
+ *
  * As you can see in the basic usage example calendar contains previous and next month days
  * which can be disabled using `boundingMonth` property.
  * @stacked-example(Bounding months, calendar/calendar-bounding-month.component)
@@ -73,7 +77,7 @@ import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-
  * @styles
  *
  * calendar-width
- * calendar-height
+ * calendar-body-height
  * calendar-header-title-font-size
  * calendar-header-title-font-weight
  * calendar-header-sub-title-font-size
@@ -102,7 +106,7 @@ import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-
  * calendar-weekday-holiday-fg
  * calendar-range-bg-in-range
  * calendar-large-width
- * calendar-large-height
+ * calendar-large-body-height
  * calendar-day-cell-large-width
  * calendar-day-cell-large-height
  * calendar-month-cell-large-width
@@ -125,6 +129,7 @@ import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-
       [yearCellComponent]="yearCellComponent"
       [size]="size"
       [visibleDate]="visibleDate"
+      [showHeader]="showHeader"
       (dateChange)="dateChange.emit($event)"
     ></nb-base-calendar>
   `,
@@ -180,6 +185,11 @@ export class NbCalendarComponent<D> {
 
   @Input() visibleDate: D;
 
+  /**
+   * Determines should we show calendars header or not.
+   * */
+  @Input() showHeader: boolean = true;
+
   /**
    * Date which will be rendered as selected.
    * */

src/framework/theme/styles/themes/_default.scss

@@ -591,7 +591,7 @@ $theme: (
   list-item-padding: 1rem,
 
   calendar-width: 21.875rem,
-  calendar-height: 31rem,
+  calendar-body-height: 25.625rem,
   calendar-header-title-font-size: font-size-xlg,
   calendar-header-title-font-weight: font-weight-bold,
   calendar-header-sub-title-font-size: font-size,
@@ -622,7 +622,7 @@ $theme: (
   calendar-range-bg-in-range: #ebfbf2,
 
   calendar-large-width: 24.375rem,
-  calendar-large-height: 33.125rem,
+  calendar-large-body-height: 27.75rem,
   calendar-day-cell-large-width: 3rem,
   calendar-day-cell-large-height: 3rem,
   calendar-month-cell-large-width: 4.25rem,

src/playground/calendar/calendar-without-header.component.ts

@@ -0,0 +1,19 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-calendar-without-header',
+  template: `
+    <h1>Selected date: {{ date | date }}</h1>
+    <nb-calendar [(date)]="date" [showHeader]="false">
+    </nb-calendar>
+  `,
+})
+export class NbCalendarWithoutHeaderComponent {
+  date = new Date();
+}

src/playground/playground-routing.module.ts

@@ -201,6 +201,7 @@ import { NbDatepickerValidationComponent } from './datepicker/datepicker-validat
 import { NbRangepickerShowcaseComponent } from './datepicker/rangepicker-showcase.component';
 import { NbRadioShowcaseComponent } from './radio/radio-showcase.component';
 import { NbRadioDisabledComponent } from './radio/radio-disabled.component';
+import { NbCalendarWithoutHeaderComponent } from './calendar/calendar-without-header.component';
 
 
 export const routes: Routes = [
@@ -446,6 +447,10 @@ export const routes: Routes = [
             path: 'calendar-size.component',
             component: NbCalendarSizeComponent,
           },
+          {
+            path: 'calendar-without-header.component',
+            component: NbCalendarWithoutHeaderComponent,
+          },
         ],
       },
       {

src/playground/playground.module.ts

@@ -250,6 +250,7 @@ import { NbDatepickerValidationComponent } from './datepicker/datepicker-validat
 import { NbRangepickerShowcaseComponent } from './datepicker/rangepicker-showcase.component';
 import { NbRadioShowcaseComponent } from './radio/radio-showcase.component';
 import { NbRadioDisabledComponent } from './radio/radio-disabled.component';
+import { NbCalendarWithoutHeaderComponent } from './calendar/calendar-without-header.component';
 
 export const NB_MODULES = [
   NbCardModule,
@@ -441,6 +442,7 @@ export const NB_EXAMPLE_COMPONENTS = [
   NbCalendarFilterComponent,
   NbCalendarMinMaxComponent,
   NbCalendarSizeComponent,
+  NbCalendarWithoutHeaderComponent,
   NbCalendarKitFullCalendarShowcaseComponent,
   NbCalendarKitMonthCellComponent,
   NbOverlayShowcaseComponent,