update 16 files and create 2 files

uvarov-frontend · Nov 17, 2024 · 0733da7 · 0733da7
1 parent b77b399
commit 0733da7
Show file tree

Hide file tree

Showing 18 changed files with 102 additions and 30 deletions.
diff --git a/docs/en/reference.mdx b/docs/en/reference.mdx
@@ -9,11 +9,12 @@ This section provides detailed documentation on working with the **Vanilla Calen
 
 The Vanilla Calendar Pro API documentation is divided into several functional subsections:
 
-1. **Instance Creation** — how and where to create a calendar instance;
-2. **Methods** — available methods for working with the calendar instance;
-3. **Settings** — all options that can be provided to change the behavior and display of the calendar.
-4. **Actions** — event handlers that allow you to receive and process various interaction data with the calendar.
-5. **Popups** — pop-ups allow you to select any day and display brief information about it directly in the calendar when hovering over that day.
-6. **Layouts** — templates that allow you to practically alter the entire DOM structure of the calendar and add your own HTML elements.
-7. **Styles** — a CSS class object for styling the calendar. It allows you to use any CSS framework, like Tailwind CSS, or custom classes.
-8. **Aria-labels** — an object of strings for `aria-label`. Allows you to localize all calendar labels to ensure accessibility.
+1. **Instance Creation** — how and where to create a calendar instance.
+2. **Utilities** - functions that allow you to format dates.
+3. **Methods** — available methods for working with the calendar instance.
+4. **Settings** — all options that can be provided to change the behavior and display of the calendar.
+5. **Actions** — event handlers that allow you to receive and process various interaction data with the calendar.
+6. **Popups** — pop-ups allow you to select any day and display brief information about it directly in the calendar when hovering over that day.
+7. **Layouts** — templates that allow you to practically alter the entire DOM structure of the calendar and add your own HTML elements.
+8. **Styles** — a CSS class object for styling the calendar. It allows you to use any CSS framework, like Tailwind CSS, or custom classes.
+9. **Aria-labels** — an object of strings for `aria-label`. Allows you to localize all calendar labels to ensure accessibility.
diff --git a/docs/en/reference/actions.mdx b/docs/en/reference/actions.mdx
@@ -1,7 +1,7 @@
 ---
 title: Actions
 description: Learn about the various actions that can be configured for the calendar, including event handlers for clicks on dates, weeks, months, years, and arrows, as well as time changes and tooltip displays.
-section: 4
+section: 5
 ---
 
 # Actions

diff --git a/docs/en/reference/labels.mdx b/docs/en/reference/labels.mdx
@@ -1,7 +1,7 @@
 ---
 title: Aria Labels
 description: Aria labels allow you to localize all aria-labels in the calendar for accessibility.
-section: 8
+section: 9
 ---
 
 # Aria Labels

diff --git a/docs/en/reference/layouts.mdx b/docs/en/reference/layouts.mdx
@@ -1,7 +1,7 @@
 ---
 title: Layouts
 description: Layouts allow you to change the DOM structure of the calendar and add your own HTML elements.
-section: 6
+section: 7
 ---
 
 # Layouts

diff --git a/docs/en/reference/methods.mdx b/docs/en/reference/methods.mdx
@@ -1,7 +1,7 @@
 ---
 title: Methods
 description: Methods for managing the calendar, including initialization, updating, setting parameters, deleting, showing, and hiding the calendar.
-section: 2
+section: 3
 ---
 
 # Methods

diff --git a/docs/en/reference/popups.mdx b/docs/en/reference/popups.mdx
@@ -1,7 +1,7 @@
 ---
 title: Popups
 description: Popups allow you to highlight any day and display brief information about it directly in the calendar when hovering over the day.
-section: 5
+section: 6
 ---
 
 # Popups

diff --git a/docs/en/reference/settings.mdx b/docs/en/reference/settings.mdx
@@ -1,7 +1,7 @@
 ---
 title: Settings
 description: Calendar settings, including display type, input mode, positioning, localization, dates and times.
-section: 3
+section: 4
 ---
 
 # Settings

diff --git a/docs/en/reference/styles.mdx b/docs/en/reference/styles.mdx
@@ -1,7 +1,7 @@
 ---
 title: Styles
 description: A comprehensive guide to customizing CSS classes in the calendar using the styles parameter, including a list of default classes and their replacement.
-section: 7
+section: 8
 ---
 
 # Styles

