v2.9.10
💢 Пример использования

biletiki.store — пример сайта для поиска авиабилетов и отелей с помощью vanilla-calendar.

Дополнительно

Поп-апы

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

popups['date']

Type: String

Default: null

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

js
new VanillaCalendar('#calendar', {
  popups: {
    '2022-06-28': {},
  }
});
js
new VanillaCalendar('#calendar', {
  popups: {
    '2022-06-28': {},
  }
});

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

popups['date'].modifier

Type: String

Default: null

Options: CSS classes | null

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

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

popups['date'].html

Type: String

Default: null

Options: '' | HTML | null

js
new VanillaCalendar('#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',
    },
  }
});
js
new VanillaCalendar('#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.