---
title: Popups
description: Popups allow you to highlight any day and display brief information about it directly in the calendar when hovering over the day.
section: 6
---

# Popups

Popups allow you to highlight any day and display brief information about it directly in the calendar when hovering over the day.

## popups['date']

`Type: String`

`Default: null`

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

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

Dates in the format `YYYY-MM-DD` are used as keys. In the given example, a popup is set for June 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` accepts arbitrary CSS classes separated by spaces. Using these classes, you can style the date to make it highlighted or change its appearance.

---

## 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` accepts plain text or HTML markup for formatting the popup.
In this example, when hovering over June 28, 2022, a popup will be displayed with the text "Airplane in Las Vegas" and the time "12:00 PM", and the styles specified in the classes `bg-red` and `color-pink` will be applied.
