introduce calendar weeks

danielmoncada · Jun 3, 2024 · bd54730 · bd54730
1 parent 1743db8
commit bd54730
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -112,6 +112,7 @@ Properties for `owl-date-time`
 |`pickerMode`|`popup`, `dialog`|Optional|`popup`| The style the picker would open as. |
 |`startView`|`month`, `year`, `multi-year`|Optional|`month`| The view that the calendar should start in. |
 |`yearOnly`|boolean|Optional|`false`| Restricts the calendar to only show the year and multi-year views for month selection. |
+|`showCalendarWeeks`|boolean|Optional|`false`| Whether to show calendar weeks in the calendar. |
 |`multiyearOnly`|boolean|Optional|`false`| Restricts the calendar to only show the multi-year view for year selection. |
 |`startAt`| T/null |Optional|`null`| The moment to open the picker to initially. |
 |`endAt`| T/null |Optional|`null`| The the default selected time for range calendar end time | 

diff --git a/projects/picker/src/lib/date-time/calendar-month-view.component.html b/projects/picker/src/lib/date-time/calendar-month-view.component.html
@@ -1,4 +1,9 @@
-<table class="owl-dt-calendar-table owl-dt-calendar-month-table"
+<ul class="week-number" *ngIf="showCalendarWeeks">
+    <li *ngFor="let week of weekNumbers;">
+        <span>{{ week }}</span>
+    </li>
+</ul>
+<table class="owl-dt-calendar-table owl-dt-calendar-month-table" [ngClass]="{'owl-calendar-weeks': showCalendarWeeks}"
        [class.owl-dt-calendar-only-current-month]="hideOtherMonths">
     <thead class="owl-dt-calendar-header">
     <tr class="owl-dt-weekdays">
@@ -9,7 +14,7 @@
         </th>
     </tr>
     <tr>
-        <th class="owl-dt-calendar-table-divider" aria-hidden="true" colspan="7"></th>
+        <th class="owl-dt-calendar-table-divider" [ngClass]="{'owl-calendar-weeks': showCalendarWeeks}" aria-hidden="true" colspan="7"></th>
     </tr>
     </thead>
     <tbody owl-date-time-calendar-body role="grid"

diff --git a/projects/picker/src/lib/date-time/calendar-month-view.component.scss b/projects/picker/src/lib/date-time/calendar-month-view.component.scss
@@ -0,0 +1,16 @@
+.week-number {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  margin-bottom: 14px;
+  margin-top: 46px;
+  border-right: 1px solid rgba(0, 0, 0, .12);
+  width: 8%;
+  font-weight: bold;
+  li {
+    font-size: .8em;
+  } 
+}
diff --git a/projects/picker/src/lib/date-time/calendar-month-view.component.ts b/projects/picker/src/lib/date-time/calendar-month-view.component.ts
@@ -61,6 +61,12 @@ export class OwlMonthViewComponent<T>
      * */
     @Input()
     hideOtherMonths = false;
+
+    /**
+     * Whether to show calendar weeks in the calendar
+     * */
+    @Input()
+    showCalendarWeeks = false;
 
     private isDefaultFirstDayOfWeek = true;
 
@@ -257,6 +263,11 @@ export class OwlMonthViewComponent<T>
      * */
     public todayDate: number | null;
 
