Calendar: Multiple Month/Year selection mode not highlighting selected month

[AbdelhakGuettaf]

Describe the bug

After taking a brief look, it seems like the isMonthSelected function in the calendar component is not functioning as it should:

   const isMonthSelected = (month) => {
        if (isComparable()) {
            let value = isRangeSelection() ? props.value[0] : props.value;
            return !isMultipleSelection() ? value.getMonth() === month && value.getFullYear() === currentYear : false;
        }
        return false;
    };

value is an array of dates when the selectionMode is multiple not a single date. Same could be for Years but I haven't checked

Reproducer

No response

PrimeReact version

9.6.2

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Selected months or years should be highlighted.

[melloware]

From that code it looks like if multiple selection it will always return false.

Looks like PrimeVue has the same code: https://github.com/primefaces/primevue/blob/fd51e4226e524b59d89ea7c9f08ee5482d84e488/components/lib/calendar/Calendar.vue#L673-L681

PrimeNG is slightly different but still returns false https://github.com/primefaces/primeng/blob/d7177ab835dc8bb61df7771deb26756742e7a439/src/app/components/calendar/calendar.ts#L1643

So I guess this is intentional?

[AbdelhakGuettaf]

It should return true if multipleSelection is true, but it doesn't because its comparing wrong values. If multiple selection is true then the props.value is an array.

[melloware]

Oh no i see what you mean. They are just sending back false but really it needs to loop over all the dates to see if it is selected.

[AbdelhakGuettaf]

My bad I didn't explain it well xD

[melloware]

Can you paste your exact config here like..

<Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="multiple" readOnlyInput />

So I can make mine the same?

[AbdelhakGuettaf]

Sure, also here's an example
<Calendar value={date} selectionMode="multiple" onChange={(e) => setDate(e.value)} view="month" dateFormat="mm/yy" readOnlyInput />

[melloware]

Perfect. PR submitted.