diff --git a/docs/en/reference/utilities.mdx b/docs/en/reference/utilities.mdx
@@ -0,0 +1,35 @@
+---
+title: Utilities
+description: Discover 4 convenient date utilities provided with Vanilla Calendar Pro. These features allow you to format dates, convert them to desired formats, and determine week numbers.
+section: 2
+---
+
+# Utilities
+
+The calendar comes with its utilities, making it easy to work with date formatting.
+
+There are 4 utilities in total, and they are functions that can be used anywhere in your code, even without the calendar.
+
+1. **`parseDates(dates: string[])`** - Takes an array of date ranges using a delimiter between dates in the string format `FormatDateString ('YYYY-MM-DD')`. Returns an array of dates in the string format `FormatDateString ('YYYY-MM-DD')`.
+```ts
+import { parseDates } from 'vanilla-calendar-pro/utils';
+parseDates(['2024-12-12:2024-12-15']) // return: ['2024-12-12', '2024-12-13', '2024-12-14', '2024-12-15']
+```
+
+2. **`getDateString(date: Date)`** — Takes a date of type `Date`. Returns the date in the string format `FormatDateString ('YYYY-MM-DD')`.
+```ts
+import { getDateString } from 'vanilla-calendar-pro/utils';
+getDateString(new Date('24.12.2024')) // return: 2024-12-24
+```
+
+3. **`getDate(date: FormatDateString)`** — Takes a date in string format, e.g., `FormatDateString ('YYYY-MM-DD')`. Returns a date of type `Date`.
+```ts
+import { getDate } from 'vanilla-calendar-pro/utils';
+getDate(new Date('2024-12-12')) // return: Tue Dec 24 2024 00:00:00 GMT
+```
+
+4. **`getWeekNumber(date: FormatDateString, weekStartDay: WeekDayID)`** - Takes a date in string format `FormatDateString ('YYYY-MM-DD')` and the week start day, specifically its `id` of type `number` from 0 to 6. Returns an object `{ year: yearNumber, week: weekNumber }` for the date specified in the arguments.
+```ts
+import { getWeekNumber } from 'vanilla-calendar-pro/utils';
+getWeekNumber('2024-12-12', 1) // return: {year: 2024, week: 50}
+```
diff --git a/docs/ru/reference.mdx b/docs/ru/reference.mdx
@@ -9,11 +9,12 @@ description: Обзор справочника по API Vanilla Calendar Pro. У
 
 Документация API Vanilla Calendar Pro разделена на несколько функциональных подразделов:
 
-1. **Создание экземпляра** — как и где создать экземпляр календаря;
-2. **Методы** — доступные методы для работы с экземпляром календаря;
-3. **Настройки** — все опции, которые можно передать для изменения поведения и отображения календаря.
-4. **Действия** — обработчики событий, которые позволяют получать и обрабатывать различные данные взаимодействия с календарем.
-5. **Попапы** — всплывающие окна, позволяют выбрать любой день и отобразить краткую информацию о нем прямо в календаре при наведении на этот день.
-6. **Макеты** — это шаблоны, которые позволяют практически полностью изменить структуру DOM календаря и добавить свои собственные HTML-элементы.
-7. **Стили** — объект классов CSS для стилизации календаря. Позволяет использовать любой CSS фреймворк, например, Tailwind CSS или собственные классы.
-8. **Aria-подписи** — объект строк для `aria-label`. Позволяет локализовать все подписи календаря для обеспечения доступности.
+1. **Создание экземпляра** — как и где создать экземпляр календаря.
+2. **Утилиты** - функции которые позволяют форматировать даты.
+3. **Методы** — доступные методы для работы с экземпляром календаря.
+4. **Настройки** — все опции, которые можно передать для изменения поведения и отображения календаря.
+5. **Действия** — обработчики событий, которые позволяют получать и обрабатывать различные данные взаимодействия с календарем.
+6. **Попапы** — всплывающие окна, позволяют выбрать любой день и отобразить краткую информацию о нем прямо в календаре при наведении на этот день.
+7. **Макеты** — это шаблоны, которые позволяют практически полностью изменить структуру DOM календаря и добавить свои собственные HTML-элементы.
+8. **Стили** — объект классов CSS для стилизации календаря. Позволяет использовать любой CSS фреймворк, например, Tailwind CSS или собственные классы.
+9. **Aria-подписи** — объект строк для `aria-label`. Позволяет локализовать все подписи календаря для обеспечения доступности.
diff --git a/docs/ru/reference/actions.mdx b/docs/ru/reference/actions.mdx
@@ -1,7 +1,7 @@
 ---
 title: Действия
 description: Узнайте о различных действиях, которые можно настроить для календаря, включая обработчики событий для кликов на даты, недели, месяцы, годы и стрелки, а также для изменения времени и отображения подсказок.
