diff --git a/README.md b/README.md index 8f3471c9..9164c98b 100644 --- a/README.md +++ b/README.md @@ -227,7 +227,8 @@ You can use theses options: | --- | --- |--- | | firstMonthDayClass | string | add a custom class for all first day of the month | | lastMonthDayClass | string | add a custom class for all last day of the month | -| emptyWeekRowClass | string | add a custom class for all date in a week not in the current month | +| emptyWeekRowClass | string | add a custom class in a row with a date in a week not in the current month | +| emptyWeekColumnClass | string | add a custom class for all date in a week not in the current month | | lastDayOfPreviousMonthClass | string | add a custom class for the last day of the previous month | | firstDayOfNextMonthClass | string | add a custom class for the first day of the next month | diff --git a/demo/src/app/full/full.component.html b/demo/src/app/full/full.component.html index 3d0e3a01..1e027d97 100644 --- a/demo/src/app/full/full.component.html +++ b/demo/src/app/full/full.component.html @@ -26,7 +26,8 @@ [closeOnAutoApply]="options.closeOnAutoApply" firstMonthDayClass="first-day" lastMonthDayClass="last-day" - emptyWeekRowClass="empty-week" + emptyWeekRowClass="empty-week-row" + emptyWeekColumnClass="empty-week-column" lastDayOfPreviousMonthClass="last-previous-day" firstDayOfNextMonthClass="first-next-day" [opens]="opens" diff --git a/demo/src/styles.scss b/demo/src/styles.scss index 1b062d57..7bf5eab6 100644 --- a/demo/src/styles.scss +++ b/demo/src/styles.scss @@ -7,17 +7,20 @@ color: white !important; } .first-day { - background-color: greenyellow; + background-color: greenyellow !important; } .last-day { - background-color: green; + background-color: green !important; } -.empty-week { - background-color: rosybrown; +.empty-week-row { + background-color: rosybrown !important; +} +.empty-week-column { + background-color: rgb(133, 45, 45) !important; } .last-previous-day { - background-color: rgb(218, 226, 145); + background-color: rgb(218, 226, 145) !important; } .first-next-day { - background-color: rgb(229, 255, 0); + background-color: rgb(229, 255, 0) !important; } diff --git a/src/daterangepicker/daterangepicker.component.ts b/src/daterangepicker/daterangepicker.component.ts index c1fe1fb6..47a47c12 100644 --- a/src/daterangepicker/daterangepicker.component.ts +++ b/src/daterangepicker/daterangepicker.component.ts @@ -86,6 +86,8 @@ export class DaterangepickerComponent implements OnInit { @Input() emptyWeekRowClass: string = null; @Input() + emptyWeekColumnClass: string = null; + @Input() firstDayOfNextMonthClass: string = null; @Input() lastDayOfPreviousMonthClass: string = null; @@ -1161,11 +1163,20 @@ export class DaterangepickerComponent implements OnInit { for (let row = 0; row < 6; row++) { this.calendarVariables[side].classes[row] = {}; const rowClasses = []; - if (this.emptyWeekRowClass && !this.hasCurrentMonthDays(this.calendarVariables[side].month, calendar[row])) { + if ( + this.emptyWeekRowClass && + Array.from(Array(7).keys()).some(i => calendar[row][i].month() !== this.calendarVariables[side].month) + ) { rowClasses.push(this.emptyWeekRowClass); } for (let col = 0; col < 7; col++) { const classes = []; + // empty week row class + if (this.emptyWeekColumnClass) { + if (calendar[row][col].month() !== this.calendarVariables[side].month) { + classes.push(this.emptyWeekColumnClass); + } + } // highlight today's date if (calendar[row][col].isSame(new Date(), 'day')) { classes.push('today'); diff --git a/src/daterangepicker/daterangepicker.directive.ts b/src/daterangepicker/daterangepicker.directive.ts index e90bbb4c..bfd602fd 100644 --- a/src/daterangepicker/daterangepicker.directive.ts +++ b/src/daterangepicker/daterangepicker.directive.ts @@ -92,6 +92,8 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck { @Input() emptyWeekRowClass: string; @Input() + emptyWeekColumnClass: string; + @Input() firstDayOfNextMonthClass: string; @Input() lastDayOfPreviousMonthClass: string; @@ -203,6 +205,7 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck { this.picker.firstMonthDayClass = this.firstMonthDayClass; this.picker.lastMonthDayClass = this.lastMonthDayClass; this.picker.emptyWeekRowClass = this.emptyWeekRowClass; + this.picker.emptyWeekColumnClass = this.emptyWeekColumnClass; this.picker.firstDayOfNextMonthClass = this.firstDayOfNextMonthClass; this.picker.lastDayOfPreviousMonthClass = this.lastDayOfPreviousMonthClass; this.picker.drops = this.drops;