feat(Calendar, DatePicker, DateRangePicker): show weeks numbers

Author: mrholek

js/src/calendar.js

@@ -60,8 +60,10 @@ const Default = {
   selectAdjacementDays: false,
   selectEndDate: false,
   showAdjacementDays: true,
+  showWeekNumber: false,
   startDate: null,
-  weekdayFormat: 2
+  weekdayFormat: 2,
+  weekNumbersLabel: null
 }
 
 const DefaultType = {
@@ -77,8 +79,10 @@ const DefaultType = {
   selectAdjacementDays: 'boolean',
   selectEndDate: 'boolean',
   showAdjacementDays: 'boolean',
+  showWeekNumber: 'boolean',
   startDate: '(date|string|null)',
-  weekdayFormat: '(number|string)'
+  weekdayFormat: '(number|string)',
+  weekNumbersLabel: '(string|null)'
 }
 
 /**
@@ -333,19 +337,26 @@ class Calendar extends BaseComponent {
     const monthDetails = getMonthDetails(year, month, this._config.firstDayOfWeek)
     const listOfMonths = createGroupsInArray(getMonthsNames(this._config.locale), 4)
     const listOfYears = createGroupsInArray(getYears(date.getFullYear()), 4)
-    const weekDays = monthDetails[0]
+    const weekDays = monthDetails[0].days
 
     const calendarTable = document.createElement('table')
     calendarTable.innerHTML = `
     ${this._view === 'days' ? `
       <thead>
         <tr>
+          ${this._config.showWeekNumber ?
+            `<th class="calendar-cell">
+              <div class="calendar-header-cell-inner">
+               ${this._config.weekNumbersLabel ?? ''}
+              </div>
+            </th>` : ''
+          }
           ${weekDays.map(({ date }) => (
             `<th class="calendar-cell">
               <div class="calendar-header-cell-inner">
               ${typeof this._config.weekdayFormat === 'string' ?
-              date.toLocaleDateString(this._config.locale, { weekday: this._config.weekdayFormat }) :
-              date
+                date.toLocaleDateString(this._config.locale, { weekday: this._config.weekdayFormat }) :
+                date
                   .toLocaleDateString(this._config.locale, { weekday: 'long' })
                   .slice(0, this._config.weekdayFormat)}
               </div>
@@ -355,7 +366,13 @@ class Calendar extends BaseComponent {
       </thead>` : ''}
       <tbody>
         ${this._view === 'days' ? monthDetails.map(week => (
-          `<tr>${week.map(({ date, month }) => (
+          `<tr class="calendar-row">
+            ${this._config.showWeekNumber ?
+              `<td class="calendar-cell week-number">
+                <div class="calendar-cell-inner">${week.weekNumber}</div>
+              </td>` : ''
+            }
+            ${week.days.map(({ date, month }) => (
             month === 'current' || this._config.showAdjacementDays ?
               `<td class="calendar-cell ${this._dayClassNames(date, month)}">
                 <div class="calendar-cell-inner day" data-coreui-date="${date}">

js/src/util/calendar.js

@@ -124,6 +124,11 @@ const getTrailingDays = (year, month, leadingDays, monthDays) => {
   return dates
 }
 
+export const getDayNumber = date =>
+  Math.ceil((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)
+
+export const getWeekNumber = date => Math.ceil(getDayNumber(date) / 7)
+
 export const getMonthDetails = (year, month, firstDayOfWeek) => {
   const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
   const daysThisMonth = getMonthDays(year, month)
@@ -132,10 +137,16 @@ export const getMonthDetails = (year, month, firstDayOfWeek) => {
   const weeks = []
   for (const [index, day] of days.entries()) {
     if (index % 7 === 0 || weeks.length === 0) {
-      weeks.push([])
+      weeks.push({
+        days: []
+      })
+    }
+
+    if ((index + 1) % 7 === 0) {
+      weeks[weeks.length - 1].weekNumber = Math.ceil(getDayNumber(day.date) / 7)
     }
 
-    weeks[weeks.length - 1].push(day)
+    weeks[weeks.length - 1].days.push(day)
   }
 
   return weeks

scss/_calendar.scss

@@ -27,6 +27,7 @@
   --#{$prefix}calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};
   --#{$prefix}calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};
   --#{$prefix}calendar-cell-today-color: #{$calendar-cell-today-color};
+  --#{$prefix}calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
   // scss-docs-end calendar-css-vars
 
   font-weight: initial;
@@ -120,13 +121,17 @@
   padding: 1px 0;
   text-align: center;
 
-  &:not(.disabled):not(.next):not(.previous):hover .calendar-cell-inner,
+  &:not(.disabled):not(.next):not(.previous):not(.week-number):hover .calendar-cell-inner,
   &.clickable:hover .calendar-cell-inner {
     color: var(--#{$prefix}calendar-cell-hover-color);
     cursor: pointer;
     background-color: var(--#{$prefix}calendar-cell-hover-bg);
   }
 
+  &.week-number {
+    color: var(--#{$prefix}calendar-cell-disabled-color);
+  }
+
   &.today .calendar-cell-inner {
     color: var(--#{$prefix}calendar-cell-today-color);
   }

scss/_variables.scss

@@ -2330,6 +2330,8 @@ $calendar-cell-range-hover-bg:               rgba(var(--#{$prefix}primary-rgb),
 $calendar-cell-range-hover-border-color:     var(--#{$prefix}primary) !default;
 
 $calendar-cell-today-color:                  var(--#{$prefix}$danger) !default;
+
+$calendar-cell-week-number-color:            var(--#{$prefix}tertiary-color) !default;
 // scss-docs-end calendar-variables
 
 // Date Picker