[feature] Show week numbers

README.md

@@ -77,7 +77,8 @@ export default {
 |**priceDecimals**|`Number`|`0`|The price decimals for weekly periods (see `periodDates`).
 |**priceSymbol**|`String`|`''`|The price symbol added before the price when `showPrice` is true and a `price` has been set in one of the `periodDates` array items (period).
 |**showPrice**|`Boolean`|`false`|If set to true, displays a price contains on your `periodDates`.
-|**showSingleMonth**|`Boolean`|`false`|If set to true, display one month only
+|**showSingleMonth**|`Boolean`|`false`|If set to true, display one month only.
+|**showWeekNumbers**|`Boolean`|`false`|If set to true, displays the week numbers.
 |**showYear**|`Boolean`|`true`|Shows the year next to the month.
 |**singleDaySelection**|`Boolean`|`false`|When true only one day can be selected instead of a range.
 |**startDate**|`[Date, String]`|`new Date()`|The start view date. All the dates before this date will be disabled.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-hotel-datepicker",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "description": "A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out rules, localization support and more",
   "author": "krystalcampioni <hello@krystalcampioni.com>",
   "main": "dist/vueHotelDatepicker.common.js",

src/App.vue

@@ -64,6 +64,7 @@
             <input type="checkbox" v-model="singleDaySelection" /> singleDaySelection<br />
             <input type="checkbox" v-model="showYear" /> showYear<br />
             <input type="checkbox" v-model="yearBeforeMonth" /> yearBeforeMonth<br />
+            <input type="checkbox" v-model="showWeekNumbers" /> showWeekNumbers<br />
           </div>
           <div style="width: 48%; display: inline-block">
             <input type="checkbox" v-model="showStartingDateValue" /> startingDateValue:
@@ -90,6 +91,7 @@
             :showSingleMonth="showSingleMonth"
             :showYear="showYear"
             :showPrice="showPrice"
+            :showWeekNumbers="showWeekNumbers"
             :priceSymbol="priceSymbol"
             :yearBeforeMonth="yearBeforeMonth"
             :positionRight="positionRight"
@@ -403,6 +405,7 @@ export default {
       showLastDateAvailable: false,
       showPeriodDates: false,
       showStartingDate: false,
+      showWeekNumbers: false,
       startingDate: `${today.getFullYear()}-${month}-${today.getDate()}`,
       showEndingDate: false,
       endingDate: `${today.getFullYear()}-${month}-${today.getDate()}`,

src/DatePicker/HotelDatePicker.vue

@@ -135,6 +135,7 @@
             :screenSize="screenSize"
             :showCustomTooltip="showCustomTooltip"
             :showPrice="showPrice"
+            :showWeekNumbers="showWeekNumbers"
             :disabledDates="disabledDates"
             :periodDates="periodDates"
             :sortedDisabledDates="sortedDisabledDates"
@@ -335,6 +336,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    showWeekNumbers: {
+      type: Boolean,
+      default: false,
+    },
     singleDaySelection: {
       type: Boolean,
       default: false,

src/DatePicker/components/Month.vue

@@ -1,9 +1,23 @@
 <template>
-  <div ref="datepickerMonth" class="vhd__datepicker__month" @mouseenter="enterMonth($event)">
+  <div
+    ref="datepickerMonth"
+    class="vhd__datepicker__month"
+    :class="{ 'vhd__datepicker__month--with-week-numbers': showWeekNumbers }"
+    @mouseenter="enterMonth($event)"
+  >
     <p class="vhd__datepicker__month-name">
       {{ monthName }}
     </p>
     <week-row v-bind="$props" />
+    <div v-if="showWeekNumbers" class="vhd__datepicker__weeknumbers">
+      <div
+        class="vhd__datepicker__weeknumbers__number"
+        v-for="(weekNumber, indexWN) in weekNumbers"
+        :key="`vhd__datepicker__weeknumber__${weekNumber}-${indexWN}`"
+      >
+        {{ weekNumber }}
+      </div>
+    </div>
     <div
       class="vhd__square"
       v-for="(day, dayIndex) in month.days"
@@ -26,6 +40,7 @@
 import fecha from 'fecha'
 import Day from './Day.vue'
 import WeekRow from './WeekRow.vue'
+import Helpers from '../../helpers'
 
 export default {
   name: 'Month',
@@ -144,6 +159,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showWeekNumbers: {
+      type: Boolean,
+      default: false,
+    },
     disabledDates: {
       type: Array,
       default: () => [],
@@ -165,8 +184,16 @@ export default {
     monthName() {
       return this.getMonth(this.month.days[15].date)
     },
+    weekNumbers() {
+      return this.month.days
+        .filter((day, index) => {
+          return index % 7 === 0 && (day.belongsToThisMonth || this.month.days[index + 6].belongsToThisMonth)
+        })
+        .map((day) => this.getIsoWeek(day.date))
+    },
   },
   methods: {
+    ...Helpers,
     getMonth(date) {
       const month = 'MMMM'
       const year = 'YYYY'

src/assets/scss/index.scss

@@ -621,6 +621,46 @@ $extra-small-screen: '(max-width: 23em)';
         padding-left: 0.83334em;
       }
     }
+
+    &--with-week-numbers {
+      position: relative;
+
+      .#{$prefix}__weeknumbers {
+        position: absolute;
+        top: 4.5rem;
+        bottom: 0.875rem;
+        display: flex;
+        flex-direction: column;
+
+        &__number {
+          display: flex;
+          align-items: center;
+          width: 2rem;
+          height: calc(100% / 6);
+          margin: -0.5px 0 0;
+        }
+      }
+
+      &:first-child {
+        padding-left: 2rem;
+
+        .#{$prefix}__weeknumbers {
+          left: 0;
+        }
+      }
+
+      &:last-child {
+        padding-right: 2rem;
+
+        .#{$prefix}__weeknumbers {
+          right: 0;
+
+          &__number {
+            justify-content: flex-end;
+          }
+        }
+      }
+    }
   }
 
   &__month-caption {
@@ -845,7 +885,7 @@ $extra-small-screen: '(max-width: 23em)';
     }
 
     &.vhd__checkInCheckOut {
-      width: calc(50% - 1.1875);
+      width: calc(50% - 1.1875em);
     }
   }
 }

src/helpers.js

@@ -235,6 +235,20 @@ const helpers = {
 
     return null
   },
+  getIsoWeek(testDate) {
+    const date = new Date(testDate)
+
+    date.setHours(0, 0, 0, 0)
+
+    // Thursday in current week decides the year.
+    date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7))
+
+    // January 4 is always in week 1.
+    const week1 = new Date(date.getFullYear(), 0, 4)
+
+    // Adjust to Thursday in week 1 and count number of weeks from date to week1.
+    return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7)
+  },
 }
 
 export default helpers