From 28d56fba8c1e850b194df04f96cd580131a05ca9 Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Mon, 1 Oct 2018 17:09:17 +0300
Subject: [PATCH] docs(calendar): separate into 2 pages (#843)

Closes #829
---
 docs/structure.ts                             | 19 +++++++
 .../calendar/calendar-range.component.ts      | 57 +++++++++++++++++--
 2 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/docs/structure.ts b/docs/structure.ts
index 2925e8d08b..0fc4cb3685 100644
--- a/docs/structure.ts
+++ b/docs/structure.ts
@@ -449,6 +449,25 @@ export const structure = [
         icon: 'calendar.svg',
         source: [
           'NbCalendarComponent',
+        ],
+      },
+      {
+        type: 'tabs',
+        name: 'Calendar Range',
+        icon: 'calendar.svg',
+        source: [
+          'NbCalendarRangeComponent',
+        ],
+      },
+      {
+        type: 'group',
+        name: 'CDK',
+      },
+      {
+        type: 'tabs',
+        name: 'Calendar Kit',
+        icon: 'calendar.svg',
+        source: [
           'NbCalendarKitModule',
         ],
       },
diff --git a/src/framework/theme/components/calendar/calendar-range.component.ts b/src/framework/theme/components/calendar/calendar-range.component.ts
index a1adae4922..4ce97212f2 100644
--- a/src/framework/theme/components/calendar/calendar-range.component.ts
+++ b/src/framework/theme/components/calendar/calendar-range.component.ts
@@ -16,12 +16,16 @@ export interface NbCalendarRange<D> {
 }
 
 /**
- * Calendar component provides a capability to choose ranges.
- * For additional info check `NbBaseCalendarComponent`.
+ * CalendarRange component provides a capability to choose a date range.
  *
  * ```html
- * <nb-calendar-range [(range)]="range"></nb-calendar-range>
+ * <nb-calendar [(date)]="date"></nb-calendar>
+ * <nb-calendar [date]="date" (dateChange)="handleDateChange($event)"></nb-calendar>
  * ```
+ *
+ * Basic usage example
+ * @stacked-example(Range, calendar/calendar-range-showcase.component)
+ *
  * ### Installation
  *
  * Import `NbCalendarRangeModule` to your feature module.
@@ -34,7 +38,52 @@ export interface NbCalendarRange<D> {
  * })
  * export class PageModule { }
  * ```
- */
+ *
+ * ### Usage
+ *
+ * CalendarRange component supports all of the Calendar component customization properties. More defails can be found
+ * in the [Calendar component docs](docs/components/calendar).
+ *
+ * @styles
+ *
+ * calendar-width
+ * calendar-body-height
+ * calendar-header-title-font-size
+ * calendar-header-title-font-weight
+ * calendar-header-sub-title-font-size
+ * calendar-header-sub-title-font-weight
+ * calendar-navigation-button-width
+ * calendar-selected-item-bg
+ * calendar-hover-item-bg
+ * calendar-today-item-bg
+ * calendar-active-item-bg
+ * calendar-fg
+ * calendar-selected-fg
+ * calendar-day-cell-width
+ * calendar-day-cell-height
+ * calendar-month-cell-width
+ * calendar-month-cell-height
+ * calendar-year-cell-width
+ * calendar-year-cell-height
+ * calendar-inactive-opacity
+ * calendar-disabled-opacity
+ * calendar-border-radius
+ * calendar-weekday-width
+ * calendar-weekday-height
+ * calendar-weekday-font-size
+ * calendar-weekday-font-weight
+ * calendar-weekday-fg
+ * calendar-weekday-holiday-fg
+ * calendar-range-bg-in-range
+ * calendar-large-width
+ * calendar-large-body-height
+ * calendar-day-cell-large-width
+ * calendar-day-cell-large-height
+ * calendar-month-cell-large-width
+ * calendar-month-cell-large-height
+ * calendar-year-cell-large-width
+ * calendar-year-cell-large-height
+ * */
 @Component({
   selector: 'nb-calendar-range',
   template: `