current day remain selected even if you change date

[Mat-tlb]

i notice that even if i change date on the calendar the current day remain higlithed with the custom background.

i want to disable this for user friendly questions

i'm using this plugin for a chek-in/check-out component.

Also it is possible to start another calendar and setting the current day to the next day based on the selected day of the previous calendar?

[jaredgibb]

Also it is possible to start another calendar and setting the current day to the next day based on the selected day of the previous calendar?

You should be able to add a change listener to the calendar and set the default date of the second calendar through the change event by grabbing the current date of the first calendar and adding some period of time to it.

[afzalzbr]

I'm facing the same issue that the current date still remains active when I choose any other date than today.
Is there any fix for it?

[makivlach]

EDIT:

It seems my original post have worked until the display: none was applied. The calendar widget probably just can't handle that style. So another workaround is to apply this style intead of display: none or visibility: hidden and just toggle it to show or hide:

CSS

.size-invisible {
    width: 0;
    height: 0;
    overflow: hidden;
}

Original post:

The problem seems to be caused by setting any kind of invisible style (display: none or visibility: hidden) on the container element node. The calendar does probably some kind of initialization during which the element must stay visible.

As an ugly workaround - you can set opacity: 0 to the calendar container and setTimeout to disable opacity after set amount of time (after the initialization is probably finished) and just let the calendar be display: none normally. E.g.:

HTML

<div id="calendar" class="opacity-1"></div>

JS

let calA = new Calendar({
        id: "#calendar",
        theme: "glass",
        weekdayType: "long-upper",
        startWeekday: 1,
        monthDisplayType: "long",
        headerBackgroundColor: "#b5b5b5",
        calendarSize: "small",
        layoutModifiers: ["month-left-align"],
        dateChanged: (currentDate, events) => {
            console.log('Clicked!')
        },
        monthChanged: (currentDate, events) => {
            console.log("month change", currentDate, events);
        }
    });

    setTimeout(() => {
        $('#calendar').toggleClass('invisible').toggleClass('opacity-100')
    }, 100)