Vanilla Calendar Pro

https://vanilla-calendar.pro/
Admin
A lightweight, feature-rich JavaScript calendar component with TypeScript support for selecting...
Tokens:26,301
Snippets:321
Trust Score:6.3
Update:5 months ago
Show doc for...
Tokens:
Raw
### Full Example: Simple Initialization

Source: https://vanilla-calendar.pro/docs/learn/installation-and-usage

A complete, basic example demonstrating the initialization of Vanilla Calendar Pro without any custom settings, suitable for a flat calendar view.

```html
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/styles/index.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/index.js" defer></script>
  </head>
  <body style="display: flex; align-items: start">
    <div id="calendar"></div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        // Destructure the Calendar constructor
        const { Calendar } = window.VanillaCalendarPro;
        // Create a calendar instance and initialize it.
        const calendar = new Calendar('#calendar');
        calendar.init();
      });
    </script>
  </body>
</html>
```

--------------------------------

### Install Vanilla Calendar Pro via npm

Source: https://vanilla-calendar.pro/docs/learn/installation-and-usage

Use npm to install the Vanilla Calendar Pro package. This is the recommended method for projects using Node.js and build tools.

```bash
npm install vanilla-calendar-pro
# or
yarn add vanilla-calendar-pro
# or
pnpm add vanilla-calendar-pro
```

--------------------------------

### init()

Source: https://vanilla-calendar.pro/docs/reference/methods

The `init()` method is the main instance method that starts the calendar initialization process.

```APIDOC
## init()

### Description
The `init()` method is the main instance method that starts the calendar initialization process.

### Method
`init()`

### Code Example
```typescript
const calendar = new Calendar(element, params);
calendar.init();
```
```

--------------------------------

### Configure Popups for a Specific Date

Source: https://vanilla-calendar.pro/docs/reference/popups

Use dates in `YYYY-MM-DD` format as keys to set up popups. This example configures a popup for June 28, 2022.

```typescript
new Calendar('#calendar', {
  popups: {
    '2022-06-28': {},
  }
});
```

--------------------------------

### Configure VanillaCalendar Component

Source: https://vanilla-calendar.pro/docs/learn/components-for-libraries-vue

Illustrates how to pass configuration options to the VanillaCalendar component using the `config` prop. This example sets the calendar type to 'multiple'.

```vue
<template>
  <!-- -->
  <VanillaCalendar :config="{ type: 'multiple' }" />
  <!-- -->
</template>
```

--------------------------------

### Initialize Calendar Instance

Source: https://vanilla-calendar.pro/docs/reference/methods

Use the `init()` method to start the calendar initialization process after creating an instance with `new Calendar()`. This is the primary method for making the calendar functional.

```typescript
const calendar = new Calendar(element, params);
calendar.init();
```

--------------------------------

### Set First Day of the Week

Source: https://vanilla-calendar.pro/docs/reference/settings

Sets the starting day of the week, using JavaScript's standard where Sunday is 0 and Saturday is 6.

```typescript
new Calendar("#calendar", {
  firstWeekday: 1,
});
```

--------------------------------

### HTML Structure for Calendar

Source: https://vanilla-calendar.pro/docs/learn/installation-and-usage

Create a target HTML element with a CSS selector where the calendar will be rendered. This example uses a div with the ID 'calendar'.

```html
<html>
  <head>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>
```

--------------------------------

### Create VanillaCalendar React Component

Source: https://vanilla-calendar.pro/docs/learn/components-for-libraries-react

This component wraps the Vanilla Calendar Pro library for use in React applications. It handles initialization and updates based on provided configuration. Ensure you have 'vanilla-calendar-pro' installed.

```tsx
import { useEffect, useRef, useState } from 'react';
import { Options, Calendar } from 'vanilla-calendar-pro';

import 'vanilla-calendar-pro/styles/index.css';

interface CalendarProps extends React.HTMLAttributes<HTMLDivElement> {
  config?: Options,
}

function VanillaCalendar({ config, ...attributes }: CalendarProps) {
  const ref = useRef(null);
  const [calendar, setCalendar] = useState<Calendar | null>(null);

  useEffect(() => {
    if (!ref.current) return;
    setCalendar(new Calendar(ref.current, config));
  }, [ref, config])

  useEffect(() => {
    if (!calendar) return;
    calendar.init()
  }, [calendar])

  return (
    <div {...attributes} ref={ref}></div>
  )
}

export default VanillaCalendar;
```

--------------------------------

### Add HTML Content to Popups

Source: https://vanilla-calendar.pro/docs/reference/popups

The `html` option allows for plain text or HTML markup within the popup. This example shows formatted HTML content and includes a commented-out plain text alternative.

```typescript
new Calendar('#calendar', {
  popups: {
    '2022-06-28': {
      modifier: 'bg-red color-pink',
      html: `<div>
        <u><b>12:00 PM</b></u>
        <p style="margin: 5px 0 0;">Airplane in Las Vegas</p>
      </div>`,
      // or just text
      // html: 'Airplane in Las Vegas',
    },
  }
});
```

--------------------------------

### Get Week Number - Vanilla Calendar Pro

Source: https://vanilla-calendar.pro/docs/reference/utilities

The `getWeekNumber` utility calculates the year and week number for a given date string and a specified start day of the week. The `weekStartDay` is a number from 0 (Sunday) to 6 (Saturday).

