How to add extra class with easepick

Question

Please Help! How to add "myCss" class for one date before bookedDates? (17 Aug and 17 Sep in my example). The idea is to paint a different color day before booked. This is example code for which I am trying to do this:

const DateTime = easepick.DateTime;
const bookedDates = [
    '18-08-2022', '19-08-2022', '20-08-2022', '18-09-2022', '19-09-2022', '20-09-2022',
].map(d => {
    if (d instanceof Array) {
        const start = new DateTime(d[0], 'DD-MM-YYYY');
        const end = new DateTime(d[1], 'DD-MM-YYYY');
        return [start, end];
    }
    return new DateTime(d, 'DD-MM-YYYY');
});
const picker = new easepick.create({
    element: document.getElementById('datepicker'),
    css: [
        'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
        'https://easepick.com/css/demo_hotelcal.css',
    ],
    readonly: true,
    zIndex: 10,
    format: "DD MMM YYYY",
    readonly: false,
    plugins: ['RangePlugin', 'LockPlugin'],
    RangePlugin: {
        tooltipNumber(num) {
            return num - 1;
        },
        locale: {
            one: 'night',
            other: 'nights',
        },
    },
    LockPlugin: {
        minDate: new Date(),
        minDays: 2,
        inseparable: true,
        filter(date, picked) {
            if (picked.length === 1) {
                const incl = date.isBefore(picked[0]) ? '[)' : '(]';
                return !picked[0].isSame(date, 'day') && date.inArray(bookedDates, incl);
            }
            return date.inArray(bookedDates, '[)');
        },
    }
});

<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>
<input readonly="readonly" id="datepicker"/>

Answer 1

You need to use a setup option in easepick.create({ ... }):

Before date

setup(picker) {
    picker.on('view', (event) => {
        const { view, target, date } = event.detail;
            if (view === 'CalendarDay') {
                const dayAfter = date.clone().add(1, 'day');

                if (
                  ! picker.options.LockPlugin.filter(date, picker.datePicked)
                  && picker.options.LockPlugin.filter(dayAfter, picker.datePicked)
                ) {
                    target.classList.add('myCss');
                }
            }
    });
},

After date

setup(picker) {
    picker.on('view', (event) => {
        const { view, target, date } = event.detail;
            if (view === 'CalendarDay') {
                const dayBefore = date.clone().subtract(1, 'day');

                if (
                  picker.options.LockPlugin.filter(dayBefore, picker.datePicked)
                  && ! picker.options.LockPlugin.filter(date, picker.datePicked)
                ) {
                    target.classList.add('myCss');
                }
            }
    });
}