adding support for custom amount of rows for month calendar - resolve…

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
 # [8.1.0] (???)
 
 ### Features
+- Add number of rows to month calendar ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#387](https://github.com/vlio20/angular-datepicker/issues/387)
 - Close popup on enter ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#438](https://github.com/vlio20/angular-datepicker/issues/438)
 
 ### Bug Fixes

README.md

@@ -218,6 +218,7 @@ Here are the available configurations:
 | monthBtnCssClassCallback    | `(Moment) => String` | `undefined`                                                               | Callback which can add custom CSS classes to the month button in the calendar. Multiple classes can be returned with a space between them.                                                                                                                                    |  
 | showMultipleYearsNavigation | `boolean`            | `false`                                                                   | If set to `true` will show buttons to navigate by multiple years (10 by default)                                                                                                                                                                                              |  
 | multipleYearsNavigateBy     | `number`             | `10`                                                                      | Number of years to navigate when showMultipleYearsNavigation is `true`                                                                                                                                                                                                        |  
+| numOfMonthRows              | `1, 2, 3, 4, 6, 12`  | `4`                                                                       | Number of rows to be shown on month calendar                                                                                                                                                                                                                                  |  
 
 ## Inline - Month Calendar  
 
@@ -266,7 +267,8 @@ Here are the available configurations:
 | monthBtnFormatter           | `(Moment) => String` | `undefined`                                                               | The formatter (callback function) of the month button in the calendar.                                                                                                                                                                                                        |  
 | monthBtnCssClassCallback    | `(Moment) => String` | `undefined`                                                               | Callback which can add custom CSS classes to the month button in the calendar. Multiple classes can be returned with a space between them.                                                                                                                                    |  
 | showMultipleYearsNavigation | `boolean`            | `false`                                                                   | If set to `true` will show buttons to navigate by multiple years (10 by default)                                                                                                                                                                                              |  
-| multipleYearsNavigateBy     | `number`             | `10`                                                                      | Number of years to navigate when showMultipleYearsNavigation is `true`                                                                                                                                                                                                        |  
+| multipleYearsNavigateBy     | `number`             | `10`                                                                      | Number of years to navigate when showMultipleYearsNavigation is `true`                                                                                                                                                                                                        |
+| numOfMonthRows              | `1, 2, 3, 4, 6, 12`  | `4`                                                                       | Number of rows to be shown on month calendar                                                                                                                                                                                                                                  |  
 
 Here is the list of APIs:    
 
@@ -393,7 +395,8 @@ Here are the available configurations:
 | multipleYearsNavigateBy     | `Number`             | `10`                                                                      | Number of years to navigate when showMultipleYearsNavigation is `true`.                                                                                                                                                                                                       |  
 | hideInputContainer          | `Boolean`            | `false`                                                                   | Will hide the input element of any picker if set to `true`.                                                                                                                                                                                                                   |  
 | weekDayFormat               | `String`             | `ddd`                                                                     | The format of the weekday name.                                                                                                                                                                                                                                               |  
-| weekDayFormatter            | `(Number) => String` | `undefined`                                                               | You can customize the value of any weekday with this configuration. The parameter of the callback will start with 0 as Sunday and so on.                                                                                                                                                                                                                    |  
+| weekDayFormatter            | `(Number) => String` | `undefined`                                                               | You can customize the value of any weekday with this configuration. The parameter of the callback will start with 0 as Sunday and so on.                                                                                                                                      |
+| numOfMonthRows              | `1, 2, 3, 4, 6, 12`  | `4`                                                                       | Number of rows to be shown on month calendar                                                                                                                                                                                                                                  |  
 
 
 ## Directive  

e2e/app.po.ts

