WIP Подтянула даты из календаря в колонки

src/pages/newCalendar/components/CalendarColumn.vue

@@ -1,45 +0,0 @@
-<template lang="pug">
-  .calendar-column-wrapper.flex.flex-col
-    .header.flex.flex-col.items-center.justify-center.top-0
-      span.font-bold.text-base.color-black 24 мая
-      span.text-smm.color-grey Понедельник
-</template>
-
-<script>
-import { mapState } from "vuex";
-export default {
-  name: "CalendarColumn",
-  props: {},
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapState({
-      today: (state) => state.calendar.currentDate,
-    }),
-  },
-  methods: {},
-};
-</script>
-
-<style lang="sass" scoped>
-.calendar-column-wrapper
-  border-right: 1px solid var(--border-light-grey-color)
-  width: 380px
-
-.header
-  height: 60px
-  position: sticky
-  z-index: 5
-  background-color: var(--default-white)
-
-.body
-  position: relative
-  z-index: 3
-
-.color-black
-  color: var(--font-dark-blue-color)
-
-.color-grey
-  color: var(--font-grey-color)
-</style>

src/pages/newCalendar/components/CalendarColumns.vue

@@ -0,0 +1,58 @@
+<template lang="pug">
+  .calendar-column-wrapper.flex.flex-col(v-for="date in dateRange", :key="date")
+    .header.flex.flex-col.items-center.justify-center.top-0
+      span.font-bold.text-base.color-black {{ date?.format("D MMMM")}}
+      span.text-smm.color-grey {{ transformDayName(date?.format("dddd"))}}
+    .body.h-full
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "CalendarColumn",
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState({
+      selectedDates: (state) => state.calendar.selectedDates,
+    }),
+    dateRange() {
+      let diff = this.selectedDates?.to.diff(this.selectedDates?.from, "days");
+      let range = [];
+      for (let i = 0; i <= diff; i++) {
+        range.push(this.selectedDates?.from.clone().add(i, "day"));
+      }
+      return range;
+    },
+  },
+  methods: {
+    transformDayName(name) {
+      return name[0]?.toUpperCase() + name?.slice(1);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-column-wrapper
+  border-right: 1px solid var(--border-light-grey-color)
+  width: 380px
+
+.header
+  height: 60px
+  position: sticky
+  z-index: 5
+  background-color: var(--default-white)
+
+.body
+  position: relative
+  z-index: 3
+
+.color-black
+  color: var(--font-dark-blue-color)
+
+.color-grey
+  color: var(--font-grey-color)
+</style>

src/pages/newCalendar/components/CalendarHeader.vue

@@ -98,9 +98,6 @@ export default {
     ...mapState({
       selectedDates: (state) => state.calendar.selectedDates,
     }),
-    ...mapActions({
-      changeSelectedDates: "changeSelectedDates",
-    }),
   },
   methods: {
     previousWeek() {
@@ -111,27 +108,22 @@ export default {
       this.date.from = this.date.from.clone().add(1, "week");
       this.date.to = this.date.to.clone().add(1, "week");
     },
+    ...mapActions({
+      changeSelectedDates: "changeSelectedDates",
+    }),
   },
-  /*watch: {
-    selectedDates: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        console.log("в сторе", val);
-      },
-    },
+  watch: {
     date: {
-      immediate: true,
       deep: true,
       handler(val) {
-        console.log("в компоненте", val);
+        if (
+          !this.date?.from.isSame(this.selectedDates?.from) &&
+          !this.date?.to.isSame(this.selectedDates?.to)
+        )
+          this.changeSelectedDates(val);
       },
     },
-    calendarVisibility(val) {
-      console.log(val, this.changeSelectedDates);
-      if (val === false) this.changeSelectedDates(this.date);
   },
-  },*/
   mounted() {
     this.date = {
       from: this.selectedDates.from.clone(),

src/pages/newCalendar/components/CalendarWrapper.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  .schedule.flex-1.flex.flex-col(
+  .schedule.flex-1.flex.flex-col.relative(
     :style="{width: openSidebar ? 'calc(100vw - 320px)' : 'calc(100vw - 160px)'}"
   )
     calendar-header.w-full.mb-1
     .schedule-body.h-full.bg-white.w-full
       .column-wrapper.flex.ml-20(:style="{width: '3040px'}")
-        calendar-column
+        calendar-columns
       .flex.w-full.relative.margin
         .time-coil-wrapper.left-0.-mt-12
           calendar-clock-column(:time-coil="timeCoil")
@@ -17,7 +17,7 @@
 import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
 import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
 import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
-import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
+import CalendarColumns from "@/pages/newCalendar/components/CalendarColumns.vue";
 import { mapState } from "vuex";
 export default {
   name: "CalendarWrapper",
@@ -25,7 +25,7 @@ export default {
     CalendarHeader,
     CalendarBackground,
     CalendarClockColumn,
-    CalendarColumn,
+    CalendarColumns,
   },
   props: {
     openSidebar: Boolean,