Skip to content

Commit 2552889

Browse files
vlio20vlio20
authored
adding navigation events (#334)
resolves #329
1 parent 013a495 commit 2552889

13 files changed

+169
-40
lines changed

‎README.md

+19-6
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,9 @@ Put the dp-date-picker component wherever you need it.
6363
| onChange | `CalendarValue` | All Pickers | This event will be emitted on every valid value change, if you want to receive every value (valid and invalid) please use the native `ngModelChange` output. |
6464
| open | `undefined` | All Pickers | This event will be emitted when picker is opened. |
6565
| close | `CalendarValue` | All Pickers | This event will be emitted when picker is closed. |
66-
| onGoToCurrent | | All Pickers | This event will be emitted when click on go to current in navigation. |
66+
| onGoToCurrent | void | All Pickers | This event will be emitted when click was made on go to current button. |
67+
| onLeftNav | void | All Pickers | This event will be emitted when click was made on left navigation button. |
68+
| onRightNav | void | All Pickers | This event will be emitted when click was made on right navigation button. |
6769

6870
### Configuration:
6971
In order to provide configurations to the date-picker you need to pass it to the `dp-date-picker` component:
@@ -182,9 +184,12 @@ i.e.
182184

183185
| Name | Event Arguments | Description |
184186
|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|
185-
| onSelect | `IDay` | This event will be emitted when a day is selected. |
186-
| onMonthSelect | `IMonth` | This event will be emitted when a month is selected. |
187-
| onNavHeaderBtnClick | `ECalendarMode` | This event will be emitted when the mode of the calendar switches form day to month and vise versa. |
187+
| onSelect | `IDay` | This event will be emitted when a day is selected. |
188+
| onMonthSelect | `IMonth` | This event will be emitted when a month is selected. |
189+
| onNavHeaderBtnClick | `ECalendarMode` | This event will be emitted when the mode of the calendar switches form day to month and vise versa. |
190+
| onGoToCurrent | void | This event will be emitted when click was made on go to current button. |
191+
| onLeftNav | void | This event will be emitted when click was made on left navigation button. |
192+
| onRightNav | void | This event will be emitted when click was made on right navigation button. |
188193

189194
### Configuration:
190195
In order to provide configurations to the day-calendar you need to pass it to the `dp-day-calendar` component:
@@ -239,8 +244,11 @@ i.e.
239244

240245
| Name | Event Arguments | Description |
241246
|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|
242-
| onSelect | `IMonth` | This event will be emitted when a month is selected. |
243-
| onNavHeaderBtnClick | `null` | This event will be emitted when the mode button, in the navigation section, was clicked. |
247+
| onSelect | `IMonth` | This event will be emitted when a month is selected. |
248+
| onNavHeaderBtnClick | `null` | This event will be emitted when the mode button, in the navigation section, was clicked. |
249+
| onGoToCurrent | void | This event will be emitted when click was made on go to current button. |
250+
| onLeftNav | void | This event will be emitted when click was made on left navigation button. |
251+
| onRightNav | void | This event will be emitted when click was made on right navigation button. |
244252

245253

246254
### Configuration:
@@ -340,9 +348,14 @@ i.e.
340348
| theme | `String` | `''` | Theme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body). There is a built in theme named dp-material, you can find it in the demo. |
341349
| config | `IDatePickerConfig` | See Below | Configuration object - see description below. |
342350

351+
### Attributes (Output):
352+
343353
| Name | Event Arguments | Description |
344354
|----------------------|:-----------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------|
345355
| onChange | `IDate` | This event will be emitted when time is selected. |
356+
| onGoToCurrent | void | This event will be emitted when click was made on go to current button. |
357+
| onLeftNav | void | This event will be emitted when click was made on left navigation button. |
358+
| onRightNav | void | This event will be emitted when click was made on right navigation button. |
346359

347360
### Configuration:
348361
In order to provide configurations to the day-time-calendar you need to pass it to the `dp-day-time-calendar` component:

‎src/app/common/models/navigation-event.model.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {Moment} from 'moment';
2+
3+
export interface INavEvent {
4+
from: Moment;
5+
to: Moment;
6+
}

‎src/app/date-picker/date-picker.component.html

+12-6
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,23 @@
2121
[config]="dayCalendarConfig"
2222
[ngModel]="_selected"
2323
[displayDate]="displayDate"
24-
(onSelect)="dateSelected($event, 'day')"
2524
[theme]="theme"
26-
(onGoToCurrent)="onGoToCurrent.emit()">
25+
(onSelect)="dateSelected($event, 'day')"
26+
(onGoToCurrent)="onGoToCurrent.emit()"
27+
(onLeftNav)="onLeftNavClick($event)"
28+
(onRightNav)="onRightNavClick($event)">
2729
</dp-day-calendar>
2830

