feat(emptyWeekColumnClass): add emptyWeekColumnClass attribute to add…

… a custom class for all date in a week not in the current month

Fixes #315 #294 #126

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 |
 

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"

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;
 }

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');

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;