WIP Сделала разлиновку

src/pages/newCalendar/components/CalendarWrapper.vue

@@ -1,16 +1,84 @@
 <template lang="pug">
-  calendar-header.flex-1   
+  .schedule.flex-1.flex.gap-y-1.flex-col(
+    :style="{width: openSidebar ? 'calc(100vw - 320px)' : 'calc(100vw - 160px)'}"
+  )
+    calendar-header.w-full
+    .schedule-body.rounded.h-full.bg-white.w-full
+      .w-full(:style="{height: '60px'}")
+      .flex.w-full.relative
+        .time-coil-wrapper.left-0.-mt-12
+          calendar-clock-column(:time-coil="timeCoil")
+        calendar-background
+    // q-scroll-area.rounded(
+      :horizontal-thumb-style="thumbStyle",
+      :horizontal-bar-style="barStyle",
+      visible
+      style="height: 100%; max-width: 100%"
+    //)
+      .flex.bg-red-700.background(:style="{width: '3040px', height: '400px'}")
+      .bar-conteiner.w-full.rounded.bg-white.h-8.absolute.bottom-0
 </template>
 
 <script>
 import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
+import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
+import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
+import { mapState } from "vuex";
 export default {
   name: "CalendarWrapper",
-  components: { CalendarHeader },
+  components: { CalendarHeader, CalendarBackground, CalendarClockColumn },
+  props: {
+    openSidebar: Boolean,
+  },
   data() {
     return {};
   },
+  computed: {
+    ...mapState({
+      workingHours: (state) => state.calendar.workingHours,
+    }),
+    validateStartTime() {
+      return this.verifyTime(this.workingHours.start);
+    },
+    validateEndTime() {
+      return this.verifyTime(this.workingHours.end);
+    },
+    timeCoil() {
+      let time = [];
+      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
+        time.push(`${i}:00`);
+      }
+      return time;
+    },
+  },
+  methods: {
+    verifyTime(dayTime) {
+      let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
+      let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
+      return newTime;
+    },
+  },
 };
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="sass" scoped>
+.schedule-body
+  width: 100%
+  //overflow-y: auto
+  overflow-x: auto
+  //&::-webkit-scrollbar-track:horizontal
+  //  margin: 0 24px 0 104px
+  //&::-webkit-scrollbar-track:vertical
+  //  margin: 48px 0 24px 0
+.q-scrollarea :deep(.q-scrollarea__bar), .q-scrollarea :deep(.q-scrollarea__thumb)
+  opacity: 1
+
+.background
+  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)
+
+.time-coil-wrapper
+  position: sticky
+  z-index: 5
+  background-color: var(--default-white)
+  padding-top: 38px
+</style>