biletiki.store — a website example for searching for flight tickets and hotels using vanilla-calendar.
Popups
Popups allow you to highlight any day and display brief information about it directly in the calendar when you hover over that day.
popups['date']
Type: String
Default: null
Options: 'YYYY-MM-DD': | null
new VanillaCalendar('#calendar', {
popups: {
'2022-06-28': {},
}
});new VanillaCalendar('#calendar', {
popups: {
'2022-06-28': {},
}
});Use dates in the format YYYY-MM-DD as the key. In the example provided, a popup is set for June 28, 2022.
popups['date'].modifier
Type: String
Default: null
Options: CSS classes | null
new VanillaCalendar('#calendar', {
popups: {
'2022-06-28': {
modifier: 'bg-red color-pink',
},
}
});new VanillaCalendar('#calendar', {
popups: {
'2022-06-28': {
modifier: 'bg-red color-pink',
},
}
});The modifier accepts arbitrary CSS classes separated by spaces. You can use these classes to style the date, making it stand out or changing its appearance.
popups['date'].html
Type: String
Default: null
Options: '' | HTML | null
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',
},
}
});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',
},
}
});The html accepts plain text or HTML markup for styling the popup.
In this example, hovering over June 28, 2022, will display a popup with the text "Airplane in Las Vegas" and the time "12:00 PM," and it will apply the styles specified in the bg-red and color-pink classes.