[WIP] Разбил расписание на компоненты, исправил логику работы

src/pages/schedule/components/ScheduleTableHeader.vue

@@ -0,0 +1,60 @@
+<template lang="pug">
+  .table-header.flex.w-full.pr-2
+    .flex.items-center.justify-center.pl-11(
+      :style="{width: 'calc(25% + 43px)'}"
+    )
+      .text.font-bold(
+        :style="{color: 'var(--btn-blue-color)'}"
+      ) Сотрудник
+    .column-wrapper.flex
+      .flex.flex-col.items-center.justify-center.w-11(
+        v-for="day in result",
+        :class="{'column-color': changelColumnColor(day)}",
+        :style="{width: `calc(100% / ${result.length})`}"
+      )
+        .text.flex.font-bold(
+          :style="{opacity: changeOpacity(day)}"
+        ) {{day.format("D")}}
+        .text.flex.font-bold(
+          :style="{opacity: changeOpacity(day)}"
+        ) {{day.format("ddd")}}
+</template>
+
+<script>
+export default {
+  name: "ScheduleTableHeader",
+  props: { result: Array },
+  methods: {
+    changelColumnColor(day) {
+      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
+        ? true
+        : false;
+    },
+    changeOpacity(day) {
+      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
+        ? "0.6"
+        : "1";
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.table-header
+  height: 50px
+  background-color: #D7D9FF
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  border-top-left-radius: 2px
+  border-top-right-radius: 2px
+
+.column-wrapper
+  overflow: auto
+  overflow-x: hidden
+  width: calc(75% - 44px)
+
+.column-color
+  background-color: var(--bg-white-color-1)
+
+.text
+  color: var(--btn-blue-color)
+</style>