- add logic to generate more days per month if displayHiddenDays flag is true;

- change datetime component to use this attribute when in theme: ionic;
- document changes;

Author: JoaoFerreira-FrontEnd

core/src/components/datetime/datetime.tsx

@@ -2193,7 +2193,7 @@ export class Datetime implements ComponentInterface {
       </div>
     );
   }
-  private renderMonth(month: number, year: number) {
+  private renderMonth(month: number, year: number, theme: Theme) {
     const { disabled, readonly } = this;
 
     const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
@@ -2234,10 +2234,35 @@ export class Datetime implements ComponentInterface {
         }}
       >
         <div class="calendar-month-grid">
-          {getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
-            const { day, dayOfWeek } = dateObject;
+          {getDaysOfMonth(month, year, this.firstDayOfWeek % 7, theme === 'ionic').map((dateObject, index) => {
+            const { day, dayOfWeek, hiddenDay } = dateObject;
             const { el, highlightedDates, isDateEnabled, multiple } = this;
-            const referenceParts = { month, day, year };
+            let _month = month;
+            let _year = year;
+
+            if(theme === 'ionic'){
+              if(hiddenDay && day !== null && day > 20) {
+                // Leading with the hidden day from the previous month
+                // if its a hidden day and is higher than '20' (last week even in feb)
+                if(month === 1) {
+                  _year = year - 1;
+                  _month = 12;
+                }else{
+                  _month = month-1;
+                }
+              } else if(hiddenDay && day !== null && day < 15) {
+                // Leading with the hidden day from the next month
+                // if its a hidden day and is lower than '15' (first two weeks)
+                if(month === 12) {
+                  _year = year + 1;
+                  _month = 1;
+                } else {
+                  _month = month + 1;
+                }
+              }
+            }
+            
+            const referenceParts = { month:_month, day, year:_year };
             const isCalendarPadding = day === null;
             const {
               isActive,
@@ -2258,7 +2283,7 @@ export class Datetime implements ComponentInterface {
 
             const dateIsoString = convertDataToISO(referenceParts);
 
-            let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
+            let isCalDayDisabled = isCalMonthDisabled || isDayDisabled || hiddenDay;
 
             if (!isCalDayDisabled && isDateEnabled !== undefined) {
               try {
@@ -2292,7 +2317,7 @@ export class Datetime implements ComponentInterface {
              * Custom highlight styles should not override the style for selected dates,
              * nor apply to "filler days" at the start of the grid.
              */
-            if (highlightedDates !== undefined && !isActive && day !== null) {
+            if (highlightedDates !== undefined && !isActive && day !== null && !hiddenDay) {
               dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
             }
 
@@ -2327,8 +2352,8 @@ export class Datetime implements ComponentInterface {
                   }}
                   tabindex="-1"
                   data-day={day}
-                  data-month={month}
-                  data-year={year}
+                  data-month={_month}
+                  data-year={_year}
                   data-index={index}
                   data-day-of-week={dayOfWeek}
                   disabled={isButtonDisabled}
@@ -2384,11 +2409,11 @@ export class Datetime implements ComponentInterface {
       </div>
     );
   }
-  private renderCalendarBody() {
+  private renderCalendarBody(theme: Theme) {
     return (
       <div class="calendar-body ion-focusable" ref={(el) => (this.calendarBodyRef = el)} tabindex="0">
         {generateMonths(this.workingParts, this.forceRenderDate).map(({ month, year }) => {
-          return this.renderMonth(month, year);
+          return this.renderMonth(month, year, theme);
         })}
       </div>
     );
@@ -2397,7 +2422,7 @@ export class Datetime implements ComponentInterface {
     return (
       <div class="datetime-calendar" key="datetime-calendar">
         {this.renderCalendarHeader(theme)}
-        {this.renderCalendarBody()}
+        {this.renderCalendarBody(theme)}
       </div>
     );
   }

core/src/components/datetime/utils/data.ts

@@ -102,8 +102,15 @@ export const getDaysOfWeek = (locale: string, theme: Theme, firstDayOfWeek = 0)
  * the firstDayOfWeek value (Sunday by default)
  * using null values.
  */
-export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: number) => {
+export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: number, displayHiddenDays = false) => {
   const numDays = getNumDaysInMonth(month, year);
+  let previousNumDays: number; //previous month number of days
+  if (month === 1) { //If january the previous month should be january and the last year
+    previousNumDays = getNumDaysInMonth(12, year-1);
+  } else { //If not the previous month should be month -1 and the current year
+    previousNumDays = getNumDaysInMonth(month - 1, year);
+  }
+  
   const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
 
   /**
@@ -127,14 +134,38 @@ export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: numb
    */
   const offset =
     firstOfMonth >= firstDayOfWeek ? firstOfMonth - (firstDayOfWeek + 1) : 6 - (firstDayOfWeek - firstOfMonth);
+  let days: ({
+   day: number;
+   dayOfWeek: number;
+   hiddenDay: boolean;
+  } | {
+      day: null;
+      dayOfWeek: null;
+      hiddenDay: boolean;
+})[] = [];
+   for (let i = 1; i <= numDays; i++) {
+    days.push({ day: i, dayOfWeek: (offset + i) % 7, hiddenDay: false });
+   }
+
+  if (displayHiddenDays) {
+    for (let i = 0; i <= offset; i++) {
+      // Using offset create previous month hidden day, starting from last day
+      days = [{ day: previousNumDays-i, dayOfWeek: (previousNumDays - i) % 7, hiddenDay:true }, ...days];
+    }
 
-  let days = [];
-  for (let i = 1; i <= numDays; i++) {
-    days.push({ day: i, dayOfWeek: (offset + i) % 7 });
-  }
+    // Calculate positiveOffset
+    // The calendar will display 42 days (6 rows of 7 columns)
+    // Knowing this the offset is 41 (we start at index 0)
+    // minus (the previous offset + the current month days) 
+    const positiveOffset = 41 - (numDays + offset);
+    for (let i = 0; i < positiveOffset; i++) {
+      days.push( {day:i+1, dayOfWeek:((numDays + offset) + i) % 7, hiddenDay: true} )
+    }
 
-  for (let i = 0; i <= offset; i++) {
-    days = [{ day: null, dayOfWeek: null }, ...days];
+  } else {
+    for (let i = 0; i <= offset; i++) {
+      days = [{ day: null, dayOfWeek: null, hiddenDay:true }, ...days];
+    }
   }
 
   return days;