---
title: Создание экземпляра
description: Узнайте, как создать экземпляр Vanilla Calendar Pro, используя CSS-селектор или HTML-элемент. Настройте календарь для инициализации в оболочке или всплывающем окне при клике на элемент.
section: 1
---

# Создание экземпляра

`new Calendar()` - создает экземпляр **Vanilla Calendar Pro**, представляющий собой инкапсуляцию календаря, его настройки и методы.

<Info>Если вы подключили **Vanilla Calendar Pro** с помощью тега `<script>`, объект доступен как глобальная переменная **window.VanillaCalendarPro**.</Info>

Экземпляр `Calendar`, принимает два параметра. Первым **обязательный** параметр может быть **CSS-селектором** или **HTML-элементом**.

**CSS-селектор** или **HTML-элемент** может представлять собой оболочку для календаря, в которой будет произведена инициализация календаря, или **«Input»**.

Оболочка для календаря - это тег `<div>`, внутри которого будет инициализирован сам календарь.

Инициализация в оболочке календаря:

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

```ts
new Calendar('#calendar');
// или
const calendarEl = document.querySelector('#calendar');
new Calendar(calendarEl);
```

**«Input»** в контексте этого календаря не обязательно означает тег `<input>`, это может быть любой HTML-элемент, например, `<div>`.

При клике на **«Input»** появится всплывающее окно с календарем.

Инициализация в **«Input»**:

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

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

Второй **необязательный** параметр — это объект, определяющий настройки и действия календаря.

```ts
new Calendar('#calendar', {
  // Настройки
});
```
