---
title: Попапы
description: Попапы позволяют выделить любой день и выводить краткую информацию о нем прямо в календаре при наведении курсора.
section: 6
---

# Попапы

Попапы позволяют выделить любой день и выводить краткую информацию о нем прямо в календаре при наведении курсора на этот день.

## popups['date']

`Type: String`

`Default: null`

`Options: 'YYYY-MM-DD': | null`

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

В качестве ключа используются даты в формате `YYYY-MM-DD`. В приведенном примере установлен поп-ап для 28 июня 2022 года.

---

## popups['date'].modifier

`Type: String`

`Default: null`

`Options: CSS classes | null`

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

`modifier`  принимает произвольные CSS-классы, разделенные пробелами. С помощью этих классов вы можете стилизовать дату, чтобы сделать ее выделенной или изменить ее внешний вид.

---

## popups['date'].html

`Type: String`

`Default: null`

`Options: '' | HTML | null`

```ts
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',
    },
  }
});
```

`html` принимает обычный текст или HTML-разметку для оформления всплывающего окна.
В данном примере, при наведении курсора на 28 июня 2022 года, будет показано всплывающее окно с текстом "Airplane in Las Vegas" и временем "12:00 PM", а также применены стили, указанные в классах `bg-red` и `color-pink`.