```typescript
import { getWeekNumber } from 'vanilla-calendar-pro/utils';
getWeekNumber('2024-12-12', 1); // return: {year: 2024, week: 50}
```

--------------------------------

### Customize Calendar Header with Layouts

Source: https://vanilla-calendar.pro/docs/learn/additional-features-layouts

Use the `layouts` parameter to customize the calendar header for a specific type, like 'default'. This example adds a regular button inside the calendar.

```javascript
const calendar = new VanillaCalendar("#calendar", {
    inputMode: true,
    layouts: {
        default: "<div>{{month}} {{year}}</div>\n<button class=\"button\">Hide</button>",
    },
});
calendar.show();
```

--------------------------------

### getWeekNumber

Source: https://vanilla-calendar.pro/docs/reference/utilities

Calculates the week number for a given date and specifies the starting day of the week.

```APIDOC
## getWeekNumber(date: FormatDateString, weekStartDay: WeekDayID)

### Description
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.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { getWeekNumber } from 'vanilla-calendar-pro/utils';
getWeekNumber('2024-12-12', 1); // return: {year: 2024, week: 50}
```

### Response
#### Success Response (200)
- `object`: An object containing the `year` and `week` number.
```

--------------------------------

### Implement HTML Sanitization

Source: https://vanilla-calendar.pro/docs/reference/settings

Sanitize HTML content for security using a custom function. The example uses the `DOMPurify` library, which needs to be imported separately. This option is not mandatory for calendar functionality.

```typescript
import DOMPurify from 'dompurify';
 
new Calendar('#calendar', {
  sanitizerHTML: (html) => DOMPurify.sanitize(html),
});
```

--------------------------------

### Initializing Calendar with Options

Source: https://vanilla-calendar.pro/docs/reference/creating-an-instance

Demonstrates how to initialize the calendar with custom settings and actions by passing an options object as the second argument.

```APIDOC
## Initializing Calendar with Options

### Description
Initializes the calendar instance with a specified wrapper or input element and an optional configuration object for settings and actions.

### Method
`new Calendar(selectorOrElement, options)`

### Parameters
#### Path Parameters
- **selectorOrElement** (string | HTMLElement) - Required - A CSS selector or HTML element for the calendar wrapper or input.
- **options** (object) - Optional - An object containing calendar settings and actions.

### Request Example
```typescript
new Calendar('#calendar', {
  // Settings and Actions go here
});
```
```

--------------------------------

### Initialize Vanilla Calendar Pro with JavaScript

Source: https://vanilla-calendar.pro/docs/learn/installation-and-usage

Import the Calendar class and initialize a new instance targeting the HTML element. Custom settings can be passed during instantiation.

```typescript
import { Calendar } from 'vanilla-calendar-pro';
 
const calendar = new Calendar('#calendar', {
  // Your settings
});
calendar.init();
```

--------------------------------

### Initializing Calendar in a Wrapper Element

Source: https://vanilla-calendar.pro/docs/reference/creating-an-instance

This demonstrates how to create a calendar instance by providing a CSS selector or HTML element that acts as a wrapper for the calendar.

```APIDOC
## Initializing Calendar in a Wrapper Element

### Description
Creates a calendar instance within a specified wrapper element.

### Method
`new Calendar(selectorOrElement, [options])`

### Parameters
#### Path Parameters
- **selectorOrElement** (string | HTMLElement) - Required - A CSS selector or HTML element representing the wrapper for the calendar.
- **options** (object) - Optional - An object defining the settings and actions of the calendar.

### Request Example
```html
<div id="calendar"></div>
```

```typescript
new Calendar('#calendar');
// or
const calendarEl = document.querySelector('#calendar');
new Calendar(calendarEl);
```
```

--------------------------------

### onInit()

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered once during the calendar's initialization process.

```APIDOC
## onInit()

### Description
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.

### Method Signature
`onInit(self) => void | null`

### Example Usage
```javascript
new Calendar('#calendar', {
  onInit(self) {
    console.log('Calendar initialized:', self);
  }
});
```
```

--------------------------------

### onInit Action

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered during calendar initialization. If `inputMode` is true, it executes on the first display of the calendar.

```typescript
new Calendar('#calendar', {
  onInit(self) {},
});
```

--------------------------------

### Initialize Calendar with Settings

Source: https://vanilla-calendar.pro/docs/reference/creating-an-instance

Pass an optional second argument to the `new Calendar()` constructor to configure the calendar's behavior and appearance with various settings.

```typescript
new Calendar('#calendar', {
  // Settings
});
```

--------------------------------

### Style Popups with CSS Modifiers

Source: https://vanilla-calendar.pro/docs/reference/popups

The `modifier` option accepts space-separated CSS classes to style the highlighted date. This example applies `bg-red` and `color-pink` classes.

```typescript
new Calendar('#calendar', {
  popups: {
    '2022-06-28': {
      modifier: 'bg-red color-pink',
    },
  }
});
```

--------------------------------

### Import Vanilla Calendar Pro Styles

Source: https://vanilla-calendar.pro/docs/learn/installation-and-usage

Import the main CSS file for Vanilla Calendar Pro, which includes layout and themes. Alternatively, import layout and theme styles separately.

```typescript
import 'vanilla-calendar-pro/styles/index.css';
```

```typescript
import 'vanilla-calendar-pro/styles/layout.css'; // Only the skeleton
import 'vanilla-calendar-pro/styles/themes/light.css'; // Light theme
import 'vanilla-calendar-pro/styles/themes/dark.css'; // Dark theme
// or any other custom theme...
```

--------------------------------

### Create VanillaCalendar Vue Component

Source: https://vanilla-calendar.pro/docs/learn/components-for-libraries-vue

This script sets up a Vue component that initializes Vanilla Calendar Pro. It imports necessary Vue functions and Vanilla Calendar classes, sets up a reference to the calendar's DOM element, and initializes the calendar on component mount. It also accepts configuration options via props.

```vue
<script setup lang="ts">
import { onMounted, ref, useAttrs } from 'vue';
import { Calendar, Options } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/index.css'

