`. In **«Input»**, you can initialize any type of calendar.
+
+
+By default, the calendar does not write any values to the **«Input»** field, giving you unique control over what you want to see in the `value`.
+
+
diff --git a/docs/en/learn/type-month.mdx b/docs/en/learn/type-month.mdx
new file mode 100644
index 00000000..f830fe23
--- /dev/null
+++ b/docs/en/learn/type-month.mdx
@@ -0,0 +1,11 @@
+---
+title: Month
+description: Learn how to use the 'month' calendar type to display a list of months and select months and years. Restrict the user's selection to only the month and year.
+section: 2. Calendar Types
+---
+
+# Month
+
+The `'month'` calendar type displays a list of months and allows the user to select months and years from the respective headers. This mode is useful if you need to restrict the user's selection to only the month and year, without the ability to select specific days.
+
+
diff --git a/docs/en/learn/type-multiple.mdx b/docs/en/learn/type-multiple.mdx
new file mode 100644
index 00000000..d0768dcb
--- /dev/null
+++ b/docs/en/learn/type-multiple.mdx
@@ -0,0 +1,19 @@
+---
+title: Multiple
+description: Learn how to use the 'multiple' calendar type to display multiple months and select dates. Configure the selection of date ranges with the selectionDatesMode parameter.
+section: 2. Calendar Types
+---
+
+# Multiple
+
+The `'multiple'` calendar type displays multiple months, allowing you to select days in each of them. This type of calendar is useful when the user needs to select multiple dates across different months. To do this, you need to use the `selectionDatesMode` parameter and set its value to `'multiple'`.
+
+Example code for creating a calendar with the `'multiple'` type:
+
+
+
+If you need to select date ranges, you can use the `selectionDatesMode` parameter and set its value to `'multiple-ranged'`. This allows you to select date ranges instead of individual days.
+
+
When the `selectionDatesMode` parameter is set to `'multiple-ranged'`, for performance optimization, the array of selected dates contains only the start and end dates. You can disable this and get the full list of selected dates using `enableEdgeDatesOnly`.
+
+
diff --git a/docs/en/learn/type-year.mdx b/docs/en/learn/type-year.mdx
new file mode 100644
index 00000000..9e53ac24
--- /dev/null
+++ b/docs/en/learn/type-year.mdx
@@ -0,0 +1,11 @@
+---
+title: Year
+description: Learn how to use the 'year' calendar type to display a list of years and select the year and month. Restrict the user's selection to only the year and month.
+section: 2. Calendar Types
+---
+
+# Year
+
+The `'year'` calendar type displays a list of years, allowing the user to select a year from the list and a month from the corresponding header. This mode is useful if you need to restrict the user's selection to only the year and month, excluding the ability to select specific days.
+
+
diff --git a/docs/en/learn/types-of-calendars/default.mdx b/docs/en/learn/types-of-calendars/default.mdx
deleted file mode 100644
index 9d1844ce..00000000
--- a/docs/en/learn/types-of-calendars/default.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-# Default (Single)
-
-The calendar type `'default'` displays a single month, allows you to select days, navigate between months using arrows, and choose a month and year from the respective headers. This is the standard calendar display mode.
-
-
diff --git a/docs/en/learn/types-of-calendars/month.mdx b/docs/en/learn/types-of-calendars/month.mdx
deleted file mode 100644
index 7ac0240e..00000000
--- a/docs/en/learn/types-of-calendars/month.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-# Month
-
-The calendar type `'month'` displays a list of months and allows the user to select months and years from the respective headers. This mode is useful if you need to limit the user's selection to only the month and year, without the ability to choose specific days.
-
-
diff --git a/docs/en/learn/types-of-calendars/multiple.mdx b/docs/en/learn/types-of-calendars/multiple.mdx
deleted file mode 100644
index 5a81c336..00000000
--- a/docs/en/learn/types-of-calendars/multiple.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-# Multiple
-
-The calendar type `'multiple'` displays multiple months, allowing you to select days in each of them. This calendar type is useful when a user needs to choose multiple dates in different months, but for this, you need to use the `settings.selection.day` parameter and set its value to `'multiple'`.
-
-Example code for creating a calendar with the type `'multiple'`.
-
-
-
-If you need to select date ranges in each month, you can use the `settings.selection.day` parameter and set its value to `'multiple-ranged'`. This allows you to select date ranges, not just individual days.
-
-
diff --git a/docs/en/learn/types-of-calendars/year.mdx b/docs/en/learn/types-of-calendars/year.mdx
deleted file mode 100644
index c13f6136..00000000
--- a/docs/en/learn/types-of-calendars/year.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-# Year
-
-The calendar type `'year'` displays a list of years, allowing the user to choose a year from the list and select a month from the respective header. This mode is useful if you need to limit the user's selection to only the year and month, excluding the ability to choose specific days.
-
-
diff --git a/docs/en/reference.mdx b/docs/en/reference.mdx
new file mode 100644
index 00000000..8b079ece
--- /dev/null
+++ b/docs/en/reference.mdx
@@ -0,0 +1,19 @@
+---
+title: Guide Overview
+description: Page Description
+---
+
+# Guide Overview
+
+This section provides detailed documentation on working with the **Vanilla Calendar Pro API**. If you're looking for an introduction to the features, please check out the [«Learn»](/docs/learn) section.
+
+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.
diff --git a/docs/en/reference/actions.mdx b/docs/en/reference/actions.mdx
new file mode 100644
index 00000000..35848d60
--- /dev/null
+++ b/docs/en/reference/actions.mdx
@@ -0,0 +1,379 @@
+---
+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
+---
+
+# Actions
+
+## onClickDate()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onClickDate(self, event) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onClickDate(self, event) {},
+});
+```
+
+This method is triggered after clicking on a day in the calendar. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `event` - mouse event.
+
+
+ It is important to know that each HTML day element contains a data attribute with the full date in the format `YYYY-MM-DD`.
+ If you need to get the day, month, and year separately, you can use standard JS methods.
+ For example: `new Date('2022-11-07').getDate()` will return `7`.
+
+
+---
+
+## onClickWeekDay()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onClickWeekDay(self, day, dateEls, event) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onClickWeekDay(self, day, dateEls, event) {},
+});
+```
+
+This method is triggered after clicking on a weekday in the calendar. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `number` - week number;
+- `days` - array of days (html elements);
+- `year` - year of the week;
+- `event` - mouse event.
+
+---
+
+## onClickWeekNumber()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onClickWeekNumber(self, number, year, dateEls, event) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onClickWeekNumber(self, number, year, dateEls, event) {},
+});
+```
+
+This method is triggered after clicking on a week number in the calendar, but for it to work, the `enableWeekNumbers` parameter must be set to `true`. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `number` - week number;
+- `days` - array of days (html elements);
+- `year` - year of the week;
+- `event` - mouse event.
+
+---
+
+## onClickTitle()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onClickTitle(self, event) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onClickTitle(self, event) {},
+});
+```
+
+This method is triggered after clicking on the month or year title in the calendar. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `event` - mouse event.
+
+---
+
+## onClickMonth()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onClickMonth(self, event) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onClickMonth(self, event) {},
+});
+```
+
+This method is triggered after selecting a month in the calendar. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `event` - mouse event.
+
+---
+
+## onClickYear()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onClickYear(self, event) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onClickYear(self, event) {},
+});
+```
+
+This method is triggered after selecting a year in the calendar. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `event` - mouse event.
+
+---
+
+## onClickArrow()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onClickArrow(self, event) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onClickArrow(self, event) {},
+});
+```
+
+This method is triggered after clicking on an arrow in the calendar. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `event` - mouse event.
+
+---
+
+## onChangeTime()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onChangeTime(self, event, isError) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onChangeTime(self, event) {},
+});
+```
+
+This method is triggered after changing the time in the calendar. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `event` - change event;
+- `isError` - returns true if the user entered an incorrect time.
+
+---
+
+## onChangeToInput()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onChangeToInput(self, event) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onChangeToInput(self, event) {},
+});
+```
+
+For this method to work, the `inputMode` parameter must be set to `true`.
+This method is triggered after clicking on a day in the calendar or changing the time in any way.
+You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `event` - event.
+
+---
+
+## onCreateDateRangeTooltip()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) {},
+});
+```
+
+Allows creating a tooltip for a date range. Triggers on clicking and hovering over a day if the `selectionDatesMode` parameter is set to `'multiple-ranged'`.
+You can get the following parameters:
+- `self` - reference to the initialized calendar.
+- `dateEl` - HTML date element;
+- `tooltipEl` - HTML tooltip element;
+- `dateElBCR` - object with information about the position and size of the HTML date element;
+- `mainElBCR` - object with information about the position and size of the main HTML calendar element.
+
+---
+
+## onCreateDateEls()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onCreateDateEls(self, dateEl) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onCreateDateEls(self, dateEl) {},
+});
+```
+
+This method is triggered during calendar initialization and any changes. It provides access to information about each day. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `dateEl` - HTML date element.
+
+---
+
+## onCreateMonthEls()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onCreateMonthEls(self, monthEl) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onCreateMonthEls(self, monthEl) {},
+});
+```
+
+This method is triggered when the calendar type is set to `'month'`. The calendar type also becomes `'month'` when the user clicks on the month title or during initialization with the parameter `type = 'month'`. It provides access to information about each month. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `monthEl` - HTML month element.
+
+---
+
+## onCreateYearEls()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onCreateYearEls(self, yearEl) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onCreateYearEls(self, yearEl) {},
+});
+```
+
+This method is triggered when the calendar type is set to `'year'`. The calendar type becomes `'year'` when the user clicks on the year title or during initialization with the parameter `type = 'year'`. It provides access to information about each year. You can get the following parameters:
+- `self` - reference to the initialized calendar;
+- `yearEl` - HTML year element.
+
+---
+
+## onInit()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onInit(self) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onInit(self) {},
+});
+```
+
+This method is triggered during calendar initialization. If the `inputMode` parameter is set to `true`, the method will execute on the first display of the calendar, as this is when the calendar is initialized.
+- `self` - reference to the initialized calendar.
+
+---
+
+## onUpdate()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onUpdate(self) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onUpdate(self) {},
+});
+```
+
+This method is triggered when the calendar is updated/reset using the `.update()` method.
+- `self` - reference to the initialized calendar.
+
+---
+
+## onDestroy()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onDestroy(self) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onDestroy(self) {},
+});
+```
+
+This method is triggered when the calendar is destroyed.
+- `self` - reference to the initialized calendar.
+
+---
+
+## onShow()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onShow(self) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onShow(self) {},
+});
+```
+
+This method is triggered when the calendar is displayed to the user, but only if the `inputMode` parameter is set to `true`.
+- `self` - reference to the initialized calendar.
+
+---
+
+## onHide()
+
+`Type: Function`
+
+`Default: null`
+
+`Options: onHide(self) => void | null`
+
+```ts
+new Calendar('#calendar', {
+ onHide(self) {},
+});
+```
+
+This method is triggered when the calendar is hidden, but only if the `inputMode` parameter is set to `true`.
+- `self` - reference to the initialized calendar.
diff --git a/docs/en/reference/additionally/actions.mdx b/docs/en/reference/additionally/actions.mdx
deleted file mode 100644
index f07610f7..00000000
--- a/docs/en/reference/additionally/actions.mdx
+++ /dev/null
@@ -1,348 +0,0 @@
-# Actions
-
-Actions in VanillaCalendar are event handlers that allow you to receive and process various interaction data with the calendar.
-
-
- Starting from version 2.9.0, all methods contain `self` - a link to the initialized calendar. This allows you to obtain the maximum amount of data. `self` contains all the [read-only parameters](/docs/reference/main/readonly-options) and more.
-
-
-
- Note that month numbering starts from `0`, so December is the 11th month. This is related to the behavior of the standard JavaScript method `.getMonth()`.
-
-
-## actions.clickDay()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: clickDay(e, self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- clickDay(e, self) {},
- },
-});
-```
-
-This method triggers after clicking on a day in the calendar. You can get the following parameters:
-- `e` - the mouse event;
-- `self` - reference to the initialized calendar.
-
-
- It's important to know that each HTML element of the day you clicked on contains a data attribute that holds the full date in the `YYYY-MM-DD` format. If you need to get the day, month, and year separately, you can use standard JavaScript methods. For example, `new Date('2022-11-07').getDate()` will return `7`.
-
-
----
-
-## actions.clickWeekNumber()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: clickWeekNumber(e, number, days, year, self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- clickWeekNumber(e, number, days, year, self) {},
- },
-});
-```
-
-This method triggers after clicking on the week number in the calendar, but it requires the
`settings.visibility.weekNumbers` parameter to be set to true. You can get the following parameters:
-- `e` - the mouse event;
-- `number` - the week number;
-- `days` - an array of days (HTML elements);
-- `year` - the year of the week.
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.clickMonth()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: clickMonth(e, self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- clickMonth(e, self) {},
- },
-});
-```
-
-This method triggers after selecting a month in the calendar. You can get the following parameters:
-- `e` - the mouse event;
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.clickYear()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: clickYear(e, self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- clickYear(e, self) {},
- },
-});
-```
-
-This method triggers after selecting a year in the calendar. You can get the following parameters:
-- `e` - the mouse event;
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.clickArrow()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: clickArrow(e, self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- clickArrow(e, self) {},
- },
-});
-```
-
-This method triggers after clicking the arrow in the calendar. You can get the following parameters:
-- `e` - the mouse event;
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.changeTime()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: changeTime(e, self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- changeTime(e, self) {},
- },
-});
-```
-
-This method triggers after changing the time in the calendar. You can get the following parameters:
-- `e` - the change event;
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.changeToInput()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: changeToInput(e, self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- changeToInput(e, self) {},
- },
-});
-```
-
-To use this method, you need the
`input` parameter set to `true`.
-This method triggers after clicking on a day in the calendar or changing the time in any way.
-You can get the following parameters:
-- `e` - the event;
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.getDays()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: getDays(day, date, HTMLElement, HTMLButtonElement, self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- getDays(day, date, HTMLElement, HTMLButtonElement, self) {},
- },
-});
-```
-
-This method triggers during the calendar initialization and any changes. It provides access to information about each day and its HTML element. You can get the following parameters:
-- `day` - the day number;
-- `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.
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.getMonths()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: getMonths(month: number, HTMLElement: HTMLElement, self: IVanillaCalendar) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- getMonths(month, HTMLElement, self) {},
- },
-});
-```
-
-This method is triggered when the calendar type is set to `'month'`. The calendar type also becomes `'month'` when the user clicks on the month header or during initialization with the `type = 'month'` parameter. It provides access to information about each month and its HTML element. You can retrieve the following parameters:
-- `month` - month number (starts at 0);
-- `HTMLElement` - HTML element of the month;
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.getYears()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: getYears(year: number, HTMLElement: HTMLElement, self: IVanillaCalendar) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- getYears(year, HTMLElement, self) {},
- },
-});
-```
-
-This method is triggered when the calendar type is set to `'year'`. The calendar type becomes `'year'` when the user clicks on the year header or during initialization with the `type = 'year'` parameter. It provides access to information about each year and its HTML element. You can retrieve the following parameters:
-- `year` - year number;
-- `HTMLElement` - HTML element of the year;
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.hideCalendar()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: hideCalendar(self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- hideCalendar(self) {},
- },
-});
-```
-
-This method triggers when the calendar is hiding, but only if the
`input` parameter is set to `true`.
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.showCalendar()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: showCalendar(self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- showCalendar(self) {},
- },
-});
-```
-
-This method triggers when displaying the calendar to the user, but only if the
`input` parameter is set to `true`.
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.initCalendar()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: initCalendar(self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- initCalendar(self) {},
- },
-});
-```
-
-This method is triggered during the initialization of the calendar. If the value true is set for the
`input` parameter, the method will execute upon the first display of the calendar, as the calendar is initialized at that moment.
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.updateCalendar()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: updateCalendar(self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- updateCalendar(self) {},
- },
-});
-```
-
-This method is triggered when the calendar is updated/reset.
-- `self` - reference to the initialized calendar.
-
----
-
-## actions.destroyCalendar()
-
-`Type: Function`
-
-`Default: null`
-
-`Options: destroyCalendar(self) => void | null`
-
-```js
-new VanillaCalendar('#calendar', {
- actions: {
- destroyCalendar(self) {},
- },
-});
-```
-
-This method is triggered upon destruction of the calendar.
-- `self` - reference to the initialized calendar.
diff --git a/docs/en/reference/additionally/css-classes.mdx b/docs/en/reference/additionally/css-classes.mdx
deleted file mode 100644
index 228fefe4..00000000
--- a/docs/en/reference/additionally/css-classes.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
-# CSS Classes
-
-`CSSClasses` provide the ability to override any CSS class within the calendar. Below is a list of all the default classes.
-
-```js
-new VanillaCalendar('#calendar', {
- CSSClasses: {
- calendar: 'vanilla-calendar',
- calendarDefault: 'vanilla-calendar_default',
- calendarMultiple: 'vanilla-calendar_multiple',
- calendarMonth: 'vanilla-calendar_month',
- calendarYear: 'vanilla-calendar_year',
- calendarHidden: 'vanilla-calendar_hidden',
- calendarToInput: 'vanilla-calendar_to-input',
- controls: 'vanilla-calendar-controls',
- grid: 'vanilla-calendar-grid',
- gridDisabled: 'vanilla-calendar-grid_disabled',
- column: 'vanilla-calendar-column',
- columnMonth: 'vanilla-calendar-column_month',
- columnYear: 'vanilla-calendar-column_year',
- header: 'vanilla-calendar-header',
- headerContent: 'vanilla-calendar-header__content',
- month: 'vanilla-calendar-month',
- monthDisabled: 'vanilla-calendar-month_disabled',
- year: 'vanilla-calendar-year',
- yearDisabled: 'vanilla-calendar-year_disabled',
- arrow: 'vanilla-calendar-arrow',
- arrowPrev: 'vanilla-calendar-arrow_prev',
- arrowNext: 'vanilla-calendar-arrow_next',
- wrapper: 'vanilla-calendar-wrapper',
- content: 'vanilla-calendar-content',
- week: 'vanilla-calendar-week',
- weekDay: 'vanilla-calendar-week__day',
- weekDayWeekend: 'vanilla-calendar-week__day_weekend',
- days: 'vanilla-calendar-days',
- daysSelecting: 'vanilla-calendar-days_selecting',
- months: 'vanilla-calendar-months',
- monthsSelecting: 'vanilla-calendar-months_selecting',
- monthsMonth: 'vanilla-calendar-months__month',
- monthsMonthSelected: 'vanilla-calendar-months__month_selected',
- monthsMonthDisabled: 'vanilla-calendar-months__month_disabled',
- years: 'vanilla-calendar-years',
- yearsSelecting: 'vanilla-calendar-years_selecting',
- yearsYear: 'vanilla-calendar-years__year',
- yearsYearSelected: 'vanilla-calendar-years__year_selected',
- yearsYearDisabled: 'vanilla-calendar-years__year_disabled',
- time: 'vanilla-calendar-time',
- timeContent: 'vanilla-calendar-time__content',
- timeHours: 'vanilla-calendar-time__hours',
- timeMinutes: 'vanilla-calendar-time__minutes',
- timeKeeping: 'vanilla-calendar-time__keeping',
- timeRanges: 'vanilla-calendar-time__ranges',
- timeRange: 'vanilla-calendar-time__range',
- day: 'vanilla-calendar-day',
- daySelected: 'vanilla-calendar-day_selected',
- daySelectedFirst: 'vanilla-calendar-day_selected-first',
- daySelectedLast: 'vanilla-calendar-day_selected-last',
- daySelectedIntermediate: 'vanilla-calendar-day_selected-intermediate',
- dayPopup: 'vanilla-calendar-day__popup',
- dayBtn: 'vanilla-calendar-day__btn',
- dayBtnPrev: 'vanilla-calendar-day__btn_prev',
- dayBtnNext: 'vanilla-calendar-day__btn_next',
- dayBtnToday: 'vanilla-calendar-day__btn_today',
- dayBtnSelected: 'vanilla-calendar-day__btn_selected',
- dayBtnHover: 'vanilla-calendar-day__btn_hover',
- dayBtnDisabled: 'vanilla-calendar-day__btn_disabled',
- dayBtnIntermediate: 'vanilla-calendar-day__btn_intermediate',
- dayBtnWeekend: 'vanilla-calendar-day__btn_weekend',
- dayBtnHoliday: 'vanilla-calendar-day__btn_holiday',
- weekNumbers: 'vanilla-calendar-week-numbers',
- weekNumbersTitle: 'vanilla-calendar-week-numbers__title',
- weekNumbersContent: 'vanilla-calendar-week-numbers__content',
- weekNumber: 'vanilla-calendar-week-number',
- isFocus: 'vanilla-calendar-is-focus',
- },
-});
-```
diff --git a/docs/en/reference/additionally/dom-templates.mdx b/docs/en/reference/additionally/dom-templates.mdx
deleted file mode 100644
index 16adf322..00000000
--- a/docs/en/reference/additionally/dom-templates.mdx
+++ /dev/null
@@ -1,154 +0,0 @@
-# DOM Templates
-
-DOM templates allow you to customize the DOM structure of the calendar almost entirely and add your own HTML elements, such as buttons. Each
calendar type has its own default template, and you can customize each of them.
-
-
- Tags containing the **«#»** symbol are registered calendar components and should have a closing forward slash at the end of the tag, except for the **\<#Multiple>\<#/Multiple>** tag, which wraps a single month.
- The default templates list all possible components for that template.
-
-
-## DOMTemplates.default
-
-`Type: String`
-
-`Default: string`
-
-`Options: string`
-
-```js
-new VanillaCalendar('#calendar', {
- DOMTemplates: {
- default: `
-
-
- <#WeekNumbers />
-
- <#Week />
- <#Days />
-
-
- <#ControlTime />
- `
- }
-});
-```
-
-This is the default template for displaying a single month and its dates.
-
----
-
-## DOMTemplates.multiple
-
-`Type: String`
-
-`Default: string`
-
-`Options: string`
-
-```js
-new VanillaCalendar('#calendar', {
- DOMTemplates: {
- multiple: `
-
- <#ArrowPrev />
- <#ArrowNext />
-
-
- <#Multiple>
-
-
-
- <#WeekNumbers />
-
- <#Week />
- <#Days />
-
-
-
- <#/Multiple>
-
- <#ControlTime />
- `
- }
-});
-```
-
-This is the default template for displaying multiple months and their dates.
-
----
-
-## DOMTemplates.month
-
-`Type: String`
-
-`Default: string`
-
-`Options: string`
-
-```js
-new VanillaCalendar('#calendar', {
- DOMTemplates: {
- month: `
-
-
- `
- }
-});
-```
-
-This is the default template for selecting a month.
-
----
-
-## DOMTemplates.year
-
-`Type: String`
-
-`Default: string`
-
-`Options: string`
-
-```js
-new VanillaCalendar('#calendar', {
- DOMTemplates: {
- year: `
-
-
- `
- }
-});
-```
-
-This is the default template for selecting a year.
diff --git a/docs/en/reference/additionally/localization.mdx b/docs/en/reference/additionally/localization.mdx
deleted file mode 100644
index 82cc988e..00000000
--- a/docs/en/reference/additionally/localization.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-# Localization
-
-The top-level `locale` key is used for manual localization of the calendar. This key works only if the `settings.lang` parameter is set to `'define'`. `locale` allows you to set your own names for months and weekdays.
-
-
- If your language tag is supported by the `.toLocaleString()` method, you can pass that language tag to the `settings.lang` parameter without the need for manual localization.
- You can find information about your language tag support here (BCP 47).
-
-
-The `locale` key contains two sub-keys: `months` and `weekday`. Both of these keys take an array of strings.
-**Both keys are required** if the `settings.lang` parameter is set to `'define'`.
-
-## locale.months
-
-`Type: String[]`
-
-`Default: []`
-
-`Options: String[] | []`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- lang: 'define',
- },
- locale: {
- months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
- },
-});
-```
-
-## locale.weekday
-
-`Type: String[]`
-
-`Default: []`
-
-`Options: String[] | []`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- lang: 'define',
- },
- locale: {
- weekday: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
- },
-});
-```
diff --git a/docs/en/reference/additionally/pop-ups.mdx b/docs/en/reference/additionally/pop-ups.mdx
deleted file mode 100644
index 30f5487f..00000000
--- a/docs/en/reference/additionally/pop-ups.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-# Popups
-
-Popups allow you to highlight any day and display brief information about it directly in the calendar when you hover over that day.
-
-## popups['date']
-
-`Type: String`
-
-`Default: null`
-
-`Options: 'YYYY-MM-DD': | null`
-
-```js
-new VanillaCalendar('#calendar', {
- popups: {
- '2022-06-28': {},
- }
-});
-```
-
-Use dates in the format `YYYY-MM-DD` as the key. In the example provided, a popup is set for June 28, 2022.
-
----
-
-## popups['date'].modifier
-
-`Type: String`
-
-`Default: null`
-
-`Options: CSS classes | null`
-
-```js
-new VanillaCalendar('#calendar', {
- popups: {
- '2022-06-28': {
- modifier: 'bg-red color-pink',
- },
- }
-});
-```
-
-The `modifier` accepts arbitrary CSS classes separated by spaces. You can use these classes to style the date, making it stand out or changing its appearance.
-
----
-
-## popups['date'].html
-
-`Type: String`
-
-`Default: null`
-
-`Options: '' | HTML | null`
-
-```js
-new VanillaCalendar('#calendar', {
- popups: {
- '2022-06-28': {
- modifier: 'bg-red color-pink',
- html: `
-
12:00 PM
-
Airplane in Las Vegas
-
`,
- // or just text
- // html: 'Airplane in Las Vegas',
- },
- }
-});
-```
-
-The `html` accepts plain text or HTML markup for styling the popup.
-In this example, hovering over June 28, 2022, will display a popup with the text "Airplane in Las Vegas" and the time "12:00 PM," and it will apply the styles specified in the `bg-red` and `color-pink` classes.
diff --git a/docs/en/reference/additionally/settings.mdx b/docs/en/reference/additionally/settings.mdx
deleted file mode 100644
index 115c8643..00000000
--- a/docs/en/reference/additionally/settings.mdx
+++ /dev/null
@@ -1,774 +0,0 @@
-# Settings
-
-The top-level `settings` key contains a set of parameters that define the calendar's configuration.
-
-## settings.lang
-
-`Type: String`
-
-`Default: 'en'`
-
-`Options: Language label | 'define'`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- lang: 'en',
- },
-});
-```
-
-This parameter sets the language localization of the calendar.
-You can specify a language label according to
BCP 47 or use `'define'` to customize your own month and weekday names, see
`locale` for more details.
-
----
-
-## settings.iso8601
-
-`Type: Boolean`
-
-`Default: true`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- iso8601: true,
- },
-});
-```
-
-This parameter sets the start of the week in accordance with the international standard ISO 8601. If set to `'false'`, the week will start on Sunday; otherwise, it starts on Monday.
-
----
-
-## settings.range.min
-
-`Type: String`
-
-`Default: '1970-01-01'`
-
-`Options: 'YYYY-MM-DD' | 'today'`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- range: {
- min: '2022-07-01',
- // or
- min: 'today',
- }
- },
-});
-```
-
-This parameter sets the minimum date that the user can choose. Dates earlier than the specified date will be disabled and not available for selection.
-
-
- It's important to note that `settings.range.min` and `settings.range.max` disable dates outside the range, while `date.min` and `date.max` do not even create them.
-
-
-
- You can provide `'today'` as a shortcut to `settings.range.min` and/or `settings.range.max`.
-
-
----
-
-## settings.range.max
-
-`Type: String`
-
-`Default: '2470-12-31'`
-
-`Options: 'YYYY-MM-DD' | 'today'`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- range: {
- max: '2024-07-01',
- // or
- max: 'today',
- }
- },
-});
-```
-
-This parameter sets the maximum date that the user can choose. Dates later than the specified date will be disabled and not available for selection.
-
-
- It's important to note that `settings.range.min` and `settings.range.max` disable dates outside the range, while `date.min` and `date.max` do not even create them.
-
-
-
- You can provide `'today'` as a shortcut to `settings.range.min` and/or `settings.range.max`.
-
-
----
-
-## settings.range.edgesOnly
-
-`Type: Boolean`
-
-`Default: false`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- range: {
- edgesOnly: true,
- }
- },
-});
-```
-
-This parameter will keep references of the date range edges only, which are the Start and End dates in `settings.selected.dates` but nothing in between the range. It only works when
`settings.selection.day` is set to `'multiple-ranged'`.
-
-
- It's important to note that with this setting, disabling dates within the date range will have no effect. So make sure to use this parameter when you are interested with only the start and end date but nothing in-between.
-
-
----
-
-## settings.range.disablePast
-
-`Type: Boolean`
-
-`Default: false`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- range: {
- disablePast: true,
- }
- },
-});
-```
-
-This parameter disables all past days.
-
----
-
-## settings.range.disableGaps
-
-`Type: Boolean`
-
-`Default: false`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- range: {
- disableGaps: true,
- }
- },
-});
-```
-
-This parameter disables the selection of days within a range with disabled dates. It only works when
`settings.selection.day` is set to `'multiple-ranged'`.
-
----
-
-## settings.range.disableAllDays
-
-`Type: Boolean`
-
-`Default: false`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- range: {
- disableAllDays: true,
- }
- },
-});
-```
-
-This parameter disables all days and can be useful when using
`settings.range.enabled`.
-
----
-
-## settings.range.disableWeekday
-
-`Type: Number[]`
-
-`Default: []`
-
-`Options: number[] | []`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- range: {
- disableWeekday: [0, 6],
- }
- },
-});
-```
-
-This parameter allows you to disable specified weekdays. Specify an array with numbers, where each number represents a day of the week. For example, `0` is Sunday.
-
----
-
-## settings.range.disabled
-
-`Type: String[] | Number[] | Date[]`
-
-`Default: null`
-
-`Options: ['YYYY-MM-DD'] | [Number] | [Date] | null`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- range: {
- disabled: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
- }
- },
-});
-```
-
-This parameter allows you to disable specific dates regardless of the specified range.
-
-
- To specify a range dates, use any delimiter between dates within a single string.
-
-
----
-
-## settings.range.enabled
-
-`Type: String[] | Number[] | Date[]`
-
-`Default: null`
-
-`Options: ['YYYY-MM-DD'] | [Number] | [Date] | null`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- range: {
- enabled: ['2022-08-11:2022-08-16', '2022-08-20', 1722152977141, new Date()],
- }
- },
-});
-```
-
-This parameter allows you to enable specific dates regardless of the range and disabled dates.
-
-
- To specify a range dates, use any delimiter between dates within a single string.
-
-
----
-
-## settings.selection.day
-
-`Type: String | false`
-
-`Default: 'single'`
-
-`Options: 'single' | 'multiple' | 'multiple-ranged' | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selection: {
- day: 'single',
- },
- },
-});
-```
-
-This parameter determines whether it's allowed to select one or multiple days, or if day selection is completely disabled.
-
----
-
-## settings.selection.month
-
-`Type: Boolean`
-
-`Default: true`
-
-`Options: true | false | 'only-arrows'`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selection: {
- month: false,
- },
- },
-});
-```
-
-This parameter allows you to disable the selection of months, allow switching between months only using arrows, or allow switching between months in any way.
-
----
-
-## settings.selection.year
-
-`Type: Boolean`
-
-`Default: true`
-
-`Options: true | false | 'only-arrows'`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selection: {
- year: false,
- },
- },
-});
-```
-
-This parameter allows you to disable the selection of years, allow switching between years only using arrows, or allow switching between years in any way.
-
----
-
-## settings.selection.time
-
-`Type: Boolean | Number`
-
-`Default: false`
-
-`Options: true (it is 12) | false | 24 | 12`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selection: {
- time: true,
- },
- },
-});
-```
-
-This parameter enables time selection. You can also specify the time format using a boolean value or a number: 24-hour or 12-hour format.
-
----
-
-## settings.selection.controlTime
-
-`Type: String`
-
-`Default: 'all'`
-
-`Options: 'all' | 'range'`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selection: {
- controlTime: 'all',
- },
- },
-});
-```
-
-This parameter determines how time selection is allowed: `'all'` (any method) or `'range'` (only with the controller).
-
----
-
-## settings.selection.stepHours
-
-`Type: Number`
-
-`Default: 1`
-
-`Options: Number (from 1 to 23)`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selection: {
- stepHours: 1,
- },
- },
-});
-```
-
-This parameter sets the step for the hour controller. You can choose any number from 1 to 23.
-
----
-
-## settings.selection.stepMinutes
-
-`Type: Number`
-
-`Default: 1`
-
-`Options: Number (from 1 to 59)`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selection: {
- stepMinutes: 1,
- },
- },
-});
-```
-
-This parameter sets the step for the minute controller. You can choose any number from 1 to 59.
-
----
-
-## settings.selection.cancelableDay
-
-`Type: Number`
-
-`Default: true`
-
-`Options: boolean`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selection: {
- cancelableDay: false,
- },
- },
-});
-```
-
-This option allows you to enable/disable cancellation of the selected date by pressing again.
-
----
-
-## settings.selected.dates
-
-`Type: String[] | Number[] | Date[]`
-
-`Default: null`
-
-`Options: ['YYYY-MM-DD'] | [Number] | [Date] | null`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selected: {
- dates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
- },
- },
-});
-```
-
-This parameter allows you to specify a list of dates that will be selected when the calendar is initialized.
-
-
- To specify a range dates, use any delimiter between dates within a single string.
-
-
----
-
-## settings.selected.month
-
-`Type: Number`
-
-`Default: null`
-
-`Options: Number (from 0 to 11) | null`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selected: {
- month: 0,
- },
- },
-});
-```
-
-This parameter determines the month that will be displayed when the calendar is initialized. Months are numbered from 0 to 11.
-
----
-
-## settings.selected.year
-
-`Type: Number`
-
-`Default: null`
-
-`Options: Number (YYYY) | null`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selected: {
- year: 2022,
- },
- },
-});
-```
-
-This parameter determines the year that will be displayed when the calendar is initialized.
-
----
-
-## settings.selected.holidays
-
-`Type: String[] | Number[] | Date[]`
-
-`Default: null`
-
-`Options: ['YYYY-MM-DD'] | [Number] | [Date] | null`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selected: {
- holidays: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
- },
- },
-});
-```
-
-This parameter allows you to specify dates that will be considered holidays and will receive additional CSS modifiers.
-
-
- To specify a range dates, use any delimiter between dates within a single string.
-
-
----
-
-## settings.selected.time
-
-`Type: String`
-
-`Default: null`
-
-`Options: 'hh:mm aa' | null`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- selected: {
- time: '03:44 AM',
- },
- },
-});
-```
-
-This parameter allows you to set the time that will be displayed when the calendar is initialized. The time is specified in the `'hh:mm aa'` format, where `'aa'` is the AM/PM marker. If using the 24-hour format, the `'aa'` marker is not required.
-
----
-
-## settings.visibility.theme
-
-`Type: String`
-
-`Default: 'system'`
-
-`Options: 'light' | 'dark' | 'system'`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- visibility: {
- theme: 'system',
- },
- },
-});
-```
-
-This parameter determines the theme of the calendar. By default, the theme is determined by the user's system or website settings.
-
----
-
-## settings.visibility.themeDetect
-
-`Type: String | False`
-
-`Default: 'html[data-theme]'`
-
-`Options: 'string | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- visibility: {
- themeDetect: 'html[data-theme]',
- },
- },
-});
-```
-To automatically detect and apply the website's theme to the calendar, you can pass a string value as a CSS selector.
-Square brackets indicate an attribute containing the theme name.
-By default, it tracks the `html` tag with the `data-theme` attribute, but you can customize any other attribute and tag, such as `class`, if the class name is used to set the theme: `'html[class]'`.
-If set to `false`, the theme will be determined by the user's system or the `settings.visibility.theme` parameter.
-
----
-
-## settings.visibility.monthShort
-
-`Type: Boolean`
-
-`Default: true`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- visibility: {
- monthShort: true,
- },
- },
-});
-```
-
-This parameter allows you to use abbreviated month names when selecting a month.
-
----
-
-## settings.visibility.weekNumbers
-
-`Type: Boolean`
-
-`Default: false`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- visibility: {
- weekNumbers: false,
- },
- },
-});
-```
-
-With this parameter, you can decide whether to display week numbers in the calendar.
-
----
-
-## settings.visibility.weekend
-
-`Type: Boolean`
-
-`Default: false`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- visibility: {
- weekend: true,
- },
- },
-});
-```
-
-This parameter allows you to highlight weekends in the calendar.
-
----
-
-## settings.visibility.today
-
-`Type: Boolean`
-
-`Default: false`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- visibility: {
- today: true,
- },
- },
-});
-```
-
-With this parameter, you can highlight the current day in the calendar.
-
----
-
-## settings.visibility.disabled
-
-`Type: Boolean`
-
-`Default: false`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- visibility: {
- disabled: false,
- },
- },
-});
-```
-
-This parameter determines whether all days, including disabled days, will be displayed.
-
----
-
-## settings.visibility.daysOutside
-
-`Type: Boolean`
-
-`Default: true`
-
-`Options: true | false`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- visibility: {
- daysOutside: false,
- },
- },
-});
-```
-
-With this parameter, you can decide whether to display days from the previous and next months.
-
----
-
-## settings.visibility.positionToInput
-
-`Type: String`
-
-`Default: 'left'`
-
-`Options: 'auto' | 'center' | 'left' | 'right' | ['bottom' | 'top', 'center' | 'left' | 'right']`
-
-```js
-new VanillaCalendar('#calendar', {
- settings: {
- visibility: {
- positionToInput: 'auto',
- // positionToInput: ['bottom', 'center'],
- },
- },
-});
-```
-
-This parameter specifies the position of the calendar relative to input, if the calendar is initialized with the `input` parameter.
-
-`positionToInput` takes a string with a value of `'left'`, `'center'`, or `'right'`, or an array of values `[Y-axis, X-axis]`, where the Y-axis can take the values `'bottom'` or `'top'`, and the X-axis can take the values `'left'`, `'center'`, or `'right'`.
-If the Y-axis is not specified, the default is `'bottom'`.
-
-You can use the `positionToInput: 'auto'` value to automatically detect the best position depending on the available space in the viewport.
-Behind the scene, it calculates the available space on all 4 sides, and it will first try to display the picker at the bottom of the input
-which is the default position. If there is not enough space at the bottom, it will evaluate what would be the other best available position.
diff --git a/docs/en/reference/creating-an-instance.mdx b/docs/en/reference/creating-an-instance.mdx
new file mode 100644
index 00000000..c4ada0ca
--- /dev/null
+++ b/docs/en/reference/creating-an-instance.mdx
@@ -0,0 +1,59 @@
+---
+title: Creating an Instance
+description: Learn how to create an instance of Vanilla Calendar Pro using a CSS selector or HTML element. Configure the calendar to initialize in a wrapper or popup when clicking on an element.
+section: 1
+---
+
+# Creating an Instance
+
+`new Calendar()` - creates an instance of **Vanilla Calendar Pro**, which is an encapsulation of the calendar, its settings, and methods.
+
+
If you included **Vanilla Calendar Pro** using the `
-
-
-
-
-