WIP Сделала CalendarHeader, подключила moment js

package-lock.json

@@ -8,6 +8,7 @@
       "name": "urban-couscous",
       "version": "0.1.0",
       "dependencies": {
+        "moment": "^2.29.4",
         "vue": "^3.2.13",
         "vue-router": "^4.1.5",
         "vuex": "^4.0.2"
@@ -9154,6 +9155,14 @@
       "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==",
       "dev": true
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -20965,6 +20974,11 @@
       "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==",
       "dev": true
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "moment": "^2.29.4",
     "vue": "^3.2.13",
     "vue-router": "^4.1.5",
     "vuex": "^4.0.2"

src/assets/css/iconfonts.css

@@ -13,7 +13,6 @@
 [class^="icon-"]::before, [class*=" icon-"]::before {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
-  speak: never;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;

src/main.js

@@ -1,9 +1,10 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
+import moment from "moment";
 import "./assets/sass/fonts.sass";
 import "./assets/sass/tailwind.sass";
 import "./assets/sass/variables.sass";
 import "./assets/css/iconfonts.css";
 
-createApp(App).use(router).mount("#app");
+createApp(App).use(router, moment).mount("#app");

src/pages/calendar/TheCalendar.vue

@@ -1,10 +1,29 @@
 <template lang="pug">
-  calendar-header
+  calendar-header(
+    :currentDay="currentDate"
+    @previous-date="switchPreviousDate"
+    @next-date="switchNextDate")
 </template>
+
 <script>
+import * as moment from "moment/moment";
 import CalendarHeader from "./components/CalendarHeader.vue";
+moment.locale("ru");
 export default {
   name: "TheCalendar",
   components: { CalendarHeader },
+  data() {
+    return {
+      currentDate: moment(),
+    };
+  },
+  methods: {
+    switchPreviousDate() {
+      this.currentDate = this.currentDate.clone().subtract(1, "day");
+    },
+    switchNextDate() {
+      this.currentDate = this.currentDate.clone().add(1, "day");
+    },
+  },
 };
 </script>

src/pages/calendar/components/CalendarHeader.vue

@@ -1,30 +1,58 @@
 <template lang="pug">
   .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
     .flex
-      base-arrow-button.left-arrow.mr-4
+      base-arrow-button.left-arrow.mr-4(@click="previousHandler")
-      base-arrow-button.right-arrow.mr-6
+      base-arrow-button.right-arrow.mr-6(@click="nextHandler")
       .text.flex.items-center
-        span.font-medium.text-base 24 Мая 2022 
+        span.font-medium.text-base {{ dateString }}
-          span.today.font-bold.text-xxs(v-if="isToday") Сегодня
+          span.today.font-bold.text-xxs(v-if="isToday")  Сегодня
     calendar-layout-switch(@selected="changeSelectedLayout")
 </template>
 
 <script>
+import * as moment from "moment/moment";
 import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
 import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
 export default {
   name: "CalendarHeader",
   components: { BaseArrowButton, CalendarLayoutSwitch },
+  props: {
+    currentDay: Object,
+  },
   data() {
     return {
       isToday: true,
       selectedLayout: "",
     };
   },
+  computed: {
+    dateString() {
+      let newStr = this.currentDay.format("D MMMM YYYY");
+      return newStr
+        .split(" ")
+        .map((elem, index) => {
+          if (index === 1) return elem[0].toUpperCase() + elem.slice(1);
+          return elem;
+        })
+        .join(" ");
+    },
+  },
   methods: {
     changeSelectedLayout(option) {
       this.selectedLayout = option;
     },
+    previousHandler() {
+      this.$emit("previous-date");
+    },
+    nextHandler() {
+      this.$emit("next-date");
+    },
+  },
+  watch: {
+    currentDay: function () {
+      this.isToday =
+        this.currentDay.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+    },
   },
 };
 </script>