+    /**
+     * Week day numbers
+     * */
+    public weekNumbers: number[];
+
     /**
      * An array to hold all selectedDates' value
      * the value is the day number in current month
@@ -485,6 +496,7 @@ export class OwlMonthViewComponent<T>
         }
 
         this.todayDate = null;
+        this.weekNumbers = [];
 
         // the first weekday of the month
         const startWeekdayOfMonth = this.dateTimeAdapter.getDay(
@@ -511,7 +523,6 @@ export class OwlMonthViewComponent<T>
                     daysDiff
                 );
                 const dateCell = this.createDateCell(date, daysDiff);
-
                 // check if the date is today
                 if (
                     this.dateTimeAdapter.isSameDay(
@@ -526,11 +537,25 @@ export class OwlMonthViewComponent<T>
                 daysDiff += 1;
             }
             this._days.push(week);
+            if (this.showCalendarWeeks) {
+                const weekNumber = this.getISOWeek(new Date(week[0].ariaLabel));
+                this.weekNumbers.push(weekNumber);
+            }
         }
-
         this.setSelectedDates();
     }
 
+    public getISOWeek(d: Date): number {
+        const clonedDate = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+        // Make Sunday's day number 7
+        clonedDate.setUTCDate(clonedDate.getUTCDate() + 4 - (clonedDate.getUTCDay()||7));
+        // Get first day of year
+        const yearStart = new Date(Date.UTC(clonedDate.getUTCFullYear(),0,1));
+        // Calculate full weeks to nearest Thursday
+        const weekNo = Math.ceil(( ( (+clonedDate - +yearStart) / 86400000) + 1)/7);
+        return weekNo;
+    }
+
     private updateFirstDayOfWeek(locale: string): void {
         if (this.isDefaultFirstDayOfWeek) {
             try {

diff --git a/projects/picker/src/lib/date-time/calendar.component.html b/projects/picker/src/lib/date-time/calendar.component.html
@@ -70,6 +70,7 @@
             [selecteds]="selecteds"
             [selectMode]="selectMode"
             [minDate]="minDate"
+            [showCalendarWeeks]="showCalendarWeeks"
             [maxDate]="maxDate"
             [dateFilter]="dateFilter"
             [hideOtherMonths]="hideOtherMonths"

diff --git a/projects/picker/src/lib/date-time/calendar.component.ts b/projects/picker/src/lib/date-time/calendar.component.ts
@@ -236,6 +236,12 @@ export class OwlCalendarComponent<T>
      */
     @Input()
     yearOnly = false;
+
+    /**
+     * Whether to show calendar weeks in the calendar
+     * */
+    @Input()
+    showCalendarWeeks = false;
 
     /**
      * Whether to should only the multi-year view.

diff --git a/projects/picker/src/lib/date-time/date-time-picker-container.component.html b/projects/picker/src/lib/date-time/date-time-picker-container.component.html
@@ -15,6 +15,7 @@
             [dateFilter]="picker.dateTimeFilter"
             [startView]="picker.startView"
             [yearOnly]="picker.yearOnly"
+            [showCalendarWeeks]="picker.showCalendarWeeks"
             [multiyearOnly]="picker.multiyearOnly"
             [hideOtherMonths]="picker.hideOtherMonths"
             (yearSelected)="picker.selectYear($event)"

diff --git a/projects/picker/src/lib/date-time/date-time.class.ts b/projects/picker/src/lib/date-time/date-time.class.ts
@@ -62,6 +62,11 @@ export abstract class OwlDateTime<T> {
     @Input()
     startView: DateViewType = DateView.MONTH;
 
+    /**
+     * Whether to show calendar weeks in the calendar
+     * */
+    @Input()
+    showCalendarWeeks = false;
 
     /**
      * Whether to should only the year and multi-year views.

diff --git a/projects/picker/src/sass/picker.scss b/projects/picker/src/sass/picker.scss
@@ -236,7 +236,7 @@ $theme-color: #3f51b5;
 }
 
 .owl-dt-calendar-view {
-  display: block;
+  display: flex;
   -webkit-box-flex: 1;
           flex: 1 1 auto;
 }
@@ -287,6 +287,11 @@ $theme-color: #3f51b5;
         height: 1px;
         background: rgba(0, 0, 0, .12);
       }
+      &.owl-calendar-weeks {
+        &:after {
+          left: -1.8em;
+        }
+      }
     }
   }
 
@@ -374,6 +379,11 @@ $theme-color: #3f51b5;
       border-bottom-right-radius: 999px;
     }
   }
+  &.owl-calendar-weeks {
+    .owl-dt-calendar-cell-content {
+      height: 86%; // adjust for the additional space taked for calendar weeks
+    }
+  }
 }
 
 .owl-dt-timer {