diff --git a/docs/en/reference.mdx b/docs/en/reference.mdx index 8b079ece..e0be1104 100644 --- 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 index 35848d60..13cae95c 100644 --- 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 index 8964ece8..e25d7fa0 100644 --- 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 index 5e93ece6..40dc80ef 100644 --- 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 index a0d8e2e6..d0e3c3e1 100644 --- 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 index 2d5a3203..5a20f551 100644 --- 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 index 0b48b712..7cfd5a98 100644 --- 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 index 1ae87f6b..98a782ab 100644 --- 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 new file mode 100644 index 00000000..bb7a333c --- /dev/null +++ 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 index 7762c4a9..cc030211 100644 --- 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 index 5d539c36..2d95d61d 100644 --- 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 index 4967ac0f..11f01082 100644 --- 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 index 943fd8ef..ae2dbe7a 100644 --- 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 index 9414c47e..d94d9844 100644 --- 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 index 49b0ee4f..236ccd31 100644 --- 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 index e666a2ce..54fa5123 100644 --- 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 index 2cab6531..d79c8f5d 100644 --- 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 new file mode 100644 index 00000000..ed3b9ede --- /dev/null +++ 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} +```