bfg-common 1.2.20 → 1.2.21

package/components/atoms/datepicker/Datepicker.vue

@@ -1,612 +1,612 @@
-<template>
-  <div class="container-datepicker">
-    <atoms-the-icon
-      name="calendar"
-      :class="[`btn-show-calendar  calendar-id-${uniqueId}`]"
-      @click.stop="showHideCalendar"
-    />
-    <div
-      v-show="isShowCalendar"
-      class="the-datepicer"
-      :style="[{ top: calendarTop + 'px' }, { left: calendarLeft + 'px' }]"
-      @click.stop
-    >
-      <div v-show="showAllMonths" class="content-month">
-        <div class="all-months">
-          <div
-            v-for="(item, key) in allMonths"
-            :key="key"
-            :class="['calendar-btn', item.class]"
-            @click="selectMonth(key)"
-          >
-            {{ item.text }}
-          </div>
-        </div>
-      </div>
-      <div v-show="showAllYears" class="content-years">
-        <div class="content-buttons-arrow">
-          <button
-            :id="`${props.testId}-prev-button`"
-            class="calendar-btn"
-            title="Previous decade"
-            @click="prevYear"
-          >
-            <atoms-the-icon
-              name="arrow"
-              fill="#0095d3"
-              class="arrow-btn prev"
-            />
-          </button>
-          <button
-            :id="`${props.testId}-current-year-button`"
-            class="calendar-btn set-current-data"
-            title="Current decade"
-            @click="setCurrentYear"
-          >
-            <atoms-the-icon name="calendar-current-date" class="current-btn" />
-          </button>
-          <button
-            :id="`${props.testId}-next-button`"
-            class="calendar-btn"
-            title="Next decade"
-            @click="nextYear"
-          >
-            <atoms-the-icon
-              name="arrow"
-              fill="#0095d3"
-              class="arrow-btn next"
-            />
-          </button>
-        </div>
-        <div class="all-years">
-          <div
-            v-for="(item, key) in allYears"
-            :key="key"
-            :class="['calendar-btn', item.class]"
-            @click="selectYear(item.text)"
-          >
-            {{ item.text }}
-          </div>
-        </div>
-      </div>
-      <div v-if="!showAllMonths && !showAllYears" class="main-content">
-        <div class="the-month">
-          <div class="date top-menu">
-            <button
-              :id="`${props.testId}-current-month-button`"
-              class="calendar-btn show-all-months"
-              title="Select Month"
-              @click="showAllMonths = true"
-            >
-              {{ currentMonth }}
-            </button>
-            <button
-              :id="`${props.testId}-current-year-button`"
-              class="calendar-btn current-year"
-              title="Select Year"
-              @click="showAllYears = true"
-            >
-              {{ currentYear }}
-            </button>
-          </div>
-          <div class="content-buttons-arrow">
-            <button
-              :id="`${props.testId}-prev-month-button`"
-              class="calendar-btn"
-              title="Previous Month"
-              @click="prevMonth"
-            >
-              <atoms-the-icon
-                name="arrow"
-                fill="#0095d3"
-                class="arrow-btn prev"
-              />
-            </button>
-            <button
-              :id="`${props.testId}-current-date-button`"
-              class="calendar-btn set-current-data"
-              title="Current Month"
-              @click="setCurrentDate"
-            >
-              <atoms-the-icon
-                name="calendar-current-date"
-                class="current-btn"
-              />
-            </button>
-            <button
-              :id="`${props.testId}-next-month-icon`"
-              class="calendar-btn"
-              title="Next Month"
-              @click="nextMonth"
-            >
-              <atoms-the-icon
-                name="arrow"
-                fill="#0095d3"
-                class="arrow-btn next"
-              />
-            </button>
-          </div>
-        </div>
-        <div class="bottom-panel">
-          <div class="weekdays">
-            <div v-for="(item, key) in weekdays" :key="key">{{ item }}</div>
-          </div>
-          <div class="days">
-            <div
-              v-for="(item, key) in days"
-              :key="key"
-              :class="['item-day', item.class]"
-              @click="selectDay(item.text, item.class)"
-            >
-              {{ item.text }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_Items } from '~/components/atoms/datepicker/models/interfaces'
-import {
-  getMonthsFunc,
-  getWeekdaysFunc,
-} from '~/components/atoms/datepicker/config/datapicker'
-import { getShortMonths } from '~/components/atoms/datepicker/config/allShortMonths'
-
-const { $isDate } = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    modelValue: number
-    lang: string
-  }>(),
-  { testId: 'ui-datepicker' }
-)
-const emits = defineEmits<{
-  (event: 'update:model-value', num: number): void
-  (event: 'update', num: number): void
-}>()
-
-const interfaceLang = computed<string>(() => props.lang)
-
-let isEnabledEmit = false
-const checkingDate = computed<Date>({
-  get() {
-    return new Date(props.modelValue)
-  },
-  set(newValue) {
-    if (isEnabledEmit) {
-      const newDate = new Date(newValue).getTime()
-      emits('update:model-value', newDate)
-      emits('update', newDate)
-      isEnabledEmit = false
-      if ($isDate(newValue.toString())) {
-        renderCalendar()
-      }
-    }
-  },
-})
-
-const currentYear = ref<number>()
-const currentMonth = ref<string>()
-const showAllYears = ref<boolean>(false)
-const showAllMonths = ref<boolean>(false)
-const selectedMonth = ref<number>(new Date().getMonth())
-
-const days = ref<UI_I_Items[]>([])
-const months = computed<string[]>(() => getMonthsFunc(localization.value))
-const weekdays = computed<string[]>(() => {
-  const language = interfaceLang.value
-  return getWeekdaysFunc(localization.value, language)
-})
-
-const renderCalendar = () => {
-  checkingDate.value.setDate(1)
-  days.value = []
-
-  const lastDay = new Date(
-    checkingDate.value.getFullYear(),
-    checkingDate.value.getMonth() + 1,
-    0
-  ).getDate()
-
-  const prevLastDay = new Date(
-    checkingDate.value.getFullYear(),
-    checkingDate.value.getMonth(),
-    0
-  ).getDate()
-
-  const firstDayIndex = checkingDate.value.getDay()
-  const language = interfaceLang.value
-  const firstDayIndexByLanguage =
-    language === 'en_US' ? firstDayIndex : firstDayIndex - 1
-
-  const shortMonths = getShortMonths(language)
-
-  currentMonth.value = shortMonths[checkingDate.value.getMonth()]
-
-  currentYear.value = checkingDate.value.getFullYear()
-
-  for (let x = firstDayIndexByLanguage; x > 0; x--) {
-    const result = prevLastDay - x + 1
-    days.value.push({
-      text: result,
-      class: 'prev-date',
-    })
-  }
-  const indexCurrentMonth = shortMonths.findIndex(
-    (x) => x === currentMonth.value
-  )
-
-  for (let i = 1; i <= lastDay; i++) {
-    if (
-      i === new Date(props.modelValue).getDate() &&
-      new Date(props.modelValue).getMonth() === indexCurrentMonth &&
-      new Date(props.modelValue).getFullYear() === currentYear.value
-    ) {
-      days.value.push({
-        text: i,
-        class: 'active',
-      })
-    } else if (
-      i === new Date().getDate() &&
-      indexCurrentMonth === new Date().getMonth() &&
-      currentYear.value === new Date().getFullYear()
-    ) {
-      days.value.push({
-        text: i,
-        class: 'today',
-      })
-    } else {
-      days.value.push({ text: i, class: '' })
-    }
-  }
-
-  const x = 42 - days.value.length
-  for (let j = 1; j <= x; j++) {
-    days.value.push({
-      text: j,
-      class: 'next-date',
-    })
-  }
-}
-
-const allMonths = computed<UI_I_Items[]>(() => {
-  const result = []
-  for (let i = 0; i < months.value.length; i++) {
-    const active = i + 1 === selectedMonth.value + 1 ? 'active' : ''
-    result.push({
-      text: months.value[i],
-      class: active,
-    })
-  }
-  return result
-})
-
-const firstYear = ref<number>(
-  Number(checkingDate.value.getFullYear().toString().slice(0, 3) + 0)
-)
-const allYears = computed<UI_I_Items[]>(() => {
-  const result = []
-  for (let i = firstYear.value; i < firstYear.value + 10; i++) {
-    const active = i === currentYear.value ? 'active' : ''
-    result.push({
-      text: i,
-      class: active,
-    })
-  }
-  return result
-})
-const prevYear = (): void => {
-  firstYear.value = firstYear.value - 10
-}
-const nextYear = (): void => {
-  firstYear.value = firstYear.value + 10
-}
-const setCurrentYear = (): void => {
-  firstYear.value = Number(
-    checkingDate.value.getFullYear().toString().slice(0, 3) + 0
-  )
-}
-const selectYear = (value: number): void => {
-  checkingDate.value = new Date(checkingDate.value.setFullYear(value))
-  renderCalendar()
-  showAllYears.value = false
-}
-
-const prevMonth = (): void => {
-  checkingDate.value.setMonth(checkingDate.value.getMonth() - 1)
-
-  renderCalendar()
-}
-const nextMonth = (): void => {
-  checkingDate.value.setMonth(checkingDate.value.getMonth() + 1)
-
-  renderCalendar()
-}
-const setCurrentDate = (): void => {
-  isEnabledEmit = true
-  checkingDate.value = new Date()
-
-  setTimeout(() => {
-    renderCalendar()
-  }, 0)
-}
-
-const selectMonth = (value: number): void => {
-  checkingDate.value = new Date(checkingDate.value.setMonth(value))
-  selectedMonth.value = value
-  showAllMonths.value = false
-
-  renderCalendar()
-}
-const selectDay = (value: number | string, type: string): void => {
-  isEnabledEmit = true
-  if (type === 'prev-date') {
-    checkingDate.value = new Date(
-      checkingDate.value.setMonth(checkingDate.value.getMonth() - 1)
-    )
-  } else if (type === 'next-date') {
-    checkingDate.value = new Date(
-      checkingDate.value.setMonth(checkingDate.value.getMonth() + 1)
-    )
-  }
-  checkingDate.value = new Date(checkingDate.value.setDate(+value))
-
-  isShowCalendar.value = false
-}
-
-const isShowCalendar = ref<boolean>(false)
-
-const uniqueId = ref<number>(0)
-const calendarTop = ref<number>()
-const calendarLeft = ref<number>()
-const showHideCalendar = (): void => {
-  const allDatePickers = document.querySelectorAll('.the-datepicer')
-  allDatePickers.forEach((element: any) => (element.style.display = 'none'))
-  const element = document.querySelector(
-    `.calendar-id-${uniqueId.value}`
-  ) as HTMLElement
-
-  calendarTop.value = element.getBoundingClientRect().y - 314 + 2
-  calendarLeft.value = element.getBoundingClientRect().x - 278 / 2
-
-  isShowCalendar.value = !isShowCalendar.value
-}
-
-const windowClick = (): void => {
-  isShowCalendar.value = false
-}
-
-const bodyScroll = (): void => {
-  isShowCalendar.value = false
-}
-
-onMounted(() => {
-  renderCalendar()
-  window.addEventListener('click', windowClick)
-  uniqueId.value = useUniqueId()
-})
-onUnmounted(() => {
-  window.removeEventListener('scroll', windowClick)
-})
-
-watch(isShowCalendar, (value) => {
-  if (value) {
-    checkingDate.value.setMonth(new Date(props.modelValue).getMonth())
-    checkingDate.value.setFullYear(new Date(props.modelValue).getFullYear())
-    renderCalendar()
-    window.addEventListener('scroll', bodyScroll, true)
-  } else window.removeEventListener('scroll', bodyScroll, true)
-})
-</script>
-
-<style scoped lang="scss">
-.item-day {
-  font-size: 13px;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: background-color 0.2s;
-  cursor: pointer;
-  border-radius: 0.15rem;
-}
-.container-datepicker {
-  background: unset;
-
-  .the-datepicer {
-    width: 278px;
-    height: 314px;
-    border: 1px solid var(--vertical-nav-hover-bg-color);
-    border-radius: 0.15rem;
-    box-shadow: 0 1px 2.4px hsl(0deg 0% 45% / 25%);
-    padding: 12px;
-    position: fixed;
-    z-index: 1050;
-    background-color: var(--modal-other-bg-color);
-
-    .content-month {
-      .all-months {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-
-        .calendar-btn {
-          width: 100%;
-          height: 48px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: var(--checkbox-label-color);
-        }
-        .active {
-          background: var(--vertical-nav-hover-bg-color);
-          color: var(--form-input-color);
-        }
-      }
-    }
-    .content-years {
-      .content-buttons-arrow {
-        max-width: 108px;
-        margin: 0 auto;
-      }
-      .all-years {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-
-        .calendar-btn {
-          width: 100%;
-          height: 48px;
-          color: var(--checkbox-label-color);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        .active {
-          background: var(--vertical-nav-hover-bg-color);
-          color: var(--form-input-color);
-        }
-      }
-    }
-    .main-content {
-      .the-month {
-        height: 36px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        text-align: center;
-
-        i {
-          font-size: 29px;
-          cursor: pointer;
-        }
-        h1 {
-          font-size: 3rem;
-          font-weight: 400;
-          text-transform: uppercase;
-          letter-spacing: 0.2rem;
-          margin-bottom: 1rem;
-        }
-        p {
-          font-size: 1.6rem;
-        }
-
-        .top-menu {
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      .bottom-panel {
-        .weekdays {
-          display: flex;
-          align-items: center;
-
-          div {
-            font-size: 12px;
-            font-weight: bold;
-            letter-spacing: 0.1rem;
-            width: 36px;
-            height: 36px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: var(--checkbox-label-color);
-          }
-        }
-        .days {
-          width: 100%;
-          display: flex;
-          flex-wrap: wrap;
-
-          .item-day {
-            font-size: 13px;
-            width: 36px;
-            height: 36px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            transition: background-color 0.2s;
-            cursor: pointer;
-            border-radius: 0.15rem;
-            color: var(--checkbox-label-color);
-
-            &:not(.prev-date):not(.today):hover {
-              background: #eee;
-            }
-            &.active {
-              background: #d9e4ea;
-              color: #000;
-              font-weight: bold;
-            }
-            &.today {
-              color: var(--blue-950);
-              font-weight: bold;
-            }
-            &.prev-date,
-            &.next-date {
-              opacity: 0.5;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .calendar-btn {
-    width: 48px;
-    height: 36px;
-    color: #0095d3;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    background: unset;
-    border: none;
-    cursor: pointer;
-    font-size: 18px;
-    border-radius: 3px;
-
-    &:hover {
-      background: #eee;
-    }
-  }
-
-  .content-buttons-arrow {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .icons {
-      color: #0095d3;
-    }
-
-    .calendar-btn {
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .arrow-btn {
-    width: 18px;
-    height: 18px;
-
-    &.prev {
-      transform: rotate(-90deg);
-    }
-    &.next {
-      transform: rotate(90deg);
-    }
-  }
-}
-</style>
+<template>
+  <div class="container-datepicker">
+    <atoms-the-icon
+      name="calendar"
+      :class="[`btn-show-calendar  calendar-id-${uniqueId}`]"
+      @click.stop="showHideCalendar"
+    />
+    <div
+      v-show="isShowCalendar"
+      class="the-datepicer"
+      :style="[{ top: calendarTop + 'px' }, { left: calendarLeft + 'px' }]"
+      @click.stop
+    >
+      <div v-show="showAllMonths" class="content-month">
+        <div class="all-months">
+          <div
+            v-for="(item, key) in allMonths"
+            :key="key"
+            :class="['calendar-btn', item.class]"
+            @click="selectMonth(key)"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+      </div>
+      <div v-show="showAllYears" class="content-years">
+        <div class="content-buttons-arrow">
+          <button
+            :id="`${props.testId}-prev-button`"
+            class="calendar-btn"
+            title="Previous decade"
+            @click="prevYear"
+          >
+            <atoms-the-icon
+              name="arrow"
+              fill="#0095d3"
+              class="arrow-btn prev"
+            />
+          </button>
+          <button
+            :id="`${props.testId}-current-year-button`"
+            class="calendar-btn set-current-data"
+            title="Current decade"
+            @click="setCurrentYear"
+          >
+            <atoms-the-icon name="calendar-current-date" class="current-btn" />
+          </button>
+          <button
+            :id="`${props.testId}-next-button`"
+            class="calendar-btn"
+            title="Next decade"
+            @click="nextYear"
+          >
+            <atoms-the-icon
+              name="arrow"
+              fill="#0095d3"
+              class="arrow-btn next"
+            />
+          </button>
+        </div>
+        <div class="all-years">
+          <div
+            v-for="(item, key) in allYears"
+            :key="key"
+            :class="['calendar-btn', item.class]"
+            @click="selectYear(item.text)"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+      </div>
+      <div v-if="!showAllMonths && !showAllYears" class="main-content">
+        <div class="the-month">
+          <div class="date top-menu">
+            <button
+              :id="`${props.testId}-current-month-button`"
+              class="calendar-btn show-all-months"
+              title="Select Month"
+              @click="showAllMonths = true"
+            >
+              {{ currentMonth }}
+            </button>
+            <button
+              :id="`${props.testId}-current-year-button`"
+              class="calendar-btn current-year"
+              title="Select Year"
+              @click="showAllYears = true"
+            >
+              {{ currentYear }}
+            </button>
+          </div>
+          <div class="content-buttons-arrow">
+            <button
+              :id="`${props.testId}-prev-month-button`"
+              class="calendar-btn"
+              title="Previous Month"
+              @click="prevMonth"
+            >
+              <atoms-the-icon
+                name="arrow"
+                fill="#0095d3"
+                class="arrow-btn prev"
+              />
+            </button>
+            <button
+              :id="`${props.testId}-current-date-button`"
+              class="calendar-btn set-current-data"
+              title="Current Month"
+              @click="setCurrentDate"
+            >
+              <atoms-the-icon
+                name="calendar-current-date"
+                class="current-btn"
+              />
+            </button>
+            <button
+              :id="`${props.testId}-next-month-icon`"
+              class="calendar-btn"
+              title="Next Month"
+              @click="nextMonth"
+            >
+              <atoms-the-icon
+                name="arrow"
+                fill="#0095d3"
+                class="arrow-btn next"
+              />
+            </button>
+          </div>
+        </div>
+        <div class="bottom-panel">
+          <div class="weekdays">
+            <div v-for="(item, key) in weekdays" :key="key">{{ item }}</div>
+          </div>
+          <div class="days">
+            <div
+              v-for="(item, key) in days"
+              :key="key"
+              :class="['item-day', item.class]"
+              @click="selectDay(item.text, item.class)"
+            >
+              {{ item.text }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_Items } from '~/components/atoms/datepicker/models/interfaces'
+import {
+  getMonthsFunc,
+  getWeekdaysFunc,
+} from '~/components/atoms/datepicker/config/datapicker'
+import { getShortMonths } from '~/components/atoms/datepicker/config/allShortMonths'
+
+const { $isDate } = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    modelValue: number
+    lang: string
+  }>(),
+  { testId: 'ui-datepicker' }
+)
+const emits = defineEmits<{
+  (event: 'update:model-value', num: number): void
+  (event: 'update', num: number): void
+}>()
+
+const interfaceLang = computed<string>(() => props.lang)
+
+let isEnabledEmit = false
+const checkingDate = computed<Date>({
+  get() {
+    return new Date(props.modelValue)
+  },
+  set(newValue) {
+    if (isEnabledEmit) {
+      const newDate = new Date(newValue).getTime()
+      emits('update:model-value', newDate)
+      emits('update', newDate)
+      isEnabledEmit = false
+      if ($isDate(newValue.toString())) {
+        renderCalendar()
+      }
+    }
+  },
+})
+
+const currentYear = ref<number>()
+const currentMonth = ref<string>()
+const showAllYears = ref<boolean>(false)
+const showAllMonths = ref<boolean>(false)
+const selectedMonth = ref<number>(new Date().getMonth())
+
+const days = ref<UI_I_Items[]>([])
+const months = computed<string[]>(() => getMonthsFunc(localization.value))
+const weekdays = computed<string[]>(() => {
+  const language = interfaceLang.value
+  return getWeekdaysFunc(localization.value, language)
+})
+
+const renderCalendar = () => {
+  checkingDate.value.setDate(1)
+  days.value = []
+
+  const lastDay = new Date(
+    checkingDate.value.getFullYear(),
+    checkingDate.value.getMonth() + 1,
+    0
+  ).getDate()
+
+  const prevLastDay = new Date(
+    checkingDate.value.getFullYear(),
+    checkingDate.value.getMonth(),
+    0
+  ).getDate()
+
+  const firstDayIndex = checkingDate.value.getDay()
+  const language = interfaceLang.value
+  const firstDayIndexByLanguage =
+    language === 'en_US' ? firstDayIndex : firstDayIndex - 1
+
+  const shortMonths = getShortMonths(language)
+
+  currentMonth.value = shortMonths[checkingDate.value.getMonth()]
+
+  currentYear.value = checkingDate.value.getFullYear()
+
+  for (let x = firstDayIndexByLanguage; x > 0; x--) {
+    const result = prevLastDay - x + 1
+    days.value.push({
+      text: result,
+      class: 'prev-date',
+    })
+  }
+  const indexCurrentMonth = shortMonths.findIndex(
+    (x) => x === currentMonth.value
+  )
+
+  for (let i = 1; i <= lastDay; i++) {
+    if (
+      i === new Date(props.modelValue).getDate() &&
+      new Date(props.modelValue).getMonth() === indexCurrentMonth &&
+      new Date(props.modelValue).getFullYear() === currentYear.value
+    ) {
+      days.value.push({
+        text: i,
+        class: 'active',
+      })
+    } else if (
+      i === new Date().getDate() &&
+      indexCurrentMonth === new Date().getMonth() &&
+      currentYear.value === new Date().getFullYear()
+    ) {
+      days.value.push({
+        text: i,
+        class: 'today',
+      })
+    } else {
+      days.value.push({ text: i, class: '' })
+    }
+  }
+
+  const x = 42 - days.value.length
+  for (let j = 1; j <= x; j++) {
+    days.value.push({
+      text: j,
+      class: 'next-date',
+    })
+  }
+}
+
+const allMonths = computed<UI_I_Items[]>(() => {
+  const result = []
+  for (let i = 0; i < months.value.length; i++) {
+    const active = i + 1 === selectedMonth.value + 1 ? 'active' : ''
+    result.push({
+      text: months.value[i],
+      class: active,
+    })
+  }
+  return result
+})
+
+const firstYear = ref<number>(
+  Number(checkingDate.value.getFullYear().toString().slice(0, 3) + 0)
+)
+const allYears = computed<UI_I_Items[]>(() => {
+  const result = []
+  for (let i = firstYear.value; i < firstYear.value + 10; i++) {
+    const active = i === currentYear.value ? 'active' : ''
+    result.push({
+      text: i,
+      class: active,
+    })
+  }
+  return result
+})
+const prevYear = (): void => {
+  firstYear.value = firstYear.value - 10
+}
+const nextYear = (): void => {
+  firstYear.value = firstYear.value + 10
+}
+const setCurrentYear = (): void => {
+  firstYear.value = Number(
+    checkingDate.value.getFullYear().toString().slice(0, 3) + 0
+  )
+}
+const selectYear = (value: number): void => {
+  checkingDate.value = new Date(checkingDate.value.setFullYear(value))
+  renderCalendar()
+  showAllYears.value = false
+}
+
+const prevMonth = (): void => {
+  checkingDate.value.setMonth(checkingDate.value.getMonth() - 1)
+
+  renderCalendar()
+}
+const nextMonth = (): void => {
+  checkingDate.value.setMonth(checkingDate.value.getMonth() + 1)
+
+  renderCalendar()
+}
+const setCurrentDate = (): void => {
+  isEnabledEmit = true
+  checkingDate.value = new Date()
+
+  setTimeout(() => {
+    renderCalendar()
+  }, 0)
+}
+
+const selectMonth = (value: number): void => {
+  checkingDate.value = new Date(checkingDate.value.setMonth(value))
+  selectedMonth.value = value
+  showAllMonths.value = false
+
+  renderCalendar()
+}
+const selectDay = (value: number | string, type: string): void => {
+  isEnabledEmit = true
+  if (type === 'prev-date') {
+    checkingDate.value = new Date(
+      checkingDate.value.setMonth(checkingDate.value.getMonth() - 1)
+    )
+  } else if (type === 'next-date') {
+    checkingDate.value = new Date(
+      checkingDate.value.setMonth(checkingDate.value.getMonth() + 1)
+    )
+  }
+  checkingDate.value = new Date(checkingDate.value.setDate(+value))
+
+  isShowCalendar.value = false
+}
+
+const isShowCalendar = ref<boolean>(false)
+
+const uniqueId = ref<number>(0)
+const calendarTop = ref<number>()
+const calendarLeft = ref<number>()
+const showHideCalendar = (): void => {
+  const allDatePickers = document.querySelectorAll('.the-datepicer')
+  allDatePickers.forEach((element: any) => (element.style.display = 'none'))
+  const element = document.querySelector(
+    `.calendar-id-${uniqueId.value}`
+  ) as HTMLElement
+
+  calendarTop.value = element.getBoundingClientRect().y - 314 + 2
+  calendarLeft.value = element.getBoundingClientRect().x - 278 / 2
+
+  isShowCalendar.value = !isShowCalendar.value
+}
+
+const windowClick = (): void => {
+  isShowCalendar.value = false
+}
+
+const bodyScroll = (): void => {
+  isShowCalendar.value = false
+}
+
+onMounted(() => {
+  renderCalendar()
+  window.addEventListener('click', windowClick)
+  uniqueId.value = useUniqueId()
+})
+onUnmounted(() => {
+  window.removeEventListener('scroll', windowClick)
+})
+
+watch(isShowCalendar, (value) => {
+  if (value) {
+    checkingDate.value.setMonth(new Date(props.modelValue).getMonth())
+    checkingDate.value.setFullYear(new Date(props.modelValue).getFullYear())
+    renderCalendar()
+    window.addEventListener('scroll', bodyScroll, true)
+  } else window.removeEventListener('scroll', bodyScroll, true)
+})
+</script>
+
+<style scoped lang="scss">
+.item-day {
+  font-size: 13px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  border-radius: 0.15rem;
+}
+.container-datepicker {
+  background: unset;
+
+  .the-datepicer {
+    width: 278px;
+    height: 314px;
+    border: 1px solid var(--vertical-nav-hover-bg-color);
+    border-radius: 0.15rem;
+    box-shadow: 0 1px 2.4px hsl(0deg 0% 45% / 25%);
+    padding: 12px;
+    position: fixed;
+    z-index: 1050;
+    background-color: var(--modal-other-bg-color);
+
+    .content-month {
+      .all-months {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
+        .calendar-btn {
+          width: 100%;
+          height: 48px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: var(--checkbox-label-color);
+        }
+        .active {
+          background: var(--vertical-nav-hover-bg-color);
+          color: var(--form-input-color);
+        }
+      }
+    }
+    .content-years {
+      .content-buttons-arrow {
+        max-width: 108px;
+        margin: 0 auto;
+      }
+      .all-years {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
+        .calendar-btn {
+          width: 100%;
+          height: 48px;
+          color: var(--checkbox-label-color);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .active {
+          background: var(--vertical-nav-hover-bg-color);
+          color: var(--form-input-color);
+        }
+      }
+    }
+    .main-content {
+      .the-month {
+        height: 36px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        text-align: center;
+
+        i {
+          font-size: 29px;
+          cursor: pointer;
+        }
+        h1 {
+          font-size: 3rem;
+          font-weight: 400;
+          text-transform: uppercase;
+          letter-spacing: 0.2rem;
+          margin-bottom: 1rem;
+        }
+        p {
+          font-size: 1.6rem;
+        }
+
+        .top-menu {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      .bottom-panel {
+        .weekdays {
+          display: flex;
+          align-items: center;
+
+          div {
+            font-size: 12px;
+            font-weight: bold;
+            letter-spacing: 0.1rem;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: var(--checkbox-label-color);
+          }
+        }
+        .days {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+
+          .item-day {
+            font-size: 13px;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: background-color 0.2s;
+            cursor: pointer;
+            border-radius: 0.15rem;
+            color: var(--checkbox-label-color);
+
+            &:not(.prev-date):not(.today):hover {
+              background: #eee;
+            }
+            &.active {
+              background: #d9e4ea;
+              color: #000;
+              font-weight: bold;
+            }
+            &.today {
+              color: var(--blue-950);
+              font-weight: bold;
+            }
+            &.prev-date,
+            &.next-date {
+              opacity: 0.5;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .calendar-btn {
+    width: 48px;
+    height: 36px;
+    color: #0095d3;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: unset;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    border-radius: 3px;
+
+    &:hover {
+      background: #eee;
+    }
+  }
+
+  .content-buttons-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .icons {
+      color: #0095d3;
+    }
+
+    .calendar-btn {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .arrow-btn {
+    width: 18px;
+    height: 18px;
+
+    &.prev {
+      transform: rotate(-90deg);
+    }
+    &.next {
+      transform: rotate(90deg);
+    }
+  }
+}
+</style>