const calendarRef = ref(null);
const attributes = useAttrs();
const { config } = defineProps<{ config?: Options }>();

onMounted(() => {
  if (!calendarRef.value) return;
  const calendar = new Calendar(calendarRef.value, config);
  calendar.init();
});
</script>

<template>
  <div v-bind="attributes" ref="calendarRef"></div>
</template>
```

--------------------------------

### Force Light Theme in Vanilla Calendar Pro

Source: https://vanilla-calendar.pro/docs/learn/additional-features-themes

Use this snippet to explicitly set the light theme for the calendar. Ensure the calendar is initialized before applying the theme.

```javascript
const calendar = new VanillaCalendar("#calendar", {
  "theme": "light",
});
calendar.show();
```

--------------------------------

### Initializing Calendar in an Input Element (Popup Mode)

Source: https://vanilla-calendar.pro/docs/reference/creating-an-instance

This shows how to initialize the calendar to appear as a popup when an 'input' element (which can be any HTML element) is clicked.

```APIDOC
## Initializing Calendar in an Input Element (Popup Mode)

### Description
Creates a calendar instance that appears as a popup when an associated input element is clicked. The 'input' can be an `<input>` tag or any other HTML element.

### Method
`new Calendar(selectorOrElement, { inputMode: true, ...options })`

### Parameters
#### Path Parameters
- **selectorOrElement** (string | HTMLElement) - Required - A CSS selector or HTML element that will trigger the calendar popup.
- **options** (object) - Optional - An object defining the settings and actions of the calendar. Must include `inputMode: true` for popup behavior.

### Request Example
```html
<input type="text" id="input">
<!-- or -->
<div id="input"></div>
```

```typescript
new Calendar('#input', { inputMode: true });
// or
const calendarInput = document.querySelector('#input');
new Calendar(calendarInput, {
  inputMode: true,
});
```
```

--------------------------------

### show()

Source: https://vanilla-calendar.pro/docs/reference/methods

The `show()` method makes the calendar visible if it has been previously hidden.

```APIDOC
## show()

### Description
The `show()` method allows you to display the calendar if it was hidden.

### Method
`show()`

### Code Example
```typescript
calendar.show();
```
```

--------------------------------

### Enable Edge Dates Only in Multiple Ranged Mode

Source: https://vanilla-calendar.pro/docs/reference/settings

Set `enableEdgeDatesOnly` to `true` to only capture the start and end dates of a selection when `selectionDatesMode` is `'multiple-ranged'`. Disabled dates within the range are ignored when this is active.

```typescript
new Calendar('#calendar', {
  enableEdgeDatesOnly: true,
});
```

--------------------------------

### enableEdgeDatesOnly

Source: https://vanilla-calendar.pro/docs/reference/settings

When set to true, this parameter only considers the start and end dates of a selection, ignoring intermediate dates. This option is only effective when `selectionDatesMode` is set to 'multiple-ranged'. Disabled dates within the range will not affect the selection.

```APIDOC
## enableEdgeDatesOnly

### Description
This parameter allows you to get only the start and end dates selected by the user, ignoring intermediate dates. This parameter only works if `selectionDatesMode` is set to `'multiple-ranged'`. It is important to note that when using this parameter, disabled dates within the date range will have no effect. Therefore, use this option only if you are interested in the start and end dates selected by the user.

### Type
`Boolean`

### Default
`true`

### Options
`true | false`

### Example
```ts
new Calendar("#calendar", {
  enableEdgeDatesOnly: true,
});
```
```

--------------------------------

### Create Multiple Ranged Calendar Type

Source: https://vanilla-calendar.pro/docs/learn/type-multiple

Configure the calendar to select date ranges across multiple months by setting `selectionDatesMode` to 'multiple-ranged'. By default, only the start and end dates of the range are stored for optimization. To store all selected dates within the ranges, set `enableEdgeDatesOnly` to `false`.

```javascript
const calendar = new VanillaCalendar("#calendar", {
  type: "multiple",
  selectionDatesMode: "multiple-ranged",
  enableEdgeDatesOnly: false,
});
calendar.show();
```

--------------------------------

### Basic Popup Configuration

Source: https://vanilla-calendar.pro/docs/reference/popups

Configure a popup for a specific date using the `popups` option. Dates are specified in 'YYYY-MM-DD' format.

```APIDOC
## popups['date']

### Description
Allows you to specify a popup for a particular date. The date format must be 'YYYY-MM-DD'.

### Parameters
#### Request Body
- **popups** (Object) - Required - An object where keys are dates ('YYYY-MM-DD') and values are popup configurations.
  - **'YYYY-MM-DD'** (Object) - Required - Configuration for the popup on the specified date.

