edit docs and examples

uvarov-frontend · Oct 10, 2023 · ed8a095 · ed8a095
1 parent 4b297ca
commit ed8a095
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 38 deletions.
diff --git a/docs/en/reference/additionally/actions.mdx b/docs/en/reference/additionally/actions.mdx
@@ -23,7 +23,11 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-The method is triggered after clicking on a day in the calendar. Parameters that can be received: `e` - mouse event, `dates` - array of selected dates.
+The method is triggered after clicking on a day in the calendar.
+
+Parameters that can be received:
+- `e` - mouse event;
+- `dates` - array of selected dates.
 
 <Info>
   It is important to know that each HTML element of the day that is clicked contains a data attribute, inside which is the full date in the format `YYYY-MM-DD`.
@@ -51,7 +55,13 @@ new VanillaCalendar('#calendar', {
 
 For this method to work, the parameter <a href="/docs/reference/additionally/settings#visibility-weeknumbers">`settings.visibility.weekNumbers`</a> with the value `true` is required.
 
-The method is triggered after clicking on the week number in the calendar. Parameters that can be received: `e` - mouse event, `number` - week number, `days` - array of days (html elements), `year` - year of the week.
+The method is triggered after clicking on the week number in the calendar.
+
+Parameters that can be received:
+- `e` - mouse event;
+- `number` - week number;
+- `days` - array of days (html elements);
+- `year` - year of the week.
 
 ---
 
@@ -71,7 +81,11 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-The method is triggered after selecting a month in the calendar. Parameters that can be received: `e` - mouse event, `month` - selected month number.
+The method is triggered after selecting a month in the calendar.
+
+Parameters that can be received:
+- `e` - mouse event;
+- `month` - selected month number.
 
 ---
 
@@ -91,7 +105,11 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-The method is triggered after selecting a year in the calendar. Parameters that can be received: `e` - mouse event, `year` - selected year.
+The method is triggered after selecting a year in the calendar.
+
+Parameters that can be received:
+- `e` - mouse event;
+- `year` - selected year.
 
 ---
 
@@ -111,7 +129,12 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-The method is triggered after clicking on the arrow. Parameters that can be received: `e` - mouse event, `year` - selected year, `month` - selected month number.
+The method is triggered after clicking on the arrow.
+
+Parameters that can be received:
+- `e` - mouse event;
+- `year` - selected year;
+- `month` - selected month number.
 
 ---
 
@@ -131,7 +154,14 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-The method is triggered after changing the time in any way. The parameters that can be received are: `e` - the change event, `time` - the selected time, `hours` - the selected hour, `minutes` - the selected minutes, `keeping` - the selected AM/PM marker.
+The method is triggered after changing the time in any way.
+
+The parameters that can be received are:
+- `e` - the change event;
+- `time` - the selected time;
+- `hours` - the selected hour;
+- `minutes` - the selected minutes;
+- `keeping` - the selected AM/PM marker.
 
 ## actions.changeToInput()
 
@@ -151,7 +181,15 @@ new VanillaCalendar('#calendar', {
 For this method to work, the parameter <a href="/docs/reference/main/main-settings#input">`input`</a> with the value `true` is required.
 
 The method is triggered after clicking on a day in the calendar or changing the time in any way.
-Parameters that can be received: `e` - event, `calendar` - an object containing `HTMLInputElement`, `HTMLElement` and methods `show()`, `hide()`, `dates` - array of selected dates, `time` - selected time, `hours` - selected hour, `minutes ` is the selected minutes, `keeping` is the selected AM/PM marker.
+
+Parameters that can be received:
+- `e` - event;
+- `calendar` - an object containing `HTMLInputElement`, `HTMLElement` and methods `show()`, `hide()`;
+- `dates` - array of selected dates;
+- `time` - selected time;
+- `hours` - selected hour;
+- `minutes ` is the selected minutes;
+- `keeping` is the selected AM/PM marker.
 
 ---
 
@@ -172,4 +210,9 @@ new VanillaCalendar('#calendar', {
 ```
 
 The method is triggered when the calendar is initialized and any change. Allows you to get the necessary information about each day and its HTML element.
-Parameters that can be obtained: `day` - day number, `date` - full date in `YYYY-MM-DD` format, `HTMLElement` - parent (wrapper) HTML element of the day, `HTMLButtonElement` - child (button) HTML element of the day.
+
+Parameters that can be obtained:
+- `day` - day number;
+- `date` - full date in `YYYY-MM-DD` format;
+- `HTMLElement` - parent (wrapper) HTML element of the day;
+- `HTMLButtonElement` - child (button) HTML element of the day.
diff --git a/docs/ru/reference/additionally/actions.mdx b/docs/ru/reference/additionally/actions.mdx
@@ -1,5 +1,3 @@
-
-
 # Действия
 
 Действия — это своего рода перехватчики событий календаря, они позволяют получить необходимые данные для дальнейшей обработки.
@@ -24,7 +22,11 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-Метод срабатывает после нажатия на день в календаре. Параметры, которые можно получить: `e` - событие мыши, `dates` - массив выбранных дат.
+Метод срабатывает после нажатия на день в календаре.
+
+Параметры, которые можно получить:
+- `e` - событие мыши;
+- `dates` - массив выбранных дат.
 
 <Info>
   Важно знать, что каждый HTML-элемент дня, на который нажали, содержит data-атрибут, внутри которого находится полная дата в формате `YYYY-MM-DD`.
@@ -52,7 +54,13 @@ new VanillaCalendar('#calendar', {
 
 Для работы этого метода, необходим параметр <a href="/docs/reference/additionally/settings#visibility-weeknumbers">`settings.visibility.weekNumbers`</a> со значением `true`.
 
-Метод срабатывает после нажатия на номер недели в календаре. Параметры, которые можно получить: `e` - событие мыши, `number` - номер недели, `days` - массив дней (html-элементов), `year` - год недели.
+Метод срабатывает после нажатия на номер недели в календаре.
+
+Параметры, которые можно получить:
+- `e` - событие мыши;
+- `number` - номер недели;
+- `days` - массив дней (html-элементов);
+- `year` - год недели.
 
 ---
 
@@ -72,7 +80,11 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-Метод срабатывает после выбора месяца в календаре. Параметры, которые можно получить: `e` - событие мыши, `month` - номер выбранного месяца.
+Метод срабатывает после выбора месяца в календаре.
+
+Параметры, которые можно получить:
+- `e` - событие мыши;
+- `month` - номер выбранного месяца.
 
 ---
 
@@ -92,7 +104,11 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-Метод срабатывает после выбора года в календаре. Параметры, которые можно получить: `e` - событие мыши, `year` - выбранный год.
+Метод срабатывает после выбора года в календаре.
+
+Параметры, которые можно получить:
+- `e` - событие мыши;
+- `year` - выбранный год.
 
 ---
 
@@ -112,7 +128,12 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-Метод срабатывает после клика на стрелочку. Параметры, которые можно получить: `e` - событие мыши, `year` - выбранный год, `month` - номер выбранного месяца.
+Метод срабатывает после клика на стрелочку.
+
+Параметры, которые можно получить:
+- `e` - событие мыши;
+- `year` - выбранный год;
+- `month` - номер выбранного месяца.
 
 ---
 
@@ -132,7 +153,14 @@ new VanillaCalendar('#calendar', {
 });
 ```
 
-Метод срабатывает после изменения времени любым способом. Параметры, которые можно получить: `e` - событие change, `time` - выбранное время, `hours` - выбранный час, `minutes` - выбранные минуты,`keeping` - выбранный маркер AM/PM.
+Метод срабатывает после изменения времени любым способом.
+
+Параметры, которые можно получить:
+- `e` - событие change;
+- `time` - выбранное время;
+- `hours` - выбранный час;
+- `minutes` - выбранные минуты;
+- `keeping` - выбранный маркер AM/PM.
 
 ---
 
@@ -154,7 +182,15 @@ new VanillaCalendar('#calendar', {
 Для работы этого метода, необходим параметр <a href="/docs/reference/main/main-settings#input">`input`</a> со значением `true`.
 
 Метод срабатывает после после нажатия на день в календаре или изменения времени любым способом.
-Параметры, которые можно получить: `e` - событие, `calendar` - объект, содержащий `HTMLInputElement`, `HTMLElement` и методы `show()`, `hide()`, `dates` - массив выбранных дат, `time` - выбранное время, `hours` - выбранный час, `minutes` - выбранные минуты,`keeping` - выбранный маркер AM/PM.
+
+Параметры, которые можно получить:
+- `e` - событие;
+- `calendar` - объект, содержащий `HTMLInputElement`, `HTMLElement` и методы `show()`, `hide()`;
+- `dates` - массив выбранных дат;
+- `time` - выбранное время;
+- `hours` - выбранный час;
+- `minutes` - выбранные минуты;
+- `keeping` - выбранный маркер AM/PM.
 
 ---
 
@@ -175,4 +211,9 @@ new VanillaCalendar('#calendar', {
 ```
 
 Метод срабатывает при инициализации календаря и любых изменениях. Позволяет получить необходимую информацию о каждом дне и его HTML-элементе.
-Параметры, которые можно получить: `day` - номер дня, `date` - полная дата в формате `YYYY-MM-DD`, `HTMLElement` - родительский (обертка) HTML-элемент дня, `HTMLButtonElement` - дочерний (кнопка) HTML-элемент дня.
+
+Параметры, которые можно получить:
+- `day` - номер дня;
+- `date` - полная дата в формате `YYYY-MM-DD`;
+- `HTMLElement` - родительский (обертка) HTML-элемент дня;
+- `HTMLButtonElement` - дочерний (кнопка) HTML-элемент дня.
diff --git a/examples/additional-features-date-picker-in-input-div.js b/examples/additional-features-date-picker-in-input-div.js
@@ -3,20 +3,24 @@ import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
 import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
 
+// start irrelevant code
+document.querySelector('#calendar-input-div').style.display = "flex";
+// end irrelevant code
+
 const options = {
   input: true,
   actions: {
-    changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) {
+    changeToInput(e, calendar, dates, time, hours, minutes, keeping) {
       if (dates[0]) {
-        HTMLInputElement.innerHTML = dates[0];
+        calendar.HTMLInputElement.innerHTML = dates[0];
         // if you want to hide the calendar after picking a date
-        calendar.HTMLElement.classList.add('vanilla-calendar_hidden');
+        calendar.hide();
       } else {
-        HTMLInputElement.innerHTML = '';
+        calendar.HTMLInputElement.innerHTML = '';
       }
     },
   },
 };
 
-const calendar = new VanillaCalendar('#calendar-input-div', options);
-calendar.init();
+const calendarInput = new VanillaCalendar('#calendar-input-div', options);
+calendarInput.init();
diff --git a/examples/additional-features-date-picker-in-input-multiple.js b/examples/additional-features-date-picker-in-input-multiple.js
@@ -3,6 +3,10 @@ import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
 import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
 
+// start irrelevant code
+document.querySelector('#calendar-input').style.display = "flex";
+// end irrelevant code
+
 const options = {
   input: true,
   type: 'multiple',
@@ -18,18 +22,18 @@ const options = {
     },
   },
   actions: {
-    changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) {
+    changeToInput(e, calendar, dates, time, hours, minutes, keeping) {
       if (dates[1]) {
         dates.sort((a, b) => +new Date(a) - +new Date(b));
-        HTMLInputElement.value = `${dates[0]} — ${dates[dates.length - 1]}`;
+        calendar.HTMLInputElement.value = `${dates[0]} — ${dates[dates.length - 1]}`;
       } else if (dates[0]) {
-        HTMLInputElement.value = dates[0];
+        calendar.HTMLInputElement.value = dates[0];
       } else {
-        HTMLInputElement.value = '';
+        calendar.HTMLInputElement.value = '';
       }
     },
   },
 };
 
-const calendar = new VanillaCalendar('#calendar-input', options);
-calendar.init();
+const calendarInput = new VanillaCalendar('#calendar-input', options);
+calendarInput.init();
diff --git a/examples/additional-features-date-picker-in-input.js b/examples/additional-features-date-picker-in-input.js
@@ -3,20 +3,25 @@ import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
 import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
 
+// start irrelevant code
+document.querySelector('#calendar-input').style.display = "flex";
+// end irrelevant code
+
 const options = {
   input: true,
   actions: {
-    changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) {
+    changeToInput(e, calendar, dates, time, hours, minutes, keeping) {
       if (dates[0]) {
-        HTMLInputElement.value = dates[0];
+        calendar.HTMLInputElement.value = dates[0];
         // if you want to hide the calendar after picking a date
-        calendar.HTMLElement.classList.add('vanilla-calendar_hidden');
+        calendar.hide();
       } else {
-        HTMLInputElement.value = '';
+        calendar.HTMLInputElement.value = "";
       }
-    },
-  },
+    }
+  }
 };
 
-const calendar = new VanillaCalendar('#calendar-input', options);
-calendar.init();
+const calendarInput = new VanillaCalendar("#calendar-input", options);
+calendarInput.init();
+