Merge pull request #4 from MadeHQ/feature/81376

make month scroller buttons disabled/enabled and implement logic for …

README.md

@@ -9,7 +9,7 @@ You can pass the following props from the template:
 - `available-dates`: list of dates which are available to select (luxon DateTime format)
 - `display-in-column`: whether to show all the months in a column, or a single month with controls to change which month is shown
 - `linear-dates`: linear view for when showing a free flowing calendar
-- `week-starts-on-sunday`: force the day to start on sunday instead of default monday
+- `week-starts-on-sunday`: force the day to start on sunday instead of default monday. Accepts true/false
 - `on-select`: callback for when an available date is clicked
 - `allow-scrolling-outside-of-date-range`: defaults to false, set to true if you want to be able to scroll to months outside of available date range
 - `month-controls-classes`: array of classes that control the previous/next month buttons i.e. `['.month__control--prev', '.month__control--next']`. This is used in conjunction with `display-in-column: false` and `allow-scrolling-outside-of-date-range: false` and sets a `disabled` class on the appropriate previous/next button

calus.js

@@ -38,7 +38,8 @@ export default {
     },
     data: function () {
         return {
-            currentDisplayedMonth: DateTime.local().startOf("month")
+            currentDisplayedMonth: DateTime.local().startOf("month"),
+            weekStartOffset: this.weekStartsOnSunday ? -1 : 0,
         };
     },
     computed: {
@@ -224,18 +225,34 @@ export default {
             const next = this.monthControlsClasses[1];
 
             if (min) {
-                if (this.currentDisplayedMonth.month === min.month) {
-                    document.querySelector(prev).classList.add("disabled");
+                let prevEl = document.querySelector(prev);
+
+                if (prevEl) {
+                    if (this.currentDisplayedMonth.month === min.month) {
+                        prevEl.classList.add("disabled");
+                        prevEl.disabled = true;
+                    } else {
+                        prevEl.classList.remove("disabled");
+                        prevEl.disabled = false;
+                    }
                 } else {
-                    document.querySelector(prev).classList.remove("disabled");
+                    console.error(`${prev} not found. Have you passed the correct class?`);
                 }
             }
 
             if (max) {
-                if (this.currentDisplayedMonth.month === max.month) {
-                    document.querySelector(next).classList.add("disabled");
+                let nextEl = document.querySelector(next);
+
+                if (nextEl) {
+                    if (this.currentDisplayedMonth.month === max.month) {
+                        nextEl.classList.add("disabled");
+                        nextEl.disabled = true;
+                    } else {
+                        nextEl.classList.remove("disabled");
+                        nextEl.disabled = false;
+                    }
                 } else {
-                    document.querySelector(next).classList.remove("disabled");
+                    console.error(`${next} not found. Have you passed the correct class?`);
                 }
             }
         },