WIP Расписание подтягивает данные по месяцам

src/pages/schedule/components/ScheduleBody.vue

@@ -75,12 +75,12 @@ export default {
     serialized: Array,
     dataSchedule: Object,
     buttons: Array,
+    startMonth: Object,
   },
   data() {
     return {
       days: "",
       result: [],
-      startMonth: moment("2022-12-01"),
       showSelect: false,
       employee: [],
       currentEmployee: {

src/pages/schedule/components/ScheduleHeader.vue

@@ -6,6 +6,7 @@
       .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
         .flex
           base-button.left-arrow.mr-4(
+            @click="previousHandler",
             left-icon="icon-down-arrow",
             rounded,
             secondary,
@@ -13,6 +14,7 @@
             :size="32"
           )
           base-button.right-arrow.mr-6(
+            @click="nextHandler",
             left-icon="icon-down-arrow",
             rounded,
             secondary,
@@ -20,21 +22,40 @@
             :size="32"
           )
           .text.flex.items-center
-        .flex.text-xl Жмых Олег Анатольевич
+            span.text.font-medium.text-base {{ dateString }}
+              span.today.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий  
+        //.flex.text-xl Жмых Олег Анатольевич
         base-button.font-semibold(:size="40", @click="openForm") Замена смен
 </template>
 
 <script>
+import * as moment from "moment";
 import BaseButton from "@/components/base/BaseButton.vue";
 import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
 export default {
   name: "ScheduleHeader",
   components: { BaseButton, FormChangeShift },
+  props: {
+    startMonth: Object,
+  },
   data() {
     return {
       showForm: false,
+      isCurrentMonth: true,
     };
   },
+  computed: {
+    dateString() {
+      return this.startMonth
+        .format("MMMM YYYY")
+        .split(" ")
+        .map((elem, index) => {
+          if (index === 0) return elem[0].toUpperCase() + elem.slice(1);
+          return elem;
+        })
+        .join(" ");
+    },
+  },
   methods: {
     openForm() {
       this.showForm = true;
@@ -42,6 +63,19 @@ export default {
     closeForm() {
       this.showForm = false;
     },
+    previousHandler() {
+      this.$emit("switch-previous-month");
+    },
+    nextHandler() {
+      this.$emit("switch-next-month");
+    },
+  },
+  watch: {
+    startMonth() {
+      this.isCurrentMonth =
+        this.startMonth.format("YYYY-MM-DD") ===
+        moment().date(1).format("YYYY-MM-DD");
+    },
   },
 };
 </script>