@@ -115,6 +115,8 @@ export class DemoPage {
   meridiemDisplay = $(`${this.popupSelector} .dp-time-select-display-meridiem`);
   meridiemDisplayInline = $(`.dp-inline .dp-time-select-display-meridiem`);
   timeSeparatorDisplay = $(`${this.popupSelector} .dp-time-select-separator:nth-child(2)`);
+  monthRows = $$('.dp-months-row');
+  numOfMonthRowsToggle2 = $('#numOfMonthRows2');
 
   daytimePickerMenu = $('#daytimePickerMenu');
   daytimeInlineMenu = $('#daytimeInlineMenu');

e2e/fetures/number-of-month-rows-e2e.spec.ts

@@ -0,0 +1,40 @@
+import {DemoPage} from '../app.po';
+
+describe('number of month rows', () => {
+
+  let page: DemoPage;
+
+  beforeEach(async () => {
+    page = new DemoPage();
+    await page.navigateTo();
+  });
+
+  it('should make sure number of rows are changing on date-picker', async () => {
+    await page.daytimePickerMenu.click();
+    await page.dayPickerInput.click();
+    await page.dayCalendarNavHeaderBtn.click();
+    expect(await page.monthRows.count()).toEqual(3);
+
+    await page.numOfMonthRowsToggle2.click();
+    await page.dayPickerInput.click();
+    expect(await page.monthRows.count()).toEqual(2);
+  });
+
+  it('should make sure number of rows are changing on month-picker', async () => {
+    await page.monthPickerMenu.click();
+    await page.monthPickerInput.click();
+    expect(await page.monthRows.count()).toEqual(3);
+
+    await page.numOfMonthRowsToggle2.click();
+    await page.dayPickerInput.click();
+    expect(await page.monthRows.count()).toEqual(2);
+  });
+
+  it('should make sure number of rows are changing on month inline', async () => {
+    await page.monthInlineMenu.click();
+    expect(await page.monthRows.count()).toEqual(3);
+
+    await page.numOfMonthRowsToggle2.click();
+    expect(await page.monthRows.count()).toEqual(2);
+  });
+});

src/demo/demo/common/conts/consts.ts

@@ -37,5 +37,6 @@ export const DEF_CONF: IDatePickerConfig = {
   hideInputContainer: false,
   returnedValueType: ECalendarValue.String,
   unSelectOnClick: true,
-  hideOnOutsideClick: true
+  hideOnOutsideClick: true,
+  numOfMonthRows: 3
 };

src/demo/demo/config-form/config-form.component.html

@@ -819,6 +819,56 @@ <h3 class="dp-options-section">Config options</h3>
         </label>
       </div>
     </div>
+
+    <div *ngIf="isValidConfig('numOfMonthRows')" class="dp-option">
+        <span class="dp-option-header">
+          Number of Month rows (numOfMonthRows):
+        </span>
+      <div class="dp-option-playground">
+        <label>1
+          <input id="numOfMonthRows1"
+                 [formControl]="numOfMonthRows"
+                 [value]="1"
+                 name="numOfMonthRows"
+                 type="radio">
+        </label>
+        <label>2
+          <input id="numOfMonthRows2"
+                 [formControl]="numOfMonthRows"
+                 [value]="2"
+                 name="numOfMonthRows"
+                 type="radio">
+        </label>
+        <label>3
+          <input id="numOfMonthRows3"
+                 [formControl]="numOfMonthRows"
+                 [value]="3"
+                 name="numOfMonthRows"
+                 type="radio">
+        </label>
+        <label>4
+          <input id="numOfMonthRows4"
+                 [formControl]="numOfMonthRows"
+                 [value]="4"
+                 name="numOfMonthRows"
+                 type="radio">
+        </label>
+        <label>6
+          <input id="numOfMonthRows6"
+                 [formControl]="numOfMonthRows"
+                 [value]="6"
+                 name="numOfMonthRows"
+                 type="radio">
+        </label>
+        <label>12
+          <input id="numOfMonthRows12"
+                 [formControl]="numOfMonthRows"
+                 [value]="12"
+                 name="numOfMonthRows"
+                 type="radio">
+        </label>
+      </div>
+    </div>
   </div>
 
   <div class="dp-api">

src/demo/demo/config-form/config-form.component.ts

@@ -59,6 +59,7 @@ const MONTH_CALENDAR_OPTION_KEYS = [
   'showGoToCurrent',
   'unSelectOnClick',
   'moveCalendarTo',
+  'numOfMonthRows',
   ...GLOBAL_OPTION_KEYS
 ];
 const DAY_CALENDAR_OPTION_KEYS = [
@@ -221,6 +222,7 @@ export class ConfigFormComponent implements OnInit {
   multipleYearsNavigateBy: FormControl;
   returnedValueType: FormControl;
   closeOnEnter: FormControl;
+  numOfMonthRows: FormControl;
 
   ngOnInit() {
     this.localFormat = this.getDefaultFormatByMode(this.pickerMode);
@@ -267,6 +269,7 @@ export class ConfigFormComponent implements OnInit {
     this.multipleYearsNavigateBy = new FormControl(this.config.multipleYearsNavigateBy);
     this.returnedValueType = new FormControl(this.config.returnedValueType);
     this.closeOnEnter = new FormControl(this.config.closeOnEnter);
+    this.numOfMonthRows = new FormControl(this.config.numOfMonthRows);
     this.initListeners();
   }
 
@@ -618,6 +621,12 @@ export class ConfigFormComponent implements OnInit {
         closeOnEnter: val
       });
     });
+
+    this.numOfMonthRows.valueChanges.subscribe((val) => {
+      this.onConfigChange.emit({
+        numOfMonthRows: val
+      });
+    });
   }
 
   private getDefaultFormatByMode(mode: string): string {

src/lib/date-picker/date-picker.directive.ts

@@ -16,11 +16,9 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import {NgControl} from '@angular/forms';
-import {CalendarValue} from '../common/types/calendar-value';
-import {SingleCalendarValue} from '../common/types/single-calendar-value';
+import {CalendarValue, ISelectionEvent, SingleCalendarValue} from '..';
 import {INavEvent} from '../common/models/navigation-event.model';
 import {UtilsService} from '../common/services/utils/utils.service'
-import {ISelectionEvent} from '../common/types/selection-evet.model';
 
 @Directive({
   exportAs: 'dpDayPicker',

src/lib/date-picker/date-picker.service.ts

@@ -83,7 +83,8 @@ export class DatePickerService {
       locale: pickerConfig.locale,
       returnedValueType: pickerConfig.returnedValueType,
       showGoToCurrent: pickerConfig.showGoToCurrent,
-      unSelectOnClick: pickerConfig.unSelectOnClick
+      unSelectOnClick: pickerConfig.unSelectOnClick,
+      numOfMonthRows: pickerConfig.numOfMonthRows
     };
   }
 

src/lib/day-calendar/day-calendar-config.model.ts

@@ -29,6 +29,7 @@ export interface IConfig {
   returnedValueType?: ECalendarValue;
   showGoToCurrent?: boolean;
   unSelectOnClick?: boolean;
+  numOfMonthRows?: number;
 }
 
 export interface IDayCalendarConfig extends IConfig,

src/lib/day-calendar/day-calendar.service.ts

@@ -177,7 +177,8 @@ export class DayCalendarService {
       monthBtnCssClassCallback: componentConfig.monthBtnCssClassCallback,
       multipleYearsNavigateBy: componentConfig.multipleYearsNavigateBy,
       showMultipleYearsNavigation: componentConfig.showMultipleYearsNavigation,
-      showGoToCurrent: componentConfig.showGoToCurrent
+      showGoToCurrent: componentConfig.showGoToCurrent,
+      numOfMonthRows: componentConfig.numOfMonthRows
     });
   }
 

src/lib/month-calendar/month-calendar-config.ts

@@ -1,6 +1,6 @@
 import {Moment} from 'moment';
 import {ICalendar, ICalendarInternal} from '../common/models/calendar.model';
-import {ECalendarValue} from '../common/types/calendar-value-enum';
+import {ECalendarValue} from '..';
 
 export interface IConfig {
   isMonthDisabledCallback?: (date: Moment) => boolean;
@@ -11,6 +11,7 @@ export interface IConfig {
   isNavHeaderBtnClickable?: boolean;
   monthBtnFormat?: string;
   monthBtnFormatter?: (day: Moment) => string;
+  numOfMonthRows?: number;
   monthBtnCssClassCallback?: (day: Moment) => string;
   multipleYearsNavigateBy?: number;
   showMultipleYearsNavigation?: boolean;