diff --git a/docs/en/learn/action-handlers/get-and-change-every-day.mdx b/docs/en/learn/action-handlers/get-and-change-every-day.mdx new file mode 100644 index 00000000..8b84cea3 --- /dev/null +++ b/docs/en/learn/action-handlers/get-and-change-every-day.mdx @@ -0,0 +1,7 @@ +# Get and change every day + +By having access to each day, we may post additional information or otherwise change each day on the calendar. + +As an example, let's add a random cost to each day. + + diff --git a/docs/en/reference/additionally/actions.mdx b/docs/en/reference/additionally/actions.mdx index c559a60a..9437be70 100644 --- a/docs/en/reference/additionally/actions.mdx +++ b/docs/en/reference/additionally/actions.mdx @@ -171,5 +171,5 @@ new VanillaCalendar('#calendar', { }); ``` -The method is triggered when the calendar is initialized and the month and year are changed. Allows you to get the necessary information about each day and its HTML element. +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. diff --git a/docs/ru/learn/action-handlers/get-and-change-every-day.mdx b/docs/ru/learn/action-handlers/get-and-change-every-day.mdx new file mode 100644 index 00000000..987f6f9a --- /dev/null +++ b/docs/ru/learn/action-handlers/get-and-change-every-day.mdx @@ -0,0 +1,7 @@ +# Получить и изменить каждый день + +Имея доступ к каждому дню, мы можем публиковать дополнительную информацию или иным образом изменять каждый день в календаре. + +В качестве примера давайте добавим рандомную стоимость к каждому дню. + + diff --git a/docs/ru/reference/additionally/actions.mdx b/docs/ru/reference/additionally/actions.mdx index 9acd40b8..19201cff 100644 --- a/docs/ru/reference/additionally/actions.mdx +++ b/docs/ru/reference/additionally/actions.mdx @@ -174,5 +174,5 @@ new VanillaCalendar('#calendar', { }); ``` -Метод срабатывает при инициализации календаря и изменении месяца и года. Позволяет получить необходимую информацию о каждом дне и его HTML-элементе. +Метод срабатывает при инициализации календаря и любых изменениях. Позволяет получить необходимую информацию о каждом дне и его HTML-элементе. Параметры, которые можно получить: `day` - номер дня, `date` - полная дата в формате `YYYY-MM-DD`, `HTMLElement` - родительский (обертка) HTML-элемент дня, `HTMLButtonElement` - дочерний (кнопка) HTML-элемент дня. diff --git a/examples/action-handlers-get-and-change-every-day.js b/examples/action-handlers-get-and-change-every-day.js new file mode 100644 index 00000000..3d81db8c --- /dev/null +++ b/examples/action-handlers-get-and-change-every-day.js @@ -0,0 +1,23 @@ +import VanillaCalendar from '@uvarov.frontend/vanilla-calendar'; +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'; + +const options = { + actions: { + getDays(day, date, HTMLElement, HTMLButtonElement) { + const randomBoolean = Math.random() < 0.5; + if (!randomBoolean) return; + const randomPrice = Math.floor(Math.random() * (999 - 100 + 1) + 100); + + HTMLButtonElement.style.flexDirection = 'column'; + HTMLButtonElement.innerHTML = ` + ${day} + $${randomPrice} + `; + }, + }, +}; + +const calendar = new VanillaCalendar('#calendar', options); +calendar.init(); diff --git a/examples/type-of-calendar-multiple.js b/examples/type-of-calendar-multiple.js index 807cff01..171e1e82 100644 --- a/examples/type-of-calendar-multiple.js +++ b/examples/type-of-calendar-multiple.js @@ -5,6 +5,8 @@ import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css'; const options = { type: 'multiple', + months: 2, + jumpMonths: 2, }; const calendar = new VanillaCalendar('#calendar', options);