WIP Набросала кастомный календарь

2023-05-29 17:38:37 +03:00
parent d6f17cead5
commit ca36328a89
5 changed files with 173 additions and 14 deletions
--- a/src/components/base/BaseCalendar.vue
+++ b/src/components/base/BaseCalendar.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+  .calendar-wrapper.bg-white
+    .header.px-6.pt-5.pb-18px.flex.items-center.justify-between
+      .text-smm.font-semibold {{ month }}
+      .arrows.flex.items-center.justify-center.gap-x-6
+        q-btn(
+          flat,
+          size="10px",
+          dense,
+          icon="arrow_back_ios_new",
+          text-color="black",
+          round,
+          @click="previousMonth"
+        )
+        q-btn(
+          flat,
+          icon="arrow_forward_ios",
+          size="10px",
+          text-color="black",
+          dense,
+          round,
+          @click="nextMonth"
+        )
+    .week.py-4.px-18px.grid.grid-rows-1.grid-cols-7.gap-x-1
+      .flex.items-center.justify-center.week-item.text-xsx.py-1.px-2(v-for="day of week", :key="day") {{ day }}
+    .body.pb-6.px-6.grid.grid-rows-6.grid-cols-7.gap-x-1.gap-y-2
+      .flex.items-center.justify-center.h-8.w-8.rounded-full(
+        v-for="date of dates",
+        :style="calculateCurrentMonth(date)",
+        :key="date",
+      ) {{ date.format("DD") }}
+</template>
+
+<script>
+import * as moment from "moment/moment";
+import { mapState } from "vuex";
+export default {
+  name: "BaseCalendar",
+  props: {
+    modelValue: Object,
+    range: Boolean,
+  },
+  data() {
+    return {
+      week: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
+      currentDate: moment(),
+    };
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+    ...mapState({
+      today: (state) => state.calendar.currentDate,
+    }),
+    month() {
+      let formattedMonth = this.currentDate.format("MMMM");
+      return `${
+        formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
+      } ${this.currentDate.format("YYYY")}`;
+    },
+    startDate() {
+      return this.currentDate
+        .clone()
+        .startOf("month")
+        .startOf("week")
+        .subtract(1, "day");
+    },
+    dates() {
+      return [...Array(42)].map(() => this.startDate.add(1, "day").clone());
+    },
+  },
+  methods: {
+    previousMonth() {
+      this.currentDate = this.currentDate.clone().subtract(1, "month");
+    },
+    nextMonth() {
+      this.currentDate = this.currentDate.clone().add(1, "month");
+    },
+    calculateCurrentMonth(date) {
+      if (
+        date.isSame(this.today, "day") ||
+        date.isSame(this.currentDate, "day")
+      )
+        return {
+          color: "var(--default-white)",
+          "background-color": "var(--btn-blue-color)",
+        };
+      if (date.isSame(this.currentDate, "month"))
+        return {
+          color: "var(--font-black-color)",
+        };
+      return {
+        color: "var(--font-grey-color)",
+      };
+    },
+  },
+  mounted() {
+    if (this.value) this.currentDate = this.value.clone();
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.calendar-wrapper
+  width: 286px
+.header
+  border-bottom: 1px solid var(--border-light-grey-color)
+.week-item
+  color: var(--font-grey-color)
+.week-item:nth-last-child(-n+2)
+  color: var(--border-red-color)
+</style>