### Request Example
```javascript
new Calendar('#calendar', {
  popups: {
    '2022-06-28': {},
  }
});
```
```

--------------------------------

### onCreateDateRangeTooltip()

Source: https://vanilla-calendar.pro/docs/reference/actions

Allows creating a tooltip for a date range, triggered on clicking or hovering over a day when `selectionDatesMode` is 'multiple-ranged'. Provides access to calendar instance, date element, tooltip element, and their bounding rectangles.

```APIDOC
## onCreateDateRangeTooltip()

### Description
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.

### Method Signature
`onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) => void | null`

### Example Usage
```javascript
new Calendar('#calendar', {
  selectionDatesMode: 'multiple-ranged',
  onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) {
    tooltipEl.innerHTML = 'Custom tooltip content';
  }
});
```
```

--------------------------------

### Force Dark Theme in Vanilla Calendar Pro

Source: https://vanilla-calendar.pro/docs/learn/additional-features-themes

Use this snippet to explicitly set the dark theme for the calendar. Ensure the calendar is initialized before applying the theme.

```javascript
const calendar = new VanillaCalendar("#calendar", {
  "theme": "dark",
});
calendar.show();
```

--------------------------------

### selectedTheme

Source: https://vanilla-calendar.pro/docs/reference/settings

Defines the calendar's theme. Options include 'light', 'dark', 'system', or a custom theme string.

```APIDOC
## selectedTheme

### Description
This parameter defines the theme of the calendar. By default, the theme is determined by the user's system or the site settings.

### Type
`String`

### Default
`'system'`

### Options
`string (custom theme) | 'light' | 'dark' | 'system'`

### Example
```ts
new Calendar('#calendar', {
  selectedTheme: 'system',
});
```
```

--------------------------------

### set()

Source: https://vanilla-calendar.pro/docs/reference/methods

The `.set()` method allows you to specify new parameters or handlers for a calendar, whether it's uninitialized or already initialized. It accepts new parameters and optional reset control arguments.

```APIDOC
## set()

### Description
If you need to specify new parameters or handlers for a calendar that is not yet initialized or already initialized, you can use the `.set()` method. This method accepts an object with new parameters and an object with optional arguments to control the reset, by default resetting the user-selected date, month, and year after the update.

### Method
`set(params: object, resetOptions?: object)`

### Parameters
#### Request Body (params)
- **locale** (string) - Optional - Sets the locale for the calendar.
- **firstWeekday** (number) - Optional - Sets the first day of the week.

#### Request Body (resetOptions)
- **dates** (boolean | 'only-first') - Optional - Controls the reset of dates. See `update()` method for details.

### Code Example
```typescript
calendar.set({
  locale: 'de-AT',
  firstWeekday: 0,
}, {
  dates: true,
});
```

### Alternative Usage (before initialization)
```typescript
const calendar = new Calendar(element);
calendar.set({ locale: 'de-AT', firstWeekday: 0 });
calendar.init();
```
```

--------------------------------

### onChangeToInput()

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered after clicking on a day or changing the time, provided `inputMode` is enabled. It provides the calendar instance and the event object.

```APIDOC
## onChangeToInput()

### Description
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.

### Method Signature
`onChangeToInput(self, event) => void | null`

### Example Usage
```javascript
new Calendar('#calendar', {
  inputMode: true,
  onChangeToInput(self, event) {
    console.log('Input changed:', event);
  }
});
```
```

--------------------------------

### Enable Input Mode

Source: https://vanilla-calendar.pro/docs/reference/settings

Indicates that the main element is an input field, not a calendar wrapper. Useful for date pickers.

```typescript
new Calendar("#calendar", {
  inputMode: true,
});
```

--------------------------------

### timeStepMinute

Source: https://vanilla-calendar.pro/docs/reference/settings

Sets the increment step for the minute controller, from 1 to 59.

```APIDOC
## timeStepMinute

### Description
This parameter sets the step for the minute controller.

### Type
`Number`

### Default
`1`

### Options
`from 1 to 59`

### Example
```ts
new Calendar('#calendar', {
  timeStepMinute: 1,
});
```
```

--------------------------------

### Set Calendar Theme

Source: https://vanilla-calendar.pro/docs/reference/settings

Define the calendar's visual theme. Options include 'light', 'dark', 'system' (default), or a custom theme string.

```typescript
new Calendar('#calendar', {
  selectedTheme: 'system',
});
```

--------------------------------

### selectedTime

Source: https://vanilla-calendar.pro/docs/reference/settings

Sets the initial time displayed in the calendar. Supports 'hh:mm aa' format or null.

```APIDOC
## selectedTime

### Description
This parameter allows you to set the time that will be displayed when the calendar is initialized. The time is set in the format `'hh:mm aa'`, where `'aa'` is the AM/PM marker. If using the 24-hour format, the `'aa'` marker is not required.

### Type
`String`

### Default
`null`

### Options
`'hh:mm aa' | null`

### Example
```ts
new Calendar('#calendar', {
  selectedTime: '03:44 AM',
});
```
```

--------------------------------

### onShow()

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered when the calendar is displayed to the user, specifically when `inputMode` is enabled.

```APIDOC
## onShow()

### Description
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.

### Method Signature
`onShow(self) => void | null`

### Example Usage
```javascript
new Calendar('#calendar', {
  inputMode: true,
  onShow(self) {
    console.log('Calendar shown:', self);
  }
});
```
```

--------------------------------

### onClickMonth()

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered after a month is selected in the calendar. It provides the calendar instance and the mouse event.

```APIDOC
## onClickMonth()

