Initialize Vanilla Calendar Pro with custom pop-ups

HTML

<div id="calendar"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/styles/index.min.css">
<script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.min.js"></script>

JavaScript

const response = [{"date":"2026-05-20","desc":"Test #1"},{"date":"2026-05-25","desc":"Test #2"}];
document.addEventListener('DOMContentLoaded', () => {
    const { Calendar } = window.VanillaCalendarPro;
    const calendar = new Calendar('#calendar', {
        type: 'multiple',
        displayMonthsCount: 3,
        monthsToSwitch: 1,
        firstWeekday: 0,
        disableDatesPast: true,
        selectionDatesMode: 'multiple-ranged',
        popups: response.reduce((popups, {date, desc}) =>
            ({...popups, [date]: {modifier: 'stylePopup', html: `<div>${desc}</div>`}}), {})
    });
    calendar.init();
});