-section: 4
+section: 5
 ---
 
 # Действия

diff --git a/docs/ru/reference/labels.mdx b/docs/ru/reference/labels.mdx
@@ -1,7 +1,7 @@
 ---
 title: Aria-подписи
 description: Aria-подписи позволяют локализовать все aria-label в календаре для доступности.
-section: 8
+section: 9
 ---
 
 # Aria-подписи

diff --git a/docs/ru/reference/layouts.mdx b/docs/ru/reference/layouts.mdx
@@ -1,7 +1,7 @@
 ---
 title: Макеты
 description: Макеты позволяют изменять структуру DOM календаря и добавлять собственные HTML-элементы.
-section: 6
+section: 7
 ---
 
 # Макеты

diff --git a/docs/ru/reference/methods.mdx b/docs/ru/reference/methods.mdx
@@ -1,7 +1,7 @@
 ---
 title: Методы
 description: Методы для управления календарем, включая инициализацию, обновление, установку параметров, удаление, показ и скрытие календаря.
-section: 2
+section: 3
 ---
 
 # Методы

diff --git a/docs/ru/reference/popups.mdx b/docs/ru/reference/popups.mdx
@@ -1,7 +1,7 @@
 ---
 title: Попапы
 description: Попапы позволяют выделить любой день и выводить краткую информацию о нем прямо в календаре при наведении курсора.
-section: 5
+section: 6
 ---
 
 # Попапы

diff --git a/docs/ru/reference/settings.mdx b/docs/ru/reference/settings.mdx
@@ -1,7 +1,7 @@
 ---
 title: Настройки
 description: Настройки календаря, включая тип отображения, режим ввода, позиционирование, локализацию, даты и временные параметры.
-section: 3
+section: 4
 ---
 
 # Настройки

diff --git a/docs/ru/reference/styles.mdx b/docs/ru/reference/styles.mdx
@@ -1,7 +1,7 @@
 ---
 title: Стили
 description: Полное руководство по кастомизации CSS-классов в календаре с помощью параметра styles, включая список классов по умолчанию и их замену.
-section: 7
+section: 8
 ---
 
 # Стили

diff --git a/docs/ru/reference/utilities.mdx b/docs/ru/reference/utilities.mdx
@@ -0,0 +1,35 @@
+---
+title: Утилиты
+description: Узнайте о 4 удобных утилитах для работы с датами, поставляемых с Vanilla Calendar Pro. Эти функции позволяют форматировать даты, преобразовывать их в нужные форматы и определять номера недель.
+section: 2
+---
+
+# Утилиты
+
+Вместе с календарем устанавливаются его утилиты, с помощью которых можно удобно форматировать даты.
+
+Всего есть 4 утилиты, они являются функциями и вы можете использовать их в любом месте вашего кода, даже без календаря.
+
+1. **`parseDates(dates: string[])`** - принимает на вход массив диапазонов дат с использованием разделителя между датами в строковом формате типа `FormatDateString ('YYYY-MM-DD')`. Возвращает массив дат в строковом формате типа `FormatDateString ('YYYY-MM-DD')`.
+```ts
+import { parseDates } from 'vanilla-calendar-pro/utils';
+parseDates(['2024-12-12:2024-12-15']) // возвращает: ['2024-12-12', '2024-12-13', '2024-12-14', '2024-12-15']
+```
+
+2. **`getDateString(date: Date)`** — принимает на вход дату типа `Date`. Возвращает дату в строковом формате типа `FormatDateString ('YYYY-MM-DD')`.
+```ts
+import { getDateString } from 'vanilla-calendar-pro/utils';
+getDateString(new Date('24.12.2024')) // возвращает: 2024-12-24
+```
+
+3. **`getDate(date: FormatDateString)`** — принимает дату в строковом формате, например `FormatDateString ('YYYY-MM-DD')`. Возвращает дату типа `Date`.
+```ts
+import { getDate } from 'vanilla-calendar-pro/utils';
+getDate(new Date('2024-12-12')) // возвращает: Tue Dec 24 2024 00:00:00 GMT
+```
+
+4. **`getWeekNumber(date: FormatDateString, weekStartDay: WeekDayID)`** - принимает на вход дату в строковом формате типа `FormatDateString ('YYYY-MM-DD')` и день начала недели, а точнее его `id` с типом `number` от 0 до 6. Возвращает объект `{ year: yearNumber, week: weekNumber }` для даты, указанной в аргументах.
+```ts
+import { getWeekNumber } from 'vanilla-calendar-pro/utils';
+getWeekNumber('2024-12-12', 1) // возвращает: {year: 2024, week: 50}
+```