2931
<dp-month-calendar #monthCalendar
3032
*ngSwitchCase="'month'"
3133
[config]="dayCalendarConfig"
3234
[ngModel]="_selected"
3335
[displayDate]="displayDate"
34-
(onSelect)="dateSelected($event, 'month')"
3536
[theme]="theme"
36-
(onGoToCurrent)="onGoToCurrent.emit()">
37+
(onSelect)="dateSelected($event, 'month')"
38+
(onGoToCurrent)="onGoToCurrent.emit()"
39+
(onLeftNav)="onLeftNavClick($event)"
40+
(onRightNav)="onRightNavClick($event)">
3741
</dp-month-calendar>
3842

3943
<dp-time-select #timeSelect
@@ -49,9 +53,11 @@
4953
[config]="dayTimeCalendarConfig"
5054
[displayDate]="displayDate"
5155
[ngModel]="_selected && _selected[0]"
52-
(onChange)="dateSelected($event, 'second', true)"
5356
[theme]="theme"
54-
(onGoToCurrent)="onGoToCurrent.emit()">
57+
(onChange)="dateSelected($event, 'second', true)"
58+
(onGoToCurrent)="onGoToCurrent.emit()"
59+
(onLeftNav)="onLeftNavClick($event)"
60+
(onRightNav)="onRightNavClick($event)">
5561
</dp-day-time-calendar>
5662
</div>
5763
</div>

‎src/app/date-picker/date-picker.component.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import {Moment, unitOfTime} from 'moment';
4747
import {DateValidator} from '../common/types/validator.type';
4848
import {MonthCalendarComponent} from '../month-calendar/month-calendar.component';
4949
import {DayTimeCalendarComponent} from '../day-time-calendar/day-time-calendar.component';
50+
import {INavEvent} from '../common/models/navigation-event.model';
5051

