Vue Calendar Component

Компонент календаря для Vue.js 3 с использованием Composition API, разработанный согласно тестовому заданию.

Функциональность

• Переключение месяцев с помощью стрелок навигации
• Выбор конкретной даты при клике
• Событие date-selected, которое возвращает выбранную дату в формате YYYY-MM-DD
• Поддержка инициализации с начальной датой через свойство initial-date в формате YYYY-MM-DD
• Автоматическое использование текущей даты, если initial-date не указан
• Поддержка смены языка интерфейса (русский/английский) через prop locale

Установка

npm install

Запуск

Для разработки:

npm run dev

Для сборки проекта:

npm run build

Для предварительного просмотра собранного проекта:

npm run preview

Использование

Базовый пример

<template>
  <div>
    <Calendar @date-selected="handleDateSelection" />
  </div>
</template>

<script setup lang="ts">
import Calendar from '@/components/Calendar';

const handleDateSelection = (date: string): void => {
  console.log('Выбранная дата:', date); // Формат: "YYYY-MM-DD"
};
</script>

С начальной датой

<Calendar 
  initial-date="2018-07-10"
  @date-selected="handleDateSelection" 
/>

С выбором языка

<Calendar 
  locale="en"
  @date-selected="handleDateSelection" 
/>

Props

Prop	Тип	По умолчанию	Описание
initial-date	String	null	Начальная дата в формате YYYY-MM-DD. Если не указана, используется текущая дата
locale	String	'ru'	Язык интерфейса: 'ru' или 'en'

События

Событие	Описание	Данные
date-selected	Вызывается при выборе даты	Строка в формате YYYY-MM-DD

Технические детали

• Vue.js 3.3+ с Composition API
• TypeScript для типизации
• Vite для сборки и разработки