{"_id":"@alekstar79/vue3-calendar","_rev":"3-e3ea250eb184dcbd1c45186b8cdb15d8","name":"@alekstar79/vue3-calendar","dist-tags":{"latest":"3.0.3"},"versions":{"3.0.0":{"name":"@alekstar79/vue3-calendar","version":"3.0.0","keywords":["vue","vue3","calendar","date-picker","datepicker","component","typescript","composition-api"],"author":{"url":"https://github.com/alekstar79","name":"Aleksey Tarasenko","email":"alekstar79@yandex.ru"},"license":"MIT","_id":"@alekstar79/vue3-calendar@3.0.0","maintainers":[{"name":"alekstar79","email":"alekstar79@yandex.ru"}],"homepage":"https://github.com/alekstar79/vue3-calendar#readme","bugs":{"url":"https://github.com/alekstar79/vue3-calendar/issues"},"dist":{"shasum":"4ee8721501827ac9f517fcd267ccda7208d8c10c","tarball":"https://registry.npmjs.org/@alekstar79/vue3-calendar/-/vue3-calendar-3.0.0.tgz","fileCount":14,"integrity":"sha512-gNhI1CRz2vjkXJ1md/8PTo42AmuWALgprhVDs6r+jSx8NhDcClOgVe6HRwUi7eCfXRBnbtthCjc6f9FPuYt1IQ==","signatures":[{"sig":"MEYCIQC4Y1xzf78G4OjoxsJVZ7aNPxj9C3qMLri7RsR0eI+5ZwIhAIca78p3HnyPTFwBj2O7/1U/wdT8guynIADnJdt2ejQ4","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":72518},"main":"./dist/calendar.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/calendar.es.js","engines":{"node":">=20.19.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/calendar.es.js","require":"./dist/calendar.umd.cjs"},"./dist/style.css":"./dist/style.css"},"gitHead":"05e7aac6397e024beaad7a971c006ea174a42a63","private":false,"scripts":{"dev":"vite -c vite.config.ts","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","test":"vitest --silent","build":"vite build -c vite.config.ts","preview":"vite preview","test:ui":"vitest --ui","coverage":"vitest run --coverage","pub:beta":"npm run build:lib && npm publish --tag beta","test:run":"vitest run --silent","build:lib":"vite build -c vite.lib.config.ts","pub:major":"npm version major && npm run build:lib && npm publish","pub:minor":"npm version minor && npm run build:lib && npm publish","pub:patch":"npm version patch && npm run build:lib && npm publish","type-check":"vue-tsc --noEmit","pub:dry-run":"npm run build:lib && npm publish --dry-run","prepublishOnly":"npm run build:lib && npm run test:run"},"_npmUser":{"name":"alekstar79","email":"alekstar79@yandex.ru"},"repository":{"url":"git+https://github.com/alekstar79/vue3-calendar.git","type":"git"},"_npmVersion":"10.9.4","description":"A modern, responsive, and customizable calendar component built with Vue 3 Composition API and TypeScript","directories":{},"_nodeVersion":"22.21.1","dependencies":{"vue":"^3.4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^27.1.0","eslint":"^8.56.0","vitest":"^1.1.0","vue-tsc":"^1.8.0","@vitest/ui":"^1.1.0","typescript":"^5.3.0","@types/node":"^20.11.0","sass-embedded":"^1.93.3","@vue/test-utils":"^2.4.4","vite-plugin-dts":"^4.5.4","eslint-plugin-vue":"^9.20.0","@vitejs/plugin-vue":"^5.0.0","@vitest/coverage-v8":"^1.1.0"},"peerDependencies":{"vue":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-calendar_3.0.0_1762986337008_0.37671220339771216","host":"s3://npm-registry-packages-npm-production"}},"3.0.2":{"name":"@alekstar79/vue3-calendar","version":"3.0.2","keywords":["vue","vue3","calendar","date-picker","datepicker","component","typescript","composition-api"],"author":{"url":"https://github.com/alekstar79","name":"Aleksey Tarasenko","email":"alekstar79@yandex.ru"},"license":"MIT","_id":"@alekstar79/vue3-calendar@3.0.2","maintainers":[{"name":"alekstar79","email":"alekstar79@yandex.ru"}],"homepage":"https://github.com/alekstar79/vue3-calendar#readme","bugs":{"url":"https://github.com/alekstar79/vue3-calendar/issues"},"dist":{"shasum":"e66a98b228c57f5dce55f388c8442afa49cccacf","tarball":"https://registry.npmjs.org/@alekstar79/vue3-calendar/-/vue3-calendar-3.0.2.tgz","fileCount":14,"integrity":"sha512-wpOmaheBXIihreLPOXXrLH2tcFuYdBAC/53H2CZcgjo6DvcbM1saEPaLRuIP871TYpwilaSqBhmUNMIjlqVKyg==","signatures":[{"sig":"MEQCIC2QMwWD83N+RDdTOQNSzHcsZEfkgEvVEXED8kkSPH6TAiBMoncz6x6shiXNbfjIxZKeTu7o94NGZxQaW3PweJfaeA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":72556},"main":"./dist-lib/calendar.umd.cjs","type":"module","types":"./dist-lib/index.d.ts","module":"./dist-lib/calendar.es.js","engines":{"node":">=20.19.0"},"exports":{".":{"types":"./dist-lib/index.d.ts","import":"./dist-lib/calendar.es.js","require":"./dist-lib/calendar.umd.cjs"},"./dist-lib/style.css":"./dist-lib/style.css"},"gitHead":"e0d5ecd963311ff1d490e6106db43d83a95c1c7d","private":false,"scripts":{"dev":"vite -c vite.config.ts","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","test":"vitest --silent","build":"vite build -c vite.config.ts","preview":"vite preview","test:ui":"vitest --ui","coverage":"vitest run --coverage","pub:beta":"npm run build:lib && npm publish --tag beta","test:run":"vitest run --silent","build:lib":"vite build -c vite.lib.config.ts","pub:major":"npm version major && npm run build:lib && npm publish","pub:minor":"npm version minor && npm run build:lib && npm publish","pub:patch":"npm version patch && npm run build:lib && npm publish","type-check":"vue-tsc --noEmit","pub:dry-run":"npm run build:lib && npm publish --dry-run","prepublishOnly":"npm run build:lib && npm run test:run"},"_npmUser":{"name":"alekstar79","email":"alekstar79@yandex.ru"},"repository":{"url":"git+https://github.com/alekstar79/vue3-calendar.git","type":"git"},"_npmVersion":"10.9.4","description":"A modern, responsive, and customizable calendar component built with Vue 3 Composition API and TypeScript","directories":{},"_nodeVersion":"22.21.1","dependencies":{"vue":"^3.4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","jsdom":"^27.1.0","eslint":"^8.56.0","vitest":"^1.1.0","vue-tsc":"^1.8.0","@vitest/ui":"^1.1.0","typescript":"^5.3.0","@types/node":"^20.11.0","sass-embedded":"^1.93.3","@vue/test-utils":"^2.4.4","vite-plugin-dts":"^4.5.4","eslint-plugin-vue":"^9.20.0","@vitejs/plugin-vue":"^5.0.0","@vitest/coverage-v8":"^1.1.0"},"peerDependencies":{"vue":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-calendar_3.0.2_1763024968227_0.34196289981004724","host":"s3://npm-registry-packages-npm-production"}},"3.0.3":{"name":"@alekstar79/vue3-calendar","version":"3.0.3","description":"A modern, responsive, and customizable calendar component built with Vue 3 Composition API and TypeScript","type":"module","private":false,"main":"./dist-lib/calendar.umd.cjs","module":"./dist-lib/calendar.es.js","types":"./dist-lib/index.d.ts","exports":{".":{"types":"./dist-lib/index.d.ts","import":"./dist-lib/calendar.es.js","require":"./dist-lib/calendar.umd.cjs"},"./dist-lib/style.css":"./dist-lib/style.css"},"engines":{"node":">=20.19.0"},"publishConfig":{"access":"public"},"scripts":{"dev":"vite -c vite.config.ts","build":"vite build -c vite.config.ts","build:lib":"vite build -c vite.lib.config.ts","preview":"vite preview","type-check":"vue-tsc --noEmit","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","test":"vitest --silent","test:ui":"vitest --ui","test:run":"vitest run --silent","coverage":"vitest run --coverage","prepublishOnly":"npm run build:lib && npm run test:run","pub:dry-run":"npm run build:lib && npm publish --dry-run","pub:beta":"npm run build:lib && npm publish --tag beta","pub:patch":"npm version patch && npm run build:lib && npm publish","pub:minor":"npm version minor && npm run build:lib && npm publish","pub:major":"npm version major && npm run build:lib && npm publish"},"dependencies":{"vue":"^3.4.0"},"devDependencies":{"@types/node":"^20.11.0","@vitejs/plugin-vue":"^5.0.0","@vitest/coverage-v8":"^1.1.0","@vitest/ui":"^1.1.0","@vue/test-utils":"^2.4.4","eslint":"^8.56.0","eslint-plugin-vue":"^9.20.0","jsdom":"^27.1.0","sass-embedded":"^1.93.3","typescript":"^5.3.0","vite":"^5.0.0","vite-plugin-dts":"^4.5.4","vitest":"^1.1.0","vue-tsc":"^1.8.0"},"peerDependencies":{"vue":"^3.4.0"},"keywords":["vue","vue3","calendar","date-picker","datepicker","component","typescript","composition-api"],"author":{"name":"Aleksey Tarasenko","email":"alekstar79@yandex.ru","url":"https://github.com/alekstar79"},"repository":{"type":"git","url":"git+https://github.com/alekstar79/vue3-calendar.git"},"bugs":{"url":"https://github.com/alekstar79/vue3-calendar/issues"},"homepage":"https://github.com/alekstar79/vue3-calendar#readme","license":"MIT","_id":"@alekstar79/vue3-calendar@3.0.3","gitHead":"654931c553e204a0ea1a95477809f5222b2408bf","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-/gYRQnrRRzC1M6rTiUgs9q56aKSeliaZvHCSgZ0K7vMG04E/QVuzYkNh2TiC+ISKnSaXE7g1nKAlXjuTucYnWw==","shasum":"342b440a5cff45fd15b1d59876b6f25b6834f6fc","tarball":"https://registry.npmjs.org/@alekstar79/vue3-calendar/-/vue3-calendar-3.0.3.tgz","fileCount":14,"unpackedSize":72546,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCTDkQFY1/KJAQOuIuu97N01foHFGWPc31auRtP5LXmwAIhAMKIo7Qh5jbLV0sQKno+RGlzz3gF3CPEuJRws8SrZHKj"}]},"_npmUser":{"name":"alekstar79","email":"alekstar79@yandex.ru"},"directories":{},"maintainers":[{"name":"alekstar79","email":"alekstar79@yandex.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue3-calendar_3.0.3_1763025710370_0.19886581753094013"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-12T22:25:36.936Z","modified":"2025-11-13T09:21:50.771Z","3.0.0":"2025-11-12T22:25:37.204Z","3.0.2":"2025-11-13T09:09:28.403Z","3.0.3":"2025-11-13T09:21:50.577Z"},"bugs":{"url":"https://github.com/alekstar79/vue3-calendar/issues"},"author":{"name":"Aleksey Tarasenko","email":"alekstar79@yandex.ru","url":"https://github.com/alekstar79"},"license":"MIT","homepage":"https://github.com/alekstar79/vue3-calendar#readme","keywords":["vue","vue3","calendar","date-picker","datepicker","component","typescript","composition-api"],"repository":{"type":"git","url":"git+https://github.com/alekstar79/vue3-calendar.git"},"description":"A modern, responsive, and customizable calendar component built with Vue 3 Composition API and TypeScript","maintainers":[{"name":"alekstar79","email":"alekstar79@yandex.ru"}],"readme":"# 📅 Vue 3 Calendar Component\n\n[![Vue](https://img.shields.io/badge/Vue-3.3+-green.svg)]()\n[![NPM](https://img.shields.io/npm/v/@alekstar79/vue3-calendar.svg)](https://www.npmjs.com/package/@alekstar79/vue3-calendar)\n[![GitHub repo](https://img.shields.io/badge/github-repo-green.svg?style=flat)](https://github.com/alekstar79/vue3-calendar)\n[![Typescript](https://img.shields.io/badge/TypeScript-Ready-blue?logo=typescript)]()\n[![License](https://img.shields.io/badge/License-MIT-green)]()\n[![Version](https://img.shields.io/badge/Version-3.0.0-orange)]()\n[![Coverage](https://img.shields.io/badge/Coverage-79.6%25-green)]()\n\nA modern, responsive, and customizable calendar component built with Vue 3 Composition API and TypeScript.\n\n![Vue3 Calendar Component](review.gif)\n\n<!-- TOC -->\n* [📅 Vue 3 Calendar Component](#-vue-3-calendar-component)\n  * [🎮 Demo](#-demo)\n  * [🚀 Features](#-features)\n  * [📁 Project Structure](#-project-structure)\n  * [📦 Installation](#-installation)\n    * [Library Installation:](#library-installation)\n    * [Development Setup:](#development-setup)\n  * [💻 Usage](#-usage)\n    * [📄 Basic Usage](#-basic-usage)\n  * [⚙️ Configuration](#-configuration)\n    * [📊 Supported Locales](#-supported-locales)\n  * [🔧 Component Props](#-component-props)\n  * [📡 Component Events](#-component-events)\n  * [🎨 Custom Styling with SCSS](#-custom-styling-with-scss)\n  * [🎯 Available SCSS Variables](#-available-scss-variables)\n  * [📖 API Reference](#-api-reference)\n    * [🔧 Composables](#-composables)\n  * [📅 Date Utilities](#-date-utilities)\n  * [🌍 Internationalization](#-internationalization)\n  * [🧪 Testing](#-testing)\n    * [🚀 Running Tests](#-running-tests)\n    * [📊 Test Coverage](#-test-coverage)\n    * [🏗️ Test Structure](#-test-structure)\n  * [🔨 Development](#-development)\n    * [🛠️ Development Commands](#-development-commands)\n    * [📦 Building for Production](#-building-for-production)\n  * [📋 Browser Support](#-browser-support)\n  * [❗ Troubleshooting](#-troubleshooting)\n    * [Common Import Issues:](#common-import-issues)\n    * [Locale Configuration:](#locale-configuration)\n    * [Date Formatting:](#date-formatting)\n  * [🐛 Common Issues](#-common-issues)\n  * [🤝 Contributing](#-contributing)\n  * [👨‍💻 Author](#-author)\n<!-- TOC -->\n\n## 🎮 Demo\n\n- Check out the live demo: [Vue3 Calendar](https://alekstar79.github.io/vue3-calendar)\n- Run the demo locally to explore all features:\n\n  ```shell\n  git clone https://github.com/alekstar79/vue3-calendar.git\n  ```\n  ```shell\n  cd vue3-calendar\n  ```\n  ```shell\n  npm install\n  ```\n  ```shell\n  npm run dev\n  ```\n\nThe demo showcases real-time calendar interactions with locale switching, date selection, and event logging.\n\n## 🚀 Features\n\n- **Vue 3 Composition API** - Modern Vue 3 with TypeScript support\n- **Responsive Design** - Works on all device sizes\n- **Internationalization** - Multiple locale support with proper week start days\n- **Customizable** - Flexible styling with SCSS variables\n- **Accessible** - Full keyboard navigation and ARIA labels\n- **Type Safe** - Written in TypeScript with full type definitions\n- **Well Tested** - Comprehensive test suite with 79.6% code coverage\n- **Zero Dependencies** - Only Vue 3 as peer dependency\n\n\n## 📁 Project Structure\n\n```text\nvue3-calendar/\n├── src/\n│   ├── components/            # Vue components\n│   │   ├── Calendar.vue       # Main calendar component\n│   │   ├── CalendarDay.vue    # Individual day component\n│   │   ├── CalendarGrid.vue   # Calendar grid layout\n│   │   └── CalendarHeader.vue # Calendar header with navigation\n│   ├── composables/           # Composition API functions\n│   │   ├── use-calendar.ts    # Main calendar logic\n│   │   ├── date-utils.ts      # Date manipulation utilities\n│   │   └── locales.ts         # Localization configuration\n│   ├── styles/                # SCSS stylesheets\n│   │   ├── main.scss          # Main styles\n│   │   ├── variables.scss     # SCSS variables\n│   │   └── mixins.scss        # SCSS mixins\n│   └── __tests__/             # Unit tests\n├── demo/                      # Demo application\n└── dist/                      # Built files\n```\n\n## 📦 Installation\n\n### Library Installation:\n\n```shell\nyarn install @alekstar79/vue3-calendar\n```\n\n### Development Setup:\n\n```shell\ngit clone https://github.com/alekstar79/vue3-calendar.git\n\ncd vue3-calendar\nyarn install\n```\n\n## 💻 Usage\n\n### 📄 Basic Usage\n\n```vue\n<template>\n  <Calendar\n    :initial-date=\"initialDate\"\n    :locale=\"locale\"\n    @date-selected=\"handleDateSelect\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Calendar } from '@alekstar79/vue3-calendar'\nimport type { SupportedLocale } from '@alekstar79/vue3-calendar'\n\nconst initialDate = ref('2024-01-15')\nconst locale = ref<SupportedLocale>('en-US')\n\nconst handleDateSelect = (date: Date) => {\n  console.log('Selected date:', date)\n}\n</script>\n```\n\n## ⚙️ Configuration\n\n### 📊 Supported Locales\n\nLocale\tLanguage\tWeek Starts On\n\n- en-US\tEnglish (US)\tSunday\n- ru-RU\tRussian\tMonday\n- de-DE\tGerman\tMonday\n- fr-FR\tFrench\tMonday\n- es-ES\tSpanish\tMonday\n\n## 🔧 Component Props\n\n| Prop          | Type               | Default     | Description                        |\n|---------------|--------------------|-------------|------------------------------------|\n| `initialDate` | `string` \\| `Date` | `undefined` | Initial date to display and select |\n| `locale`      | `SupportedLocale`  | `en-US`     | Locale for internationalization    |\n\n\n## 📡 Component Events\n\n| Event           | Payload | Description                     |\n|-----------------|---------|---------------------------------|\n| `date-selected` | `Date`  | Emitted when a date is selected |\n\n\n## 🎨 Custom Styling with SCSS\n\n```scss\n// Import and override SCSS variables\n@import '@alekstar79/vue3-calendar/src/styles/variables';\n\n// Customize colors\n$color-primary: #8b5cf6;\n$color-primary-light: #ede9fe;\n$color-primary-dark: #5b21b6;\n\n// Customize spacing\n$spacing-md: 0.75rem;\n$spacing-lg: 1.25rem;\n\n// Customize breakpoints\n$breakpoint-sm: 480px;\n$breakpoint-md: 768px;\n```\n\n## 🎯 Available SCSS Variables\n\n```scss\n// Colors\n$color-primary: #3b82f6;\n$color-primary-light: #dbeafe;\n$color-primary-dark: #1e40af;\n\n// Text colors\n$text-primary: #111827;\n$text-secondary: #4b5563;\n$text-muted: #6b7280;\n\n// Spacing\n$spacing-sm: 0.5rem;\n$spacing-md: 1rem;\n$spacing-lg: 1.5rem;\n\n// Breakpoints\n$breakpoint-sm: 640px;\n$breakpoint-md: 768px;\n$breakpoint-lg: 1024px;\n```\n\n## 📖 API Reference\n\n### 🔧 Composables\n\nuseCalendar\n\n```typescript\nimport { useCalendar } from '@alekstar79/vue3-calendar'\n\nconst {\n  selectedDate,      // Currently selected date\n  displayMonth,      // Current displayed month\n  monthView,         // 2D array of calendar days\n  selectDate,        // Function to select a date\n  nextMonth,         // Navigate to next month\n  previousMonth,     // Navigate to previous month\n  goToToday,         // Navigate to current month and select today\n  clearSelectedDate  // Clear current selection\n} = useCalendar(initialDate?, locale?)\n```\n\n## 📅 Date Utilities\n\n```typescript\nimport {\n  formatDate,        // Format date to YYYY-MM-DD\n  parseDate,         // Parse YYYY-MM-DD string to Date\n  isToday,           // Check if date is today\n  isSameDay,         // Check if two dates are the same day\n  addDays,           // Add days to a date\n  addMonths,         // Add months to a date\n  getMonthDays,      // Get month days as 2D array\n  getMonthName,      // Get localized month name\n  getShortDayNames   // Get localized short day names\n} from '@alekstar79/vue3-calendar'\n\n// Example usage\nconst today = new Date()\nconst formatted = formatDate(today) // \"2025-09-15\"\nconst isToday = isToday(today) // true\n```\n\n## 🌍 Internationalization\n\nThe calendar automatically adapts to locale-specific settings:\n\n- Month names in local language\n- Day names in local language and order\n- Week start day according to regional standards\n- Date formatting based on locale conventions\n\n```typescript\n// Type definition for supported locales\ntype SupportedLocale = 'en-US' | 'ru-RU' | 'de-DE' | 'fr-FR' | 'es-ES'\n```\n\n## 🧪 Testing\n\nThe project includes comprehensive tests with Vitest and Vue Test Utils.\n\n### 🚀 Running Tests\n\n```shell\nyarn test          # Run tests in watch mode\nyarn test:run      # Run tests once\nyarn test:ui       # Run tests with UI\nyarn coverage      # Run tests with coverage report\n```\n\n### 📊 Test Coverage\n\n| Category   | Percentage |\n|------------|------------|\n| Statements | 79.6%      |\n| Branches   | 89.55%     |\n| Functions  | 65.85%     |\n| Lines      | 79.6%      |\n\n\n### 🏗️ Test Structure\n\n```text\nsrc/__tests__/\n├── Calendar.spec.ts      # Component integration tests\n├── date-utils.spec.ts    # Date utility function tests\n└── use-calendar.spec.ts  # Composable logic tests\n```\n\n## 🔨 Development\n\n### 🛠️ Development Commands\n\n```shell\nyarn dev          # Start development server with demo\nyarn build        # Build demo application\nyarn build:lib    # Build library for distribution\nyarn type-check   # TypeScript type checking\nyarn lint         # Code linting and formatting\n```\n\n### 📦 Building for Production\n\n```shell\n# Build library for distribution\nyarn run build:lib\n\n# The build generates:\n# - dist/calendar.es.js (ES module)\n# - dist/calendar.umd.cjs (UMD module)\n# - dist/index.d.ts (TypeScript definitions)\n# - dist/style.css (Compiled styles)\n```\n\n\n## 📋 Browser Support\n\n| Browser    | Version | Support |\n|------------|---------|---------|\n| 🟢 Chrome  | 64+     | ✅ Full  |\n| 🟢 Firefox | 67+     | ✅ Full  |\n| 🟢 Safari  | 12+     | ✅ Full  |\n| 🟢 Edge    | 79+     | ✅ Full  |\n\n\n## ❗ Troubleshooting\n\n### Common Import Issues:\n\n```typescript\n// ✅ Correct\nimport { Calendar } from '@alekstar79/vue3-calendar'\nimport type { SupportedLocale } from '@alekstar79/vue3-calendar'\n\n// ❌ Incorrect\nimport Calendar from '@alekstar79/vue3-calendar'\n````\n\n### Locale Configuration:\n\n```typescript\n// noinspection JSAnnotator\n\n// ✅ Supported locales\nconst locale = ref<'en-US' | 'ru-RU' | 'de-DE' | 'fr-FR' | 'es-ES'>('en-US')\n\n// ❌ Unsupported locale\nconst locale = ref('ja-JP') // TypeScript will error\n```\n\n### Date Formatting:\n\n```typescript\n// noinspection JSAnnotator\n\n// ✅ Correct date format\nconst initialDate = ref('2024-01-15') // YYYY-MM-DD\n\n// ❌ Incorrect format\nconst initialDate = ref('15-01-2024') // May cause parsing issues\n```\n\n## 🐛 Common Issues\n\n**Styles not loading:**\n\n- Ensure you import the CSS: @import '@alekstar79/vue3-calendar/dist/style.css'\n\n**Locale not changing week start:**\n\n- Verify you're using a supported locale value\n- Check that weekStartsOn is properly configured in locales.ts\n\n**TypeScript errors:**\n\n- Ensure you have TypeScript 5.3+ and Vue 3.4+\n- Import types correctly using import type\n\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: git checkout -b feature/amazing-feature\n3. Commit your changes: git commit -m 'Add amazing feature'\n4. Push to the branch: git push origin feature/amazing-feature\n5. Open a pull request\n\n\n## 👨‍💻 Author\n\nAleksey Tarasenko\n\n- Email: [alekstar79@yandex.ru](mailto:alekstar79@yandex.ru)\n- GitHub: [@alekstar79](https://github.com/alekstar79)\n\n<div align=\"center\"> Built with ❤️ using Vue 3 and TypeScript </div>\n","readmeFilename":"README.md"}