useCalendar

useForm и useControl - хелперы для работы с формами и валидацией

useCalendar

useCalendar - хук для обобщения рендеринга календаря

Аргументы

month

• type: number
• required: true

Номер месяца (нумерация начинается с 0 по аналогии с Date API)

year

• type: number
• required: true

Год для календаря

activeDate

• type: Date
• default: null

Активная дата для ее выделения в календаре

minDate

• type: Date
• default: ReturnType<typeof getMinDate>

Минимальная возможная дата. Значением по умолчанию является результат функции getMinDate из utils

maxDate

• type: Date
• default: ReturnType<typeof getMaxDate>

Максимальная возможная дата. Значением по умолчанию является результат функции getMaxDate из utils

onSelect

• type: (date: Date) => any
• default: () => {}

Функция для выбора даты из dates

options

• type: FormOptions<T, Vargs>
• default: {}

interface useCalendarProps {
  month: MaybeRef<number>;
  year: MaybeRef<number>;
  activeDate: MaybeRef<Date | null>;
  minDate?: MaybeRef<Date>;
  maxDate?: MaybeRef<Date>;
  onSelect?: (date: Date) => any;
}

Return

daysCount

• type: Ref<number>

Кол-во дней в месяце month.

beforeOffset

• type: Ref<number>

Кол-во дней предыдущего месяца, начиная с понедельника, до 1-го числа месяца month.

afterOffset

• type: Ref<number>

Кол-во дней следующего после month месяца до первого воскресенья

startDate

• type: Ref<Date>

Date, соответствующий первому числу месяца month.

endDate

• type: Ref<Date>

Date, соответствующий последнему числу месяца month.

weekLabels

• type: Array<"Вс" | "Пн" | "Вт" | "Ср" | "Чт" | "Пт" | "Сб">

Список коротких наименований дней недели.

dates

• type: Array<CalendarDate>

Список элементов календаря для обощения рендеринга

interface CalendarDate {
  day: number; // номер дня
  month: number; // номер месяца
  year: number; // год
  date: Date; // соответсвующий объект даты
  isToday: boolean // является ли текущая дата сегодняшней;
  isActive: boolean // равняется ли дата activeDate из props;
  isOffCurrentMonth: boolean // принадлежит ли дата текущему месяцу календаря;
  isOffLimits: boolean // выходит ли за пределы лимитов maxDate и minDate;
  onSelect: () => void; // функция для выбора, вызывающая onSelect из props, если
                        // дата не isOffCurrentMonth, isActive или isOffLimits
}

<template>
  <div class="calendar">
    <div class="calendar__labels">
      <div
        v-for="weekLabel in weekLabels"
        :key="weekLabel"
      >
        {{ weekLabel }}
      </div>
    </div>

    <div
      v-for="(dates, i) in datesByWeek"
      :key="i"
      class="calendar__week"
    >
      <button
        v-for="{ day, isOffCurrentMonth, isOffLimits, isActive, isToday } in dates"
        :class="{
          'calendar__day_active': isActive,
          'calendar__day_today': isToday,
          'calendar__day_disabled': isOffLimits || isOffCurrentMonth,
        }"
      >
        {{ isOffCurrentMonth ? '' : day }}
      </button>
    </div>
  </div>
</template>

import Vue from 'vue';
import { computed } from '@vue/composition-api';
import chunk from 'lodash-es/chunk'

import useCalendar from '#sf/composition/calendar/use-calendar';

export default Vue.extend({
  setup(props, context) {
    const {
      dates,
      beforeOffset,
      afterOffset,
      weekLabels
    } = useCalendar({
      month: 5,
      year: 2020
    });

    const datesByWeek = computed(() => chunk(dates.value, 7));

    return {
      weekLabels,
      datesByWeek
    };
  },
});