Highlight specific days

[Dimas-sc]

Hi,

I'd like to highlight specific days in the month view, is it possible? I need to highlight the holidays (not disabling them, only highlight)
In other datepicker scripts you can add custom CSS classes to specific days with events like "beforeShowDay".

I'm using version 5 for Bootstrap 4

Thx

[Eonasdan]

For v5, you'd have to listen to the show or update event. Each date has a data attribute e.g. data-day="05/11/2021" in V6 I'm considering some kind of prerender function devs could hook into

[moh19814]

I am having the same problem on V6. Is there any solution for that?

[Dimas-sc]

Ok, thx, it'd very helpful having this on v6!

At the moment I solved this way:

$("#startDate-front, #endDate-front").on("show.datetimepicker update.datetimepicker", function (e) {
    highlight_holidays(this, holidays);
});

function highlight_holidays(datepicker, holidays) {
    const calendar_days = $('.datepicker-days', $(datepicker)).find(".day").toArray();
    for (var i = 0; i < calendar_days.length; i++) {
        const calendar_day = calendar_days[i].getAttribute("data-day");
        if (holidays.indexOf(calendar_day) > -1) {
            calendar_days [i].classList.add('highlighted')
        }
    }
}

[Dimas-sc]

How can avoid loosing the highlights after selecting a date? Demo: https://www.dropbox.com/s/bzlwaowlb5j7d81/highlight.mp4?dl=0

[moh19814]

Did you find a solution for that?