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

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

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

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.