Possibility of change startWeek

src/components/Week.vue

@@ -3,7 +3,7 @@
     class="grid grid-cols-7 py-2 mt-0.5 border-b border-black/[.1] dark:border-litepie-secondary-700/[1]"
   >
     <div
-      v-for="(day, keyDay) in weeks"
+      v-for="(day, keyDay) in weekReorder(weeks, startWeek)"
       :key="keyDay"
       class="text-litepie-secondary-500 text-xs 2xl:text-sm tracking-wide font-medium text-center cursor-default dark:text-litepie-secondary-400"
     >
@@ -18,8 +18,17 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'LitepieWeek',
   props: {
-    weeks: Array
+    weeks: Array,
+    startWeek: {
+      type: Number,
+      default: 0,
+    },
+  },
+  inheritAttrs: false,
+  methods: {
+    weekReorder(weeks, startWeek) {
+      return weeks.slice(startWeek).concat(weeks.slice(0, startWeek));
+    },
   },
-  inheritAttrs: false
 });
 </script>

src/lib/fn.js

@@ -1,6 +1,7 @@
-export const usePreviousDate = date => {
+export const usePreviousDate = (date,startWeek) => {
   const display = [];
-  for (let i = 0; i <= date.date(0).day(); i++) {
+  let start= (7-startWeek >=0 && 7-startWeek<7) ? 7-startWeek : 0;
+  for (let i = 0; i <= date.date(start).day(); i++) {
     display.push(date.date(0).subtract(i, 'day'));
   }
   return display.sort((a, b) => a.date() - b.date());
@@ -15,11 +16,11 @@ export const useCurrentDate = date => {
   );
 };
 
-export const useNextDate = date => {
+export const useNextDate = (date,startWeek) => {
   const display = [];
   for (
     let i = 1;
-    i <= 42 - (usePreviousDate(date).length + date.daysInMonth());
+    i <= 42 - (usePreviousDate(date,startWeek).length + date.daysInMonth());
     i++
   ) {
     display.push(

src/litepie-datepicker.vue

@@ -125,7 +125,7 @@
                     <!--                Calendar-->
                     <div v-show="panel.previous.calendar">
                       <!--          Days of weeks-->
-                      <litepie-week :weeks="weeks" />
+                      <litepie-week :weeks="weeks" :startWeek="startWeek"/>
                       <!--          Date of months-->
                       <litepie-calendar
                         :calendar="calendar.previous"
@@ -165,7 +165,7 @@
                     <!--                Calendar-->
                     <div v-show="panel.next.calendar">
                       <!--          Days of weeks-->
-                      <litepie-week :weeks="weeks" />
+                      <litepie-week :weeks="weeks" :startWeek="startWeek"/>
                       <!--          Date of months-->
                       <litepie-calendar
                         as-prev-or-next
@@ -354,6 +354,10 @@ export default /*#__PURE__*/ defineComponent({
           cancel: 'Cancel'
         }
       })
+    },
+    startWeek: {
+      type: Number,
+      default: 0
     }
   },
   inheritAttrs: false,
@@ -401,9 +405,9 @@ export default /*#__PURE__*/ defineComponent({
       return {
         previous: {
           date: () => {
-            return usePreviousDate(previous)
+            return usePreviousDate(previous,props.startWeek)
               .concat(useCurrentDate(previous))
-              .concat(useNextDate(previous))
+              .concat(useNextDate(previous,props.startWeek))
               .map(v => {
                 v.today = v.isToday();
                 v.active = previous.month() === v.month();
@@ -527,9 +531,9 @@ export default /*#__PURE__*/ defineComponent({
         },
         next: {
           date: () => {
-            return usePreviousDate(next)
+            return usePreviousDate(next,props.startWeek)
               .concat(useCurrentDate(next))
-              .concat(useNextDate(next))
+              .concat(useNextDate(next,props.startWeek))
               .map(v => {
                 v.today = v.isToday();
                 v.active = next.month() === v.month();