5152
@Component({
5253
selector: 'dp-date-picker',
@@ -92,7 +93,9 @@ export class DatePickerComponent implements OnChanges,
9293
@Output() open = new EventEmitter<void>();
9394
@Output() close = new EventEmitter<void>();
9495
@Output() onChange = new EventEmitter<CalendarValue>();
95-
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter<void>();
96+
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter();
97+
@Output() onLeftNav: EventEmitter<INavEvent> = new EventEmitter();
98+
@Output() onRightNav: EventEmitter<INavEvent> = new EventEmitter();
9699

97100
@ViewChild('container') calendarContainer: ElementRef;
98101
@ViewChild('dayCalendar') dayCalendarRef: DayCalendarComponent;
@@ -448,6 +451,14 @@ export class DatePickerComponent implements OnChanges,
448451
this.currentDateView = momentDate;
449452
}
450453

454+
onLeftNavClick(change: INavEvent) {
455+
this.onLeftNav.emit(change);
456+
}
457+
458+
onRightNavClick(change: INavEvent) {
459+
this.onRightNav.emit(change);
460+
}
461+
451462
startGlobalListeners() {
452463
this.globalListnersUnlisteners.push(
453464
this.renderer.listen(document, 'keydown', (e: KeyboardEvent) => {

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
import {NgControl} from '@angular/forms';
1919
import {CalendarValue} from '../common/types/calendar-value';
2020
import {SingleCalendarValue} from '../common/types/single-calendar-value';
21+
import {INavEvent} from '../common/models/navigation-event.model';
2122

2223
@Directive({
2324
exportAs: 'dpDayPicker',
@@ -152,7 +153,9 @@ export class DatePickerDirective implements OnInit {
152153
@Output() open = new EventEmitter<void>();
153154
@Output() close = new EventEmitter<void>();
154155
@Output() onChange = new EventEmitter<CalendarValue>();
155-
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter<void>();
156+
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter();
157+
@Output() onLeftNav: EventEmitter<INavEvent> = new EventEmitter();
158+
@Output() onRightNav: EventEmitter<INavEvent> = new EventEmitter();
156159

157160
public datePicker: DatePickerComponent;
158161
public api: IDpDayPickerApi;
@@ -248,6 +251,8 @@ export class DatePickerDirective implements OnInit {
248251
this.datePicker.close = this.close;
249252
this.datePicker.onChange = this.onChange;
250253
this.datePicker.onGoToCurrent = this.onGoToCurrent;
254+
this.datePicker.onLeftNav = this.onLeftNav;
255+
this.datePicker.onRightNav = this.onRightNav;
251256

252257
this.datePicker.init();
253258

‎src/app/day-calendar/day-calendar.component.html

+7-3
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
[isLabelClickable]="componentConfig.enableMonthSelector"
77
[showGoToCurrent]="_shouldShowCurrent"
88
[theme]="theme"
9-
(onLeftNav)="onLeftNav()"
10-
(onRightNav)="onRightNav()"
9+
(onLeftNav)="onLeftNavClick()"
10+
(onRightNav)="onRightNavClick()"
1111
(onLabelClick)="toggleCalendarMode(CalendarMode.Month)"
1212
(onGoToCurrent)="goToCurrent()">
1313
</dp-calendar-nav>
@@ -43,5 +43,9 @@
4343
[displayDate]="_currentDateView"
4444
[theme]="theme"
4545
(onSelect)="monthSelected($event)"
46-
(onNavHeaderBtnClick)="toggleCalendarMode(CalendarMode.Day)">
46+
(onNavHeaderBtnClick)="toggleCalendarMode(CalendarMode.Day)"
47+
(onLeftNav)="onMonthCalendarLeftClick($event)"
48+
(onRightNav)="onMonthCalendarRightClick($event)"
49+
(onLeftSecondaryNav)="onMonthCalendarSecondaryLeftClick($event)"
50+
(onRightSecondaryNav)="onMonthCalendarSecondaryRightClick($event)">
4751
</dp-month-calendar>

‎src/app/day-calendar/day-calendar.component.ts

+28-3
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {UtilsService} from '../common/services/utils/utils.service';
3434
import {IMonthCalendarConfig} from '../month-calendar/month-calendar-config';
3535
import {IMonth} from '../month-calendar/month.model';
3636
import {DateValidator} from '../common/types/validator.type';
37+
import {INavEvent} from '../common/models/navigation-event.model';
3738

3839
@Component({
3940
selector: 'dp-day-calendar',
@@ -66,7 +67,9 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
6667
@Output() onSelect: EventEmitter<IDay> = new EventEmitter();
6768
@Output() onMonthSelect: EventEmitter<IMonth> = new EventEmitter();
6869
@Output() onNavHeaderBtnClick: EventEmitter<ECalendarMode> = new EventEmitter();
69-
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter<void>();
70+
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter();
71+
@Output() onLeftNav: EventEmitter<INavEvent> = new EventEmitter();
72+
@Output() onRightNav: EventEmitter<INavEvent> = new EventEmitter();
7073

7174
CalendarMode = ECalendarMode;
7275
isInited: boolean = false;
@@ -242,12 +245,34 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
242245
return cssClasses;
243246
}
244247

245-
onLeftNav() {
248+
onLeftNavClick() {
249+
const from = this.currentDateView.clone();
246250
this.moveCalendarsBy(this.currentDateView, -1, 'month');
251+
const to = this.currentDateView.clone();
252+
this.onLeftNav.emit({from, to});
247253
}
248254

249-
onRightNav() {
255+
onRightNavClick() {
256+
const from = this.currentDateView.clone();
250257
this.moveCalendarsBy(this.currentDateView, 1, 'month');
258+
const to = this.currentDateView.clone();
259+
this.onRightNav.emit({from, to});
260+
}
261+
262+
onMonthCalendarLeftClick(change: INavEvent) {
263+
this.onLeftNav.emit(change);
264+
}
265+
266+
onMonthCalendarRightClick(change: INavEvent) {
267+
this.onRightNav.emit(change);
268+
}
269+
270+
onMonthCalendarSecondaryLeftClick(change: INavEvent) {
271+
this.onRightNav.emit(change);
272+
}
273+
274+
onMonthCalendarSecondaryRightClick(change: INavEvent) {
275+
this.onLeftNav.emit(change);
251276
}
252277

253278
getWeekdayName(weekday: Moment): string {

‎src/app/day-time-calendar/day-time-calendar.component.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<dp-day-calendar #dayCalendar
22
[config]="componentConfig"
33
[ngModel]="_selected"
4+
[theme]="theme"
45
[displayDate]="displayDate"
56
(onSelect)="dateSelected($event)"
67
(onGoToCurrent)="onGoToCurrent.emit()"
7-
[theme]="theme">
8+
(onLeftNav)="onLeftNavClick($event)"
9+
(onRightNav)="onRightNavClick($event)">
810
</dp-day-calendar>
911
<dp-time-select #timeSelect
1012
[config]="componentConfig"

‎src/app/day-time-calendar/day-time-calendar.component.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {IDayTimeCalendarConfig} from './day-time-calendar-config.model';
3333
import {DayTimeCalendarService} from './day-time-calendar.service';
3434
import {DateValidator} from '../common/types/validator.type';
3535
import {DayCalendarComponent} from '../day-calendar/day-calendar.component';
36+
import {INavEvent} from '../common/models/navigation-event.model';
3637

3738
@Component({
3839
selector: 'dp-day-time-calendar',
@@ -65,7 +66,9 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
6566
@HostBinding('class') @Input() theme: string;
6667

6768
@Output() onChange: EventEmitter<IDate> = new EventEmitter();
68-
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter<void>();
69+
@Output() onGoToCurrent: EventEmitter<void> = new EventEmitter();
70+
@Output() onLeftNav: EventEmitter<INavEvent> = new EventEmitter();
71+
@Output() onRightNav: EventEmitter<INavEvent> = new EventEmitter();
6972

7073
@ViewChild('dayCalendar') dayCalendarRef: DayCalendarComponent;
7174

@@ -186,4 +189,12 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
186189
this.dayCalendarRef.moveCalendarTo(to);
187190
}
188191
}
192+
193+
onLeftNavClick(change: INavEvent) {
194+
this.onLeftNav.emit(change);
195+
}
196+
197+
onRightNavClick(change: INavEvent) {
198+
this.onRightNav.emit(change);
199+
}
189200
}

0 commit comments

Comments
 (0)