Popups

When upgrading from a version without extensions, keep your existing options and callbacks. For ESM, add the named import and register annotations in the constructor with extensions: [annotations]. Do not call the extension. Importing or registering it does not enable the feature by itself.

This requirement applies to the popups option, including entries with only modifier. It does not apply to the calendar opened by inputMode or the range tooltip (onCreateDateRangeTooltip).

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' | 'YYYY-MM-DD:YYYY-MM-DD' | null

import { Calendar, annotations } from 'vanilla-calendar-pro';
 
new Calendar('#calendar', {
  extensions: [annotations],
  popups: {
    '2022-06-28': {},
    '2022-07-01:2022-07-05': {},
  }
});

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

import { Calendar, annotations } from 'vanilla-calendar-pro';
 
new Calendar('#calendar', {
  extensions: [annotations],
  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

This API accepts HTML. Use trusted markup, or configure sanitizerHTML when content comes from users or other untrusted sources; the default callback does not sanitize it.

Type: String

Default: null

Options: '' | HTML | null

import { Calendar, annotations } from 'vanilla-calendar-pro';
 
new Calendar('#calendar', {
  extensions: [annotations],
  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.