Add days in shoulder months

src/calendar.ts

@@ -274,27 +274,45 @@ export class Calendar extends LPCore {
     const days = document.createElement('div');
     days.className = style.containerDays;
 
+    const elementsPerRow = this.options.showWeekNumbers ? 8 : 7;
+    let week = document.createElement('div');
+    week.className = style.monthItemWeekRow;
+
     const skipDays = this.calcSkipDays(startDate);
 
     if (this.options.showWeekNumbers && skipDays) {
-      days.appendChild(this.renderWeekNumber(startDate));
+      week.appendChild(this.renderWeekNumber(startDate));
     }
 
+    const skipDate = startDate.clone();
+    skipDate.setDate(-skipDays + 1);
     for (let idx = 0; idx < skipDays; idx += 1) {
-      const dummy = document.createElement('div');
-      days.appendChild(dummy);
+      week.appendChild(this.renderDay(skipDate, date));
+      skipDate.setDate(skipDate.getDate() + 1);
     }
 
     // tslint:disable-next-line: prefer-for-of
     for (let idx = 1; idx <= totalDays; idx += 1) {
       startDate.setDate(idx);
 
       if (this.options.showWeekNumbers && startDate.getDay() === this.options.firstDay) {
-        days.appendChild(this.renderWeekNumber(startDate));
+        week.appendChild(this.renderWeekNumber(startDate));
+      }
+
+      week.appendChild(this.renderDay(startDate, date));
+      if (week.childNodes.length == elementsPerRow) {
+        days.appendChild(week);
+        week = document.createElement('div');
+        week.className = style.monthItemWeekRow;
       }
+    }
 
-      days.appendChild(this.renderDay(startDate));
+    const remainingDays = elementsPerRow - week.childNodes.length;
+    for (let idx = 0; idx < remainingDays; idx += 1) {
+      startDate.setDate(startDate.getDate() + 1);
+      week.appendChild(this.renderDay(startDate, date));
     }
+    days.appendChild(week);
 
     month.appendChild(monthHeader);
     month.appendChild(weekdaysRow);
@@ -305,7 +323,7 @@ export class Calendar extends LPCore {
     return month;
   }
 
-  protected renderDay(date: DateTime) {
+  protected renderDay(date: DateTime, month: DateTime) {
     date.setHours();
 
     const day = document.createElement('div');
@@ -317,6 +335,10 @@ export class Calendar extends LPCore {
       day.classList.add(style.isToday);
     }
 
+    if (date.getMonth() != month.getMonth()) {
+      day.classList.add(style.isDifferentMonth);
+    }
+
     if (this.datePicked.length) {
       if (this.datePicked[0].toDateString() === date.toDateString()) {
         day.classList.add(style.isStartDate);

src/scss/main.scss

@@ -8,7 +8,7 @@
   --litepicker-button-prev-month-color: #9e9e9e;
   --litepicker-button-next-month-color: #9e9e9e;
   --litepicker-button-prev-month-color-hover: #2196f3;
-  --litepicker-button-next-month-color-hover: #2196f3; 
+  --litepicker-button-next-month-color-hover: #2196f3;
   --litepicker-month-width: calc(var(--litepicker-day-width) * 7); // 7 days
   --litepicker-month-weekday-color: #9e9e9e;
   --litepicker-month-week-number-color: #9e9e9e;
@@ -28,6 +28,8 @@
   --litepicker-button-apply-color-bg: #2196f3;
   --litepicker-button-reset-color: #909090;
   --litepicker-button-reset-color-hover: #2196f3;
+  --litepicker-different-month-day-color: #333;
+  --litepicker-different-month-day-color-bg: #ddd;
   --litepicker-highlighted-day-color: #333;
   --litepicker-highlighted-day-color-bg: #ffeb3b;
 }
@@ -174,7 +176,8 @@
           }
         }
 
-        &-weekdays-row {
+        &-weekdays-row,
+        &-week-row {
           display: flex;
           justify-self: center;
           justify-content: flex-start;
@@ -189,6 +192,7 @@
           }
         }
 
+
         &:first-child {
           .button-previous-month {
             visibility: visible;
@@ -304,6 +308,11 @@
           color: var(--litepicker-highlighted-day-color);
           background-color: var(--litepicker-highlighted-day-color-bg);
         }
+
+        &.is-different-month {
+          color: var(--litepicker-different-month-day-color);
+          background-color: var(--litepicker-different-month-day-color-bg);
+        }
       }
 
       .week-number {

src/scss/main.scss.d.ts

@@ -17,6 +17,7 @@ export const monthItemWeekdaysRow: string;
 export const noPreviousMonth: string;
 export const noNextMonth: string;
 export const containerDays: string;
+export const monthItemWeekRow: string;
 export const dayItem: string;
 export const isToday: string;
 export const isLocked: string;
@@ -25,6 +26,7 @@ export const isStartDate: string;
 export const isFlipped: string;
 export const isEndDate: string;
 export const isHighlighted: string;
+export const isDifferentMonth: string;
 export const weekNumber: string;
 export const containerFooter: string;
 export const previewDateRange: string;