From 281fbad7d0b88fd4e49cbc4ae0a8225b32f0c345 Mon Sep 17 00:00:00 2001 From: Yury Uvarov Date: Tue, 7 Nov 2023 12:59:22 +0300 Subject: [PATCH] update docs --- docs/en/reference/additionally/actions.mdx | 44 +++++++++++++++++++ .../reference/main/initialize-and-update.mdx | 13 +++++- docs/en/reference/main/readonly-options.mdx | 13 ++++++ docs/ru/reference/additionally/actions.mdx | 44 +++++++++++++++++++ .../reference/main/initialize-and-update.mdx | 17 +++++-- docs/ru/reference/main/readonly-options.mdx | 13 ++++++ 6 files changed, 138 insertions(+), 6 deletions(-) diff --git a/docs/en/reference/additionally/actions.mdx b/docs/en/reference/additionally/actions.mdx index a9c94110..ada4447e 100644 --- a/docs/en/reference/additionally/actions.mdx +++ b/docs/en/reference/additionally/actions.mdx @@ -197,3 +197,47 @@ This method triggers during the calendar initialization and any changes. It prov - `date` - the full date in the `YYYY-MM-DD` format; - `HTMLElement` - the parent (wrapper) HTML element of the day; - `HTMLButtonElement` - the child (button) HTML element of the day. + +--- + +## actions.hideCalendar() + +`Type: Function` + +`Default: null` + +`Options: hideCalendar(HTMLInputElement, HTMLElement) => void | null` + +```js +new VanillaCalendar('#calendar', { + actions: { + hideCalendar(HTMLInputElement, HTMLElement) {}, + }, +}); +``` + +This method triggers when the calendar is hiding, but only if the `input` parameter is set to `true`. +- `HTMLInputElement` - represents the root HTML element, which is an input field; +- `HTMLElement` - root HTML element of the calendar. + +--- + +## actions.showCalendar() + +`Type: Function` + +`Default: null` + +`Options: showCalendar(HTMLInputElement, HTMLElement) => void | null` + +```js +new VanillaCalendar('#calendar', { + actions: { + showCalendar(HTMLInputElement, HTMLElement) {}, + }, +}); +``` + +This method triggers when displaying the calendar to the user, but only if the `input` parameter is set to `true`. +- `HTMLInputElement` - represents the root HTML element, which is an input field; +- `HTMLElement` - root HTML element of the calendar. diff --git a/docs/en/reference/main/initialize-and-update.mdx b/docs/en/reference/main/initialize-and-update.mdx index e0c516a0..4319433b 100644 --- a/docs/en/reference/main/initialize-and-update.mdx +++ b/docs/en/reference/main/initialize-and-update.mdx @@ -1,4 +1,4 @@ -# Initialization, Update, and Reset +# Initialization, Update, Reset, and Destroy The `init()` method is the main method of the instance, which initiates the calendar's initialization process. @@ -9,7 +9,8 @@ calendar.init(); It's essential to note that you also have the ability to update the calendar with new settings at any time using the `update()` or `reset()` methods. -Unlike `reset()`, the `update()` method preserves the user-selected dates, month, and year after the update. +- The `update()` method allows you to apply new settings to the calendar while preserving the user-selected dates, month, and year after the update. +- The `reset()` method completely resets the calendar to its initial state, discarding any user-selected dates. Example of usage: @@ -21,3 +22,11 @@ calendar.update(); // or calendar.reset(); ``` + +Additionally, if you want to completely remove the calendar instance, you can use the `destroy()` method. + +Example of usage: + +```js +calendar.destroy(); +``` diff --git a/docs/en/reference/main/readonly-options.mdx b/docs/en/reference/main/readonly-options.mdx index 0d1c8fed..89f914b9 100644 --- a/docs/en/reference/main/readonly-options.mdx +++ b/docs/en/reference/main/readonly-options.mdx @@ -20,6 +20,19 @@ The `HTMLElement` property contains the root HTML element in which the calendar - - - +## HTMLOriginalElement + +`Type: HTMLElement` + +```js +const calendar = new VanillaCalendar('#calendar'); +console.log(calendar.HTMLOriginalElement); +``` + +The `HTMLOriginalElement` property contains the original root HTML element without any modifications, in which the calendar was initialized. + +- - - + ## HTMLInputElement `Type: HTMLElement` diff --git a/docs/ru/reference/additionally/actions.mdx b/docs/ru/reference/additionally/actions.mdx index 2375d08f..4f9df625 100644 --- a/docs/ru/reference/additionally/actions.mdx +++ b/docs/ru/reference/additionally/actions.mdx @@ -200,3 +200,47 @@ new VanillaCalendar('#calendar', { - `date` - полная дата в формате `YYYY-MM-DD`; - `HTMLElement` - родительский (обертка) HTML-элемент дня; - `HTMLButtonElement` - дочерний (кнопка) HTML-элемент дня. + +--- + +## actions.hideCalendar() + +`Type: Function` + +`Default: null` + +`Options: hideCalendar(HTMLInputElement, HTMLElement) => void | null` + +```js +new VanillaCalendar('#calendar', { + actions: { + hideCalendar(HTMLInputElement, HTMLElement) {}, + }, +}); +``` + +Этот метод срабатывает при скрытии календаря, но только если для параметра `input` установлено значение `true`. +- `HTMLInputElement` - представляет корневой элемент HTML, который является полем ввода; +- `HTMLElement` - корневой HTML-элемент календаря. + +--- + +## actions.showCalendar() + +`Type: Function` + +`Default: null` + +`Options: showCalendar(HTMLInputElement, HTMLElement) => void | null` + +```js +new VanillaCalendar('#calendar', { + actions: { + showCalendar(HTMLInputElement, HTMLElement) {}, + }, +}); +``` + +Этот метод срабатывает при отображении календаря пользователю, но только если для параметра `input` установлено значение `true`. +- `HTMLInputElement` - представляет корневой элемент HTML, который является полем ввода; +- `HTMLElement` - корневой HTML-элемент календаря. diff --git a/docs/ru/reference/main/initialize-and-update.mdx b/docs/ru/reference/main/initialize-and-update.mdx index ffac64c4..ae1dc804 100644 --- a/docs/ru/reference/main/initialize-and-update.mdx +++ b/docs/ru/reference/main/initialize-and-update.mdx @@ -1,15 +1,16 @@ -# Инициализация, Обновление и Сброс +# Инициализация, Обновление, Сброс и Уничтожение -Метод `init()` - это основной метод экземпляра, который запускает процесс инициализации календаря. +Метод `init()` является основным методом экземпляра, который запускает процесс инициализации календаря. ```js const calendar = new VanillaCalendar(element, params); calendar.init(); ``` -Важно отметить, что вы также имеете возможность обновлять календарь с новыми настройками в любой момент, используя методы `update()` или `reset()`. +Важно отметить, что у вас также есть возможность обновить календарь с новыми настройками в любое время с использованием методов `update()` или `reset()`. -Метод `update()`, в отличие от `reset()`, сохраняет выбранные пользователем даты, месяц и год после обновления. +- Метод `update()` позволяет вам применить новые настройки к календарю, при этом сохраняя выбранные пользователем даты, месяц и год после обновления. +- Метод `reset()` полностью сбрасывает календарь до начального состояния, удаляя выбранные пользователем даты. Пример использования: @@ -21,3 +22,11 @@ calendar.update(); // or calendar.reset(); ``` + +Кроме того, если вам нужно полностью удалить экземпляр календаря, вы можете использовать метод `destroy()`: + +Пример использования: + +```js +calendar.destroy(); +``` diff --git a/docs/ru/reference/main/readonly-options.mdx b/docs/ru/reference/main/readonly-options.mdx index f5ef4b34..3eba9f62 100644 --- a/docs/ru/reference/main/readonly-options.mdx +++ b/docs/ru/reference/main/readonly-options.mdx @@ -20,6 +20,19 @@ console.log(calendar.HTMLElement); - - - +## HTMLOriginalElement + +`Type: HTMLElement` + +```js +const calendar = new VanillaCalendar('#calendar'); +console.log(calendar.HTMLOriginalElement); +``` + +Свойство `HTMLOriginalElement` содержит исходный корневой HTML-элемент без модификаций, в котором был инициализирован календарь. + +- - - + ## HTMLInputElement `Type: HTMLElement`