Попапы
При обновлении с версии без расширений сохраните прежние опции и обработчики. Для ESM добавьте именованный импорт и зарегистрируйте annotations в конструкторе: extensions: [annotations]. Вызывать расширение как функцию не нужно. Импорт или регистрация сами по себе не включают функцию.
Требование относится к опции popups, включая записи только с modifier. Для календаря, открываемого через inputMode, и тултипа диапазона (onCreateDateRangeTooltip) это расширение не требуется.
Попапы позволяют выделить любой день и выводить краткую информацию о нем прямо в календаре при наведении курсора на этот день.
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': {},
}
});В качестве ключа используются даты в формате YYYY-MM-DD. В приведенном примере установлен поп-ап для 28 июня 2022 года.
'YYYY-MM-DD:YYYY-MM-DD' (между датами можно использовать любой разделитель). Один и тот же поп-ап (modifier/html) применится ко всем дням этого диапазона — не нужно дублировать одинаковую запись для каждой даты.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 принимает произвольные CSS-классы, разделенные пробелами. С помощью этих классов вы можете стилизовать дату, чтобы сделать ее выделенной или изменить ее внешний вид.
popups['date'].html
Этот API принимает HTML. Используйте доверенную разметку либо настройте sanitizerHTML, если содержимое поступает от пользователей или из других недоверенных источников; по умолчанию обработчик ничего не очищает.
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 принимает обычный текст или HTML-разметку для оформления всплывающего окна.
В данном примере, при наведении курсора на 28 июня 2022 года, будет показано всплывающее окно с текстом "Airplane in Las Vegas" и временем "12:00 PM", а также применены стили, указанные в классах bg-red и color-pink.