### Description
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.

### Method
`onClickMonth(self, event) => void | null`

### Example
```ts
new Calendar("#calendar", {
  onClickMonth(self, event) {},
});
```
```

--------------------------------

### Configure Time Control Method

Source: https://vanilla-calendar.pro/docs/reference/settings

Determine how time selection is controlled. Use 'all' for any method or 'range' to restrict selection to the controller.

```typescript
new Calendar('#calendar', {
  timeControls: 'all',
});
```

--------------------------------

### displayDateMin

Source: https://vanilla-calendar.pro/docs/reference/settings

Sets the minimum date that the user can select.

```APIDOC
## displayDateMin

### Description
Sets the minimum date that the user can select. Dates earlier than the specified date will be disabled and unavailable for selection. It is important to note that `displayDateMin` and `displayDateMax` disable dates outside the range, while `dateMin` and `dateMax` do not create them at all.

### Parameters
* **displayDateMin** (String | Date object | Number) - Required - The minimum selectable date. Accepts 'YYYY-MM-DD', a Date object, a timestamp, or 'today'. Defaults to '1970-01-01'.

### Request Example
```typescript
new Calendar('#calendar', {
  displayDateMin: '2022-07-01',
});
```
```

--------------------------------

### Initialize Calendar with Custom Aria Labels

Source: https://vanilla-calendar.pro/docs/reference/labels

Use the `labels` option when creating a new Calendar instance to provide custom aria-label text for various calendar elements. This is crucial for screen readers and assistive technologies.

```javascript
new Calendar('#calendar', {
  labels: {
    application: 'Calendar',
    navigation: 'Calendar Navigation',
    arrowNext: {
      month: 'Next month',
      year: 'Next list of years',
    },
    arrowPrev: {
      month: 'Previous month',
      year: 'Previous list of years',
    },
    month: 'Select month, current selected month:',
    months: 'List of months',
    year: 'Select year, current selected year:',
    years: 'List of years',
    week: 'Days of the week',
    weekNumber: 'Numbers of weeks in a year',
    dates: 'Dates in the current month',
    selectingTime: 'Selecting a time ',
    inputHour: 'Hours',
    inputMinute: 'Minutes',
    rangeHour: 'Slider for selecting hours',
    rangeMinute: 'Slider for selecting minutes',
    btnKeeping: 'Switch AM/PM, current position:',
  },
});
```

--------------------------------

### Set Initial Time Display

Source: https://vanilla-calendar.pro/docs/reference/settings

Initialize the calendar with a specific time. The time format must be 'hh:mm aa' (e.g., '03:44 AM'). The 'aa' marker is for AM/PM; it's not needed for 24-hour format.

```typescript
new Calendar('#calendar', {
  selectedTime: '03:44 AM',
});
```

--------------------------------

### Create Multiple Calendar Type

Source: https://vanilla-calendar.pro/docs/learn/type-multiple

Use this code to initialize a calendar with the 'multiple' type, enabling users to select individual dates across different months. Ensure the `selectionDatesMode` is set to 'multiple'.

```javascript
const calendar = new VanillaCalendar("#calendar", {
  type: "multiple",
  selectionDatesMode: "multiple",
});
calendar.show();
```

--------------------------------

### onCreateDateRangeTooltip Action

Source: https://vanilla-calendar.pro/docs/reference/actions

Allows creating a tooltip for a date range when `selectionDatesMode` is 'multiple-ranged'. Triggers on click and hover, providing elements and their bounding rectangles.

```typescript
new Calendar('#calendar', {
  onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) {},
});
```

--------------------------------

### Use VanillaCalendar Component

Source: https://vanilla-calendar.pro/docs/learn/components-for-libraries-vue

Shows the basic usage of the imported VanillaCalendar component within a Vue template.

```vue
<template>
  <!-- -->
  <VanillaCalendar />
  <!-- -->
</template>
```

--------------------------------

### update()

Source: https://vanilla-calendar.pro/docs/reference/methods

The `update()` method allows you to apply new settings to the calendar and perform a reset. It accepts an object with optional arguments to control the reset.

```APIDOC
## update()

### Description
The `update()` method allows you to apply new settings to the calendar and perform a reset. This method accepts an object with optional arguments to control the reset, by default resetting the user-selected date, month, and year after the update.

### Method
`update(resetOptions?: UpdateResetOptions)`

### Parameters
#### Request Body (resetOptions)
- **year** (boolean) - Optional - Resets the year to the parameters specified in the settings if `true`, or leaves the user-selected year if `false`.
- **month** (boolean) - Optional - Resets the month to the parameters specified in the settings if `true`, or leaves the user-selected month if `false`.
- **dates** (boolean | 'only-first') - Optional - Resets all selected dates if `true`, leaves user-selected dates if `false`. If `'only-first'`, resets all selected dates, leaving only the earliest one. If the date selection type is specified as `'multiple-ranged'`, a `'mousemove'` and `'keydown'` handler is added for hovering.
- **holidays** (boolean) - Optional - Resets holidays to the parameters specified in the settings if `true`, or leaves them as is if `false`.
- **time** (boolean) - Optional - Resets time to the parameters specified in the settings if `true`, or leaves the user-selected time if `false`.

