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

src/pages/newCalendar/TheCalendar.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
-  .w-full.flex.gap-x-2
-    calendar-open-sidebar.close(:class="{'active': isOpen}", :open-sidebar="openSidebar")
-    calendar-sidebar.-ml-2(v-if="!isOpen", :open-sidebar="openSidebar")
-    calendar-wrapper
+  .w-full.flex
+    calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar")
+    calendar-open-sidebar(v-else, :open-sidebar="openSidebar")
+    calendar-wrapper.ml-2(:open-sidebar="isOpen")
 </template>
 
 <script>

src/pages/newCalendar/components/CalendarBackground.vue

@@ -0,0 +1,39 @@
+<template lang="pug">
+  .w-full.flex.flex-col
+    .line-wrapper
+      .line.flex.items-center(
+        v-for="hour in timeCount",
+        :key="hour"
+      )
+        .middle-line
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "CalendarBackground",
+  computed: {
+    ...mapState({
+      workingHours: (state) => state.calendar.workingHours,
+    }),
+    timeCount() {
+      console.log(this.workingHours);
+      return (
+        this.workingHours.end.split(":")[0] -
+        this.workingHours.start.split(":")[0] +
+        1
+      );
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.line
+  border-top: 1px solid var(--border-light-grey-color)
+  height: 76px
+
+.middle-line
+  border-top: 1px dashed var(--border-light-grey-color)
+  width: 100%
+</style>

src/pages/newCalendar/components/CalendarClockColumn.vue

@@ -0,0 +1,63 @@
+<template lang="pug">
+  .calendar-clock-column.flex.flex-col.items-end.pb-5.px-3
+    span.text-base(
+      v-for="hour in timeCoil",
+      :key="hour",
+    ) {{ hour }}
+</template>
+
+<script>
+export default {
+  name: "CalendarClockColumn",
+  props: {
+    timeCoil: Array,
+    currentTime: String,
+    currentDate: Object,
+    dayEndTime: Number,
+    isCurrentDate: Boolean,
+  },
+  computed: {
+    currentHour() {
+      return this.convertTime(this.currentTime, 0, -6);
+    },
+    currentMinute() {
+      return this.convertTime(this.currentTime, 3, -3);
+    },
+    isEndDay() {
+      return this.dayEndTime === this.currentHour && this.currentMinute > 0;
+    },
+  },
+  methods: {
+    currentHourStyle(elem) {
+      if (
+        this.convertTime(elem, 0, 3) === this.currentHour &&
+        !this.isEndDay &&
+        this.isCurrentDate
+      ) {
+        return {
+          "current-time": true,
+          "font-bold": true,
+        };
+      }
+      return {
+        "current-time": false,
+        "font-medium": true,
+      };
+    },
+    convertTime(str, startIndex, endIndex) {
+      return parseInt(str?.slice(startIndex, endIndex), 10);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.current-time
+  color: var(--bg-event-red-color)
+.calendar-clock-column
+  gap: 57px
+  width: 80px
+  height: 100%
+  color: var(--font-dark-blue-color)
+  background-color: var(--default-white)
+</style>

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -211,6 +211,10 @@ export default {
 .q-expansion-item :deep(.q-item__label)
   line-height: 135% !important
 
+.q-expansion-item :deep(.q-item)
+  padding: 10px 16px !important
+  min-height: 54px
+
 .text
   color: var(--font-grey-color)
 

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>

src/store/modules/calendar.js

@@ -1,6 +1,10 @@
 import * as moment from "moment/moment";
 const state = () => ({
   currentDate: moment(),
+  workingHours: {
+    start: "8:00",
+    end: "18:00",
+  },
 });
 
 const getters = {};