Skip to content

Commit 5702231

Browse files
vlio20vlio20
authored
adding support for custom amount of rows for month calendar - resolve… (#487)
* adding support for custom amount of rows for month calendar - resolves #387 * fixing unit test
1 parent 82678fc commit 5702231

14 files changed

+211
-67
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
44
# [8.1.0] (???)
55

66
### Features
7+
- Add number of rows to month calendar ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#387](https://github.com/vlio20/angular-datepicker/issues/387)
78
- Close popup on enter ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#438](https://github.com/vlio20/angular-datepicker/issues/438)
89

910
### Bug Fixes

‎README.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@ Here are the available configurations:
218218
| 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. |
219219
| showMultipleYearsNavigation | `boolean` | `false` | If set to `true` will show buttons to navigate by multiple years (10 by default) |
220220
| multipleYearsNavigateBy | `number` | `10` | Number of years to navigate when showMultipleYearsNavigation is `true` |
221+
| numOfMonthRows | `1, 2, 3, 4, 6, 12` | `4` | Number of rows to be shown on month calendar |
221222

222223
## Inline - Month Calendar
223224

@@ -266,7 +267,8 @@ Here are the available configurations:
266267
| monthBtnFormatter | `(Moment) => String` | `undefined` | The formatter (callback function) of the month button in the calendar. |
267268
| 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. |
268269
| showMultipleYearsNavigation | `boolean` | `false` | If set to `true` will show buttons to navigate by multiple years (10 by default) |
269-
| multipleYearsNavigateBy | `number` | `10` | Number of years to navigate when showMultipleYearsNavigation is `true` |
270+
| multipleYearsNavigateBy | `number` | `10` | Number of years to navigate when showMultipleYearsNavigation is `true` |
271+
| numOfMonthRows | `1, 2, 3, 4, 6, 12` | `4` | Number of rows to be shown on month calendar |
270272

271273
Here is the list of APIs:
272274

@@ -393,7 +395,8 @@ Here are the available configurations:
393395
| multipleYearsNavigateBy | `Number` | `10` | Number of years to navigate when showMultipleYearsNavigation is `true`. |
394396
| hideInputContainer | `Boolean` | `false` | Will hide the input element of any picker if set to `true`. |
395397
| weekDayFormat | `String` | `ddd` | The format of the weekday name. |
396-
| 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. |
398+
| 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. |
399+
| numOfMonthRows | `1, 2, 3, 4, 6, 12` | `4` | Number of rows to be shown on month calendar |
397400

398401

399402
## Directive

‎e2e/app.po.ts

+2
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,8 @@ export class DemoPage {
115115
meridiemDisplay = $(`${this.popupSelector} .dp-time-select-display-meridiem`);
116116
meridiemDisplayInline = $(`.dp-inline .dp-time-select-display-meridiem`);
117117
timeSeparatorDisplay = $(`${this.popupSelector} .dp-time-select-separator:nth-child(2)`);
118+
monthRows = $$('.dp-months-row');
119+
numOfMonthRowsToggle2 = $('#numOfMonthRows2');
118120

119121
daytimePickerMenu = $('#daytimePickerMenu');
120122
daytimeInlineMenu = $('#daytimeInlineMenu');

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

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {DemoPage} from '../app.po';
2+
3+
describe('number of month rows', () => {
4+
5+
let page: DemoPage;
6+
7+
beforeEach(async () => {
8+
page = new DemoPage();
9+
await page.navigateTo();
10+
});
11+
12+
it('should make sure number of rows are changing on date-picker', async () => {
13+
await page.daytimePickerMenu.click();
14+
await page.dayPickerInput.click();
15+
await page.dayCalendarNavHeaderBtn.click();
16+
expect(await page.monthRows.count()).toEqual(3);
17+
18+
await page.numOfMonthRowsToggle2.click();
19+
await page.dayPickerInput.click();
20+
expect(await page.monthRows.count()).toEqual(2);
21+
});
22+
23+
it('should make sure number of rows are changing on month-picker', async () => {
24+
await page.monthPickerMenu.click();
25+
await page.monthPickerInput.click();
26+
expect(await page.monthRows.count()).toEqual(3);
27+
28+
await page.numOfMonthRowsToggle2.click();
29+
await page.dayPickerInput.click();
30+
expect(await page.monthRows.count()).toEqual(2);
31+
});
32+
33+
it('should make sure number of rows are changing on month inline', async () => {
34+
await page.monthInlineMenu.click();
35+
expect(await page.monthRows.count()).toEqual(3);
36+
37+
await page.numOfMonthRowsToggle2.click();
38+
expect(await page.monthRows.count()).toEqual(2);
39+
});
40+
});

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,6 @@ export const DEF_CONF: IDatePickerConfig = {
3737
hideInputContainer: false,
3838
returnedValueType: ECalendarValue.String,
3939
unSelectOnClick: true,
40-
hideOnOutsideClick: true
40+
hideOnOutsideClick: true,
41+
numOfMonthRows: 3
4142
};

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

+50
Original file line numberDiff line numberDiff line change
@@ -819,6 +819,56 @@ <h3 class="dp-options-section">Config options</h3>
819819
</label>
820820
</div>
821821
</div>
822+
823+
<div *ngIf="isValidConfig('numOfMonthRows')" class="dp-option">
824+
<span class="dp-option-header">
825+
Number of Month rows (numOfMonthRows):
826+
</span>
827+
<div class="dp-option-playground">
828+
<label>1
829+
<input id="numOfMonthRows1"
830+
[formControl]="numOfMonthRows"
831+
[value]="1"
832+
name="numOfMonthRows"
833+
type="radio">
834+
</label>
835+
<label>2
836+
<input id="numOfMonthRows2"
837+
[formControl]="numOfMonthRows"
838+
[value]="2"
839+
name="numOfMonthRows"
840+
type="radio">
841+
</label>
842+
<label>3
843+
<input id="numOfMonthRows3"
844+
[formControl]="numOfMonthRows"
845+
[value]="3"
846+
name="numOfMonthRows"
847+
type="radio">
848+
</label>
849+
<label>4
850+
<input id="numOfMonthRows4"
851+
[formControl]="numOfMonthRows"
852+
[value]="4"
853+
name="numOfMonthRows"
854+
type="radio">
855+
</label>
856+
<label>6
857+
<input id="numOfMonthRows6"
858+
[formControl]="numOfMonthRows"
859+
[value]="6"
860+
name="numOfMonthRows"
861+
type="radio">
862+
</label>
863+
<label>12
864+
<input id="numOfMonthRows12"
865+
[formControl]="numOfMonthRows"
866+
[value]="12"
867+
name="numOfMonthRows"
868+
type="radio">
869+
</label>
870+
</div>
871+
</div>
822872
</div>
823873

824874
<div class="dp-api">

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

+9
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const MONTH_CALENDAR_OPTION_KEYS = [
5959
'showGoToCurrent',
6060
'unSelectOnClick',
6161
'moveCalendarTo',
62+
'numOfMonthRows',
6263
...GLOBAL_OPTION_KEYS
6364
];
6465
const DAY_CALENDAR_OPTION_KEYS = [
@@ -221,6 +222,7 @@ export class ConfigFormComponent implements OnInit {
221222
multipleYearsNavigateBy: FormControl;
222223
returnedValueType: FormControl;
223224
closeOnEnter: FormControl;
225+
numOfMonthRows: FormControl;
224226

225227
ngOnInit() {
226228
this.localFormat = this.getDefaultFormatByMode(this.pickerMode);
@@ -267,6 +269,7 @@ export class ConfigFormComponent implements OnInit {
267269
this.multipleYearsNavigateBy = new FormControl(this.config.multipleYearsNavigateBy);
268270
this.returnedValueType = new FormControl(this.config.returnedValueType);
269271
this.closeOnEnter = new FormControl(this.config.closeOnEnter);
272+
this.numOfMonthRows = new FormControl(this.config.numOfMonthRows);
270273
this.initListeners();
271274
}
272275

@@ -618,6 +621,12 @@ export class ConfigFormComponent implements OnInit {
618621
closeOnEnter: val
619622
});
620623
});
624+
625+
this.numOfMonthRows.valueChanges.subscribe((val) => {
626+
this.onConfigChange.emit({
627+
numOfMonthRows: val
628+
});
629+
});
621630
}
622631

623632
private getDefaultFormatByMode(mode: string): string {

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

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,9 @@ import {
1616
ViewContainerRef
1717
} from '@angular/core';
1818
import {NgControl} from '@angular/forms';
19-
import {CalendarValue} from '../common/types/calendar-value';
20-
import {SingleCalendarValue} from '../common/types/single-calendar-value';
19+
import {CalendarValue, ISelectionEvent, SingleCalendarValue} from '..';
2120
import {INavEvent} from '../common/models/navigation-event.model';
2221
import {UtilsService} from '../common/services/utils/utils.service'
23-
import {ISelectionEvent} from '../common/types/selection-evet.model';
2422

2523
@Directive({
2624
exportAs: 'dpDayPicker',

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ export class DatePickerService {
8383
locale: pickerConfig.locale,
8484
returnedValueType: pickerConfig.returnedValueType,
8585
showGoToCurrent: pickerConfig.showGoToCurrent,
86-
unSelectOnClick: pickerConfig.unSelectOnClick
86+
unSelectOnClick: pickerConfig.unSelectOnClick,
87+
numOfMonthRows: pickerConfig.numOfMonthRows
8788
};
8889
}
8990

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

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export interface IConfig {
2929
returnedValueType?: ECalendarValue;
3030
showGoToCurrent?: boolean;
3131
unSelectOnClick?: boolean;
32+
numOfMonthRows?: number;
3233
}
3334

3435
export interface IDayCalendarConfig extends IConfig,

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,8 @@ export class DayCalendarService {
177177
monthBtnCssClassCallback: componentConfig.monthBtnCssClassCallback,
178178
multipleYearsNavigateBy: componentConfig.multipleYearsNavigateBy,
179179
showMultipleYearsNavigation: componentConfig.showMultipleYearsNavigation,
180-
showGoToCurrent: componentConfig.showGoToCurrent
180+
showGoToCurrent: componentConfig.showGoToCurrent,
181+
numOfMonthRows: componentConfig.numOfMonthRows
181182
});
182183
}
183184

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Moment} from 'moment';
22
import {ICalendar, ICalendarInternal} from '../common/models/calendar.model';
3-
import {ECalendarValue} from '../common/types/calendar-value-enum';
3+
import {ECalendarValue} from '..';
44

55
export interface IConfig {
66
isMonthDisabledCallback?: (date: Moment) => boolean;
@@ -11,6 +11,7 @@ export interface IConfig {
1111
isNavHeaderBtnClickable?: boolean;
1212
monthBtnFormat?: string;
1313
monthBtnFormatter?: (day: Moment) => string;
14+
numOfMonthRows?: number;
1415
monthBtnCssClassCallback?: (day: Moment) => string;
1516
multipleYearsNavigateBy?: number;
1617
showMultipleYearsNavigation?: boolean;

0 commit comments

Comments
 (0)