### Code Example
```typescript
calendar.locale = 'de-AT';
calendar.firstWeekday = 0;

calendar.update({
  dates: true,
});
```
```

--------------------------------

### Popup Content with HTML

Source: https://vanilla-calendar.pro/docs/reference/popups

Define the content of the popup using plain text or HTML markup via the `html` option.

```APIDOC
## popups['date'].html

### Description
Specifies the content to be displayed within the popup. This can be plain text or HTML markup.

### Parameters
#### Request Body
- **popups** (Object) - Required - An object where keys are dates ('YYYY-MM-DD') and values are popup configurations.
  - **'YYYY-MM-DD'** (Object) - Required - Configuration for the popup on the specified date.
    - **html** (String) - Optional - Plain text or HTML string for the popup content.

### Request Example
```javascript
new Calendar('#calendar', {
  popups: {
    '2022-06-28': {
      modifier: 'bg-red color-pink',
      html: `<div>
        <u><b>12:00 PM</b></u>
        <p style="margin: 5px 0 0;">Airplane in Las Vegas</p>
      </div>`,
      // or just text
      // html: 'Airplane in Las Vegas',
    },
  }
});
```
```

--------------------------------

### themeAttrDetect

Source: https://vanilla-calendar.pro/docs/reference/settings

Configures automatic theme detection based on a CSS attribute selector.

```APIDOC
## themeAttrDetect

### Description
To have the calendar automatically track and apply the site's theme, you can pass a string value in the form of a CSS selector. Square brackets indicate an attribute containing the theme name. By default, the `html` tag with the `data-theme` attribute is tracked, but you can configure any other attribute and tag, for example, `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 `selectedTheme` parameter.

### Type
String | false

### Default
`'html[data-theme]'`

### Options
`string | false`

### Example
```ts
new Calendar('#calendar', {
  themeAttrDetect: 'html[data-theme]',
});
```
```

--------------------------------

### onChangeTime()

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered after changing the time in the calendar. It provides access to the calendar instance, the change event, and an error flag.

```APIDOC
## onChangeTime()

### Description
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.

### Method Signature
`onChangeTime(self, event, isError) => void | null`

### Example Usage
```javascript
new Calendar('#calendar', {
  onChangeTime(self, event, isError) {
    console.log('Time changed:', event, 'Error:', isError);
  }
});
```
```

--------------------------------

### Detect Theme Attribute

Source: https://vanilla-calendar.pro/docs/reference/settings

Configures the calendar to automatically track and apply the site's theme using a CSS selector. Set to `false` to disable.

```typescript
new Calendar("#calendar", {
  themeAttrDetect: "html[data-theme]",
});
```

--------------------------------

### Set Minimum Display Date

Source: https://vanilla-calendar.pro/docs/reference/settings

Configures the earliest selectable date. Dates before this are disabled. Differs from `dateMin` by disabling rather than excluding.

```typescript
new Calendar('#calendar', {
  displayDateMin: '2022-07-01',
});
```

--------------------------------

### Set New Parameters Before or After Initialization

Source: https://vanilla-calendar.pro/docs/reference/methods

The `.set()` method allows you to specify new parameters or handlers for a calendar instance, whether it's already initialized or not. It accepts new settings and optional reset arguments. If called before `init()`, omit the reset arguments.

```typescript
calendar.set({
  locale: 'de-AT',
  firstWeekday: 0,
}, {
  dates: true,
});
```

```typescript
const calendar = new Calendar(element);
calendar.set({ locale: 'de-AT', firstWeekday: 0 });
calendar.init();
```

--------------------------------

### locale

Source: https://vanilla-calendar.pro/docs/reference/settings

Sets the language localization of the calendar. Can be a BCP 47 language label or an object with custom month and weekday names.

```APIDOC
## locale

### Description
Sets the language localization of the calendar. You can specify a language label according to BCP 47 or provide arrays of month and weekday names.

### Parameters
* **locale** (String | Object) - Required - The language label or an object for custom labels.

### Request Example
```typescript
new Calendar('#calendar', {
  locale: 'en',
  // Or specify an object for your labels
  // locale: {
  //   months: {
  //     long: [],
  //     short: [],
  //   },
  //   weekday: {
  //     long: [],
  //     short: [],
  //   }
  // },
});
```
```

--------------------------------

### Initialize Calendar in Wrapper Element

Source: https://vanilla-calendar.pro/docs/reference/creating-an-instance

Use the `new Calendar()` constructor with a CSS selector or HTML element to initialize the calendar within a wrapper div. This is the standard way to embed the calendar on a page.

```html
<div id="calendar"></div>
```

```typescript
new Calendar('#calendar');
// or
const calendarEl = document.querySelector('#calendar');
new Calendar(calendarEl);
```

--------------------------------

### onCreateDateEls()

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered during calendar initialization and updates, providing access to each day's HTML element.

```APIDOC
## onCreateDateEls()

### Description
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.

### Method Signature
`onCreateDateEls(self, dateEl) => void | null`

### Example Usage
```javascript
new Calendar('#calendar', {
  onCreateDateEls(self, dateEl) {
    console.log('Date element created:', dateEl);
  }
});
```
```

--------------------------------

### selectionTimeMode

Source: https://vanilla-calendar.pro/docs/reference/settings

Enables time selection and allows specifying the time format (24-hour or 12-hour).

```APIDOC
## selectionTimeMode

### Description
This parameter enables time selection. You can also specify the time format using a number: 24-hour or 12-hour format.

