From 265fe39048200d69f256e3d9897ce0484f5366ec Mon Sep 17 00:00:00 2001
From: Kasper Legarth <kasperlegarth@gmail.com>
Date: Mon, 29 Aug 2022 11:26:17 +0200
Subject: [PATCH 1/5] Added functionality to show weeknumbers

---
 src/App.vue                         |  3 +++
 src/DatePicker/HotelDatePicker.vue  |  5 ++++
 src/DatePicker/components/Month.vue | 16 ++++++++++-
 src/assets/scss/index.scss          | 42 ++++++++++++++++++++++++++++-
 src/helpers.js                      | 14 ++++++++++
 5 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a7dd10cf..b57dc036 100644
--- a/src/App.vue
+++ b/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()}`,
diff --git a/src/DatePicker/HotelDatePicker.vue b/src/DatePicker/HotelDatePicker.vue
index 3565244d..b00abcd4 100644
--- a/src/DatePicker/HotelDatePicker.vue
+++ b/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,
diff --git a/src/DatePicker/components/Month.vue b/src/DatePicker/components/Month.vue
index 6dedfbab..b8855523 100644
--- a/src/DatePicker/components/Month.vue
+++ b/src/DatePicker/components/Month.vue
@@ -1,9 +1,12 @@
 <template>
-  <div ref="datepickerMonth" class="vhd__datepicker__month" @mouseenter="enterMonth($event)">
+  <div ref="datepickerMonth" class="vhd__datepicker__month" :class="{ 'vhd__datepicker__month--with-week-numnbers': 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="(day, index) in weekNumbers" :key="index" v-html="getIsoWeek(day.date)"></div>
+    </div>
     <div
       class="vhd__square"
       v-for="(day, dayIndex) in month.days"
@@ -26,6 +29,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 +148,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showWeekNumbers: {
+      type: Boolean,
+      default: false,
+    },
     disabledDates: {
       type: Array,
       default: () => [],
@@ -165,8 +173,14 @@ 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)
+      });
+    }
   },
   methods: {
+    ...Helpers,
     getMonth(date) {
       const month = 'MMMM'
       const year = 'YYYY'
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index 4397ba3c..c7dc87e0 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -621,6 +621,46 @@ $extra-small-screen: '(max-width: 23em)';
         padding-left: 0.83334em;
       }
     }
+
+    &--with-week-numnbers {
+      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);
     }
   }
 }
diff --git a/src/helpers.js b/src/helpers.js
index 8f587ffd..6d1598e1 100644
--- a/src/helpers.js
+++ b/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

From 4505a79d6e14536baf8c48b0263a438b1c7a2607 Mon Sep 17 00:00:00 2001
From: Matias Perrone <github@matiasperrone.com>
Date: Thu, 29 Dec 2022 11:20:10 -0300
Subject: [PATCH 2/5] week numbers computed prop now returns the number

Signed-off-by: Matias Perrone <github@matiasperrone.com>
---
 src/DatePicker/components/Month.vue | 25 +++++++++++++++++++------
 src/helpers.js                      | 24 ++++++++++++------------
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/DatePicker/components/Month.vue b/src/DatePicker/components/Month.vue
index b8855523..5af10665 100644
--- a/src/DatePicker/components/Month.vue
+++ b/src/DatePicker/components/Month.vue
@@ -1,11 +1,22 @@
 <template>
-  <div ref="datepickerMonth" class="vhd__datepicker__month" :class="{ 'vhd__datepicker__month--with-week-numnbers': showWeekNumbers }" @mouseenter="enterMonth($event)">
+  <div
+    ref="datepickerMonth"
+    class="vhd__datepicker__month"
+    :class="{ 'vhd__datepicker__month--with-week-numnbers': 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="(day, index) in weekNumbers" :key="index" v-html="getIsoWeek(day.date)"></div>
+      <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"
@@ -174,10 +185,12 @@ export default {
       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)
-      });
-    }
+      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,
diff --git a/src/helpers.js b/src/helpers.js
index 6d1598e1..0d2365a4 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -236,18 +236,18 @@ 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);
+    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)
   },
 }
 

From 378dc9ca2e9fcc7626db12866da864adb017331a Mon Sep 17 00:00:00 2001
From: Matias Perrone <github@matiasperrone.com>
Date: Thu, 29 Dec 2022 12:02:21 -0300
Subject: [PATCH 3/5] Add `showWeekNumbers` to Readme file

Signed-off-by: Matias Perrone <github@matiasperrone.com>
---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bf115e98..56704a8c 100644
--- a/README.md
+++ b/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.

From 1521c648d9f3a1b398821d0df953051dcd430040 Mon Sep 17 00:00:00 2001
From: Matias Perrone <github@matiasperrone.com>
Date: Thu, 29 Dec 2022 12:02:30 -0300
Subject: [PATCH 4/5] increment version

Signed-off-by: Matias Perrone <github@matiasperrone.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dc95b4b3..e079ed03 100644
--- a/package.json
+++ b/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",

From 2ead66062d87044a6ad1a70fd6caa221cd8934ce Mon Sep 17 00:00:00 2001
From: Matias Perrone <github@matiasperrone.com>
Date: Thu, 29 Dec 2022 12:03:52 -0300
Subject: [PATCH 5/5] fix typo

Signed-off-by: Matias Perrone <github@matiasperrone.com>
---
 src/DatePicker/components/Month.vue | 2 +-
 src/assets/scss/index.scss          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/DatePicker/components/Month.vue b/src/DatePicker/components/Month.vue
index 5af10665..cbdc3161 100644
--- a/src/DatePicker/components/Month.vue
+++ b/src/DatePicker/components/Month.vue
@@ -2,7 +2,7 @@
   <div
     ref="datepickerMonth"
     class="vhd__datepicker__month"
-    :class="{ 'vhd__datepicker__month--with-week-numnbers': showWeekNumbers }"
+    :class="{ 'vhd__datepicker__month--with-week-numbers': showWeekNumbers }"
     @mouseenter="enterMonth($event)"
   >
     <p class="vhd__datepicker__month-name">
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index c7dc87e0..a2d2cce9 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -622,7 +622,7 @@ $extra-small-screen: '(max-width: 23em)';
       }
     }
 
-    &--with-week-numnbers {
+    &--with-week-numbers {
       position: relative;
 
       .#{$prefix}__weeknumbers {
@@ -643,7 +643,7 @@ $extra-small-screen: '(max-width: 23em)';
 
       &:first-child {
         padding-left: 2rem;
-        
+
         .#{$prefix}__weeknumbers {
           left: 0;
         }