WIP Настроила размер расписания под сайдбар

src/assets/sass/variables.sass

@@ -18,7 +18,6 @@
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
   --default-white: #fff
   --btn-red-color: #ff6f6f
-  --time-indicator-color: #e93131
   --font-obligatory-color: #ff0000
   --bg-event-box-color: rgba(37, 40, 80, 0.1)
   --bg-event-green-color: #24d07d

src/pages/calendar/TheCalendar.vue

@@ -5,6 +5,7 @@
       :current-date="currentDate"
       :time-information="timeInformation"
       :events-data="eventsData"
+      :sidebar-width="sidebarWidth"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
@@ -21,7 +22,7 @@ export default {
   components: { CalendarSchedule, CalendarSidebar },
   data() {
     return {
-      currentWidth: "152px",
+      sidebarWidth: "72px",
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
@@ -56,7 +57,7 @@ export default {
         .then((res) => this.saveEventsData(res));
     },
     changeWidth(value) {
-      this.currentWidth = value;
+      this.sidebarWidth = value;
     },
   },
   mounted() {
@@ -64,3 +65,8 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.calendar-container
+  width: calc(100vw - 80px)
+</style>

src/pages/calendar/components/CalendarSchedule.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .schedule.ml-2.w-full
+  .schedule.ml-2.w-full(:style="scheduleWidth")
     calendar-header(
       :current-date="currentDate"
       :is-current-date="isCurrentDate"
@@ -60,6 +60,7 @@ export default {
         return [];
       },
     },
+    sidebarWidth: String,
   },
   data() {
     return {
@@ -101,12 +102,17 @@ export default {
     pixelsPerMinute() {
       return this.pixelsPerHour / 60;
     },
-    scheduleSize() {
+    scheduleHeight() {
       return (
         (this.validateEndTime - this.validateStartTime) * this.pixelsPerHour +
         this.columnHeaderHeight
       );
     },
+    scheduleWidth() {
+      return {
+        "--sidebar-width": this.sidebarWidth,
+      };
+    },
   },
   methods: {
     previousDate() {
@@ -172,7 +178,7 @@ export default {
         (newTime[0] - this.validateStartTime) * this.pixelsPerHour +
         newTime[1] * this.pixelsPerMinute +
         this.columnHeaderHeight;
-      if (result > this.scheduleSize || result < 0) {
+      if (result > this.scheduleHeight || result < 0) {
         this.isShownIndicator = false;
         return 0;
       }
@@ -219,17 +225,17 @@ export default {
 <style lang="sass" scoped>
 .schedule
   background-color: var(--default-white)
-  width: calc(100% - 80px)
+  width: calc(100% - (var(--sidebar-width) + 8px))
 
 .time-line-indicator
   width: calc(100% - 80px)
-  border-top: 1px solid var(--time-indicator-color)
+  border-top: 1px solid var(--bg-event-red-color)
   position: absolute
 
 .time-circle-indicator
   width: 12px
   height: 12px
-  background-color: var(--time-indicator-color)
+  background-color: var(--bg-event-red-color)
   border-radius: 50%
   position: absolute