### Type
`false | Number`

### Default
`false`

### Options
`false | 24 | 12`

### Example
```ts
new Calendar("#calendar", {
  selectionTimeMode: true, // or 24, or 12
});
```
```

--------------------------------

### onClickWeekNumber()

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered when a week number is clicked. It requires the `enableWeekNumbers` option to be set to `true`. Parameters include the calendar instance, the week number, the year, an array of day elements, and the mouse event.

```APIDOC
## onClickWeekNumber()

### Description
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;
  * `year` - year of the week;
  * `dateEls` - array of days (html elements);
  * `event` - mouse event.

### Method
`onClickWeekNumber(self, number, year, dateEls, event) => void | null`

### Example
```ts
new Calendar("#calendar", {
  onClickWeekNumber(self, number, year, dateEls, event) {},
});
```
```

--------------------------------

### Configure VanillaCalendar Component

Source: https://vanilla-calendar.pro/docs/learn/components-for-libraries-react

Pass configuration options and HTML attributes to the VanillaCalendar component. Here, 'type' is set to 'multiple' and a CSS class is applied.

```tsx
// ...
<VanillaCalendar config={{
    type: 'multiple',
  }} className="thisIsMyClass" />
// ...
```

--------------------------------

### timeControls

Source: https://vanilla-calendar.pro/docs/reference/settings

Defines the time selection method, either 'all' for any method or 'range' for controller-based selection.

```APIDOC
## timeControls

### Description
This parameter defines the method of time selection: `'all'` (any method) or `'range'` (only with the controller).

### Type
`String`

### Default
`'all'`

### Options
`'all' | 'range'`

### Example
```ts
new Calendar('#calendar', {
  timeControls: 'all',
});
```
```

--------------------------------

### Initialize Calendar with Selected Dates

Source: https://vanilla-calendar.pro/docs/reference/settings

Use `selectedDates` to pre-select dates upon calendar initialization. Supports date strings, timestamps, and Date objects. Ranges can be specified within a single string.

```typescript
new Calendar('#calendar', {
  selectedDates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
});
```

--------------------------------

### firstWeekday

Source: https://vanilla-calendar.pro/docs/reference/settings

Sets the first day of the week for the calendar display.

```APIDOC
## firstWeekday

### Description
This parameter sets the first day of the week. Specify a number from 0 to 6, where the number represents the day of the week identifier. According to JS standards, the days of the week start with 0, and 0 is Sunday.

### Type
Number

### Default
`1`

### Options
`from 0 to 6`

### Example
```ts
new Calendar('#calendar', {
  firstWeekday: 1,
});
```
```

--------------------------------

### Enable Time Selection Mode

Source: https://vanilla-calendar.pro/docs/reference/settings

Set `selectionTimeMode` to `true` to enable time selection. You can also specify `24` or `12` to set the time format.

```typescript
new Calendar('#calendar', {
  selectionTimeMode: true,
});
```

--------------------------------

### type

Source: https://vanilla-calendar.pro/docs/reference/settings

Defines the type of calendar displayed. Options include 'default', 'multiple', 'month', and 'year'.

```APIDOC
## type

### Description
Defines the type of calendar displayed.

### Type
String

### Default
`'default'`

### Options
`'default' | 'multiple' | 'month' | 'year'`

### Example
```ts
new Calendar('#calendar', {
  type: 'default',
});
```
```

--------------------------------

### timeMaxMinute

Source: https://vanilla-calendar.pro/docs/reference/settings

Specifies the maximum minute that can be selected, ranging from 0 to 59.

```APIDOC
## timeMaxMinute

### Description
This parameter specifies which minute will be the maximum for selection.

### Type
`Number`

### Default
`59`

### Options
`from 0 to 59`

### Example
```ts
new Calendar('#calendar', {
  timeMaxMinute: 59,
});
```
```

--------------------------------

### onClickWeekDay()

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered after clicking on a weekday in the calendar. It provides a reference to the calendar instance, the specific day clicked, an array of HTML elements representing the days, and the mouse event.

```APIDOC
## onClickWeekDay()

### Description
This method is triggered after clicking on a weekday in the calendar. You can get the following parameters:
  * `self` - reference to the initialized calendar;
  * `day` - week day;
  * `dateEls` - array of days (html elements);
  * `event` - mouse event.

### Method
`onClickWeekDay(self, day, dateEls, event) => void | null`

### Example
```ts
new Calendar("#calendar", {
  onClickWeekDay(self, day, dateEls, event) {},
});
```
```

--------------------------------

### Initialize Calendar in Input Element

Source: https://vanilla-calendar.pro/docs/reference/creating-an-instance

Initialize the calendar to appear as a popup when an input element (like an input tag or a div) is clicked. Set the `inputMode` option to `true` for this behavior.

```html
<input type="text" id="input">
<!-- or -->
<div id="input"></div>
```

```typescript
new Calendar('#input', { inputMode: true });
// or
const calendarInput = document.querySelector('#input');
new Calendar(calendarInput, {
  inputMode: true,
});
```

--------------------------------

### dateMin

Source: https://vanilla-calendar.pro/docs/reference/settings

Sets the minimum allowable date that the calendar will consider.

```APIDOC
## dateMin

### Description
Sets the minimum allowable date that the calendar will consider and which cannot be less than this date.

### Parameters
* **dateMin** (String | Date object | Number) - Required - The minimum date. Accepts 'YYYY-MM-DD', a Date object, a timestamp, or 'today'. Defaults to '1970-01-01'.

### Request Example
```typescript
new Calendar('#calendar', {
  dateMin: '1970-01-01',
});
```
```

--------------------------------

### onCreateMonthEls()

Source: https://vanilla-calendar.pro/docs/reference/actions

Triggered when the calendar type is 'month', this method provides access to each month's HTML element.

```APIDOC
## onCreateMonthEls()

### Description
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.

### Method Signature
`onCreateMonthEls(self, monthEl) => void | null`

### Example Usage
```javascript
new Calendar('#calendar', {
  type: 'month',
  onCreateMonthEls(self, monthEl) {
    console.log('Month element created:', monthEl);
  }
});
```
```

--------------------------------

### monthsToSwitch

Source: https://vanilla-calendar.pro/docs/reference/settings

Controls the number of months that can be switched at once.

```APIDOC
## monthsToSwitch

### Description
The `monthsToSwitch` parameter controls the number of switchable months.

### Type
Number

### Default
`1`

### Options
`from 1 to 12`

### Example
```ts
new Calendar('#calendar', {
  monthsToSwitch: 1,
});
```
```

--------------------------------

### Import VanillaCalendar Component in Vue App

Source: https://vanilla-calendar.pro/docs/learn/components-for-libraries-vue

Demonstrates how to import the custom VanillaCalendar component into another Vue component or your main application file.

```vue
<script setup lang="ts">
// ...
import VanillaCalendar from './VanillaCalendar.vue';
// ...
</script>
```

--------------------------------

### Default Year Layout Configuration

Source: https://vanilla-calendar.pro/docs/reference/layouts

Configures the default year selection layout for the calendar. This template defines the structure for displaying years and navigation controls.

```typescript
new Calendar('#calendar', {
  layouts: {
    year: `
      <div class="${self.styles.header}" data-vc="header" role="toolbar" aria-label="${self.labels.navigation}">
        <#ArrowPrev [year] />
        <div class="${self.styles.headerContent}" data-vc-header="content">
          <#Month />
          <#Year />
        </div>
        <#ArrowNext [year] />
      </div>
      <div class="${self.styles.wrapper}" data-vc="wrapper">
        <div class="${self.styles.content}" data-vc="content">
          <#Years />
        </div>
      </div>
    `
  }
});
```

--------------------------------

### onChangeToInput Action

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered after a day is clicked or the time is changed, provided `inputMode` is true. It provides the calendar instance and the event object.

```typescript
new Calendar('#calendar', {
  onChangeToInput(self, event) {},
});
```

--------------------------------

### onClickDate()

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered after clicking on a day in the calendar. It provides a reference to the calendar instance and the mouse event. Each HTML day element includes a data attribute with the full date in 'YYYY-MM-DD' format, allowing for easy extraction of date components.

```APIDOC
## onClickDate()

### Description
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`.

### Method
`onClickDate(self, event) => void | null`

### Example
```ts
new Calendar("#calendar", {
  onClickDate(self, event) {},
});
```
```

--------------------------------

### timeMinMinute

Source: https://vanilla-calendar.pro/docs/reference/settings

Specifies the minimum minute that can be selected, ranging from 0 to 59.

```APIDOC
## timeMinMinute

### Description
This parameter specifies which minute will be the minimum for selection.

### Type
`Number`

### Default
`0`

### Options
`from 0 to 59`

### Example
```ts
new Calendar('#calendar', {
  timeMinMinute: 0,
});
```
```

--------------------------------

### onClickYear()

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered after a year is selected in the calendar. It provides the calendar instance and the mouse event.

```APIDOC
## onClickYear()

### Description
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.

### Method
`onClickYear(self, event) => void | null`

### Example
```ts
new Calendar("#calendar", {
  onClickYear(self, event) {},
});
```
```

--------------------------------

### onShow Action

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered when the calendar is displayed to the user, but only if the `inputMode` parameter is set to `true`.

```typescript
new Calendar('#calendar', {
  onShow(self) {},
});
```

--------------------------------

### Handle Month Selection with onClickMonth

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered after a month is selected in the calendar. It provides the calendar instance and the mouse event.

```typescript
new Calendar('#calendar', {
  onClickMonth(self, event) {},
});
```

--------------------------------

### Set Calendar Locale

Source: https://vanilla-calendar.pro/docs/reference/settings

Configures the language and localization settings for the calendar. Supports BCP 47 language labels or custom month/weekday names.

```typescript
new Calendar('#calendar', {
  locale: 'en',
  // Or specify an object for your labels
  // locale: {
  //   months: {
  //     long: [],
  //     short: [],
  //   },
  //   weekday: {
  //     long: [],
  //     short: [],
  //   }
  // },
});
```

--------------------------------

### onCreateMonthEls Action

Source: https://vanilla-calendar.pro/docs/reference/actions

This method is triggered when the calendar type is 'month', providing access to each month's HTML element. It's called during initialization or when the type is set to 'month'.

```typescript
new Calendar('#calendar', {
  onCreateMonthEls(self, monthEl) {},
});
```

--------------------------------

### Import VanillaCalendar Component

Source: https://vanilla-calendar.pro/docs/learn/components-for-libraries-react

Import the custom VanillaCalendar component into your React application to render the calendar.

```tsx
import VanillaCalendar from './VanillaCalendar';
```
Tokens:
Raw