Calendar: view="month" does not highlight selected month in PrimeNG 15.1.1

[ridy01-backup]

Describe the bug

If you select a month and when the calendar selectionMode is set to "multiple" or "range" and view="month", the selected month won't show up (it does not become blue) but it will be appended in the input field (and in ngModel).

It worked on PrimeNG12 perfectly but now we decided to upgrade to 15 so a downgrade is not possible.

Environment

Windows 10 Chrome latest version

Reproducer

https://stackblitz.com/edit/primeng-calendar-demo-ub5muf?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts.

Angular version

15.1.1

PrimeNG version

15.1.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.12.1

Browser(s)

No response

Steps to reproduce the behavior

Just set view to "month" and selectionMode to "range" or "multiple".

<p-calendar [(ngModel)]="dates" [selectionMode]="'multiple'" view="month"

Expected behavior

Selected month must be highlighted blue.

[ridy01-backup]

https://github.com/primefaces/primeng/issues/8055 this ticket seems to be similar but now it does not event get colored blue if also selected manually...

[mcrtricolor]

I have the same problem. The value doesn't get highlighted if calendar type is 'month'.

[mcrtricolor]

Any news on this? If I upgrade to angular 16 does it get fixed?

[panky98]

I am having the same issue after updating from PrimeNG v13 to v16. Somewhere in between this has been broken. Any updated if this is going to be fixed at some point? Seems that in new version, p-highlight class is not attached to the selected month :)

[rtsinc]

As 8055 states, it doesn't work unless it's the 1st day of the month. Still an issue in version 16. Below is from https://primeng.org/calendar

[UrvijaJha]

@ridy01-backup @mcrtricolor @rtsinc @panky98 @vincent highlightCurrentMonth() { const monthElements = document.querySelectorAll('.p-monthpicker-month'); const currentMonthIndex = new Date().getMonth(); if (this.lastSelectedIndex !== null && monthElements[this.lastSelectedIndex]) { const selectedMonthElement = monthElements[this.lastSelectedIndex] as HTMLElement; this.applyHighlightStyles(selectedMonthElement, 'selected-month-highlight'); this.selectedMonthElement = selectedMonthElement; } else if (monthElements[currentMonthIndex]) { const currentMonthElement = monthElements[currentMonthIndex] as HTMLElement; this.applyHighlightStyles(currentMonthElement, 'current-month-highlight'); this.currentMonthElement = currentMonthElement; } monthElements.forEach((element, index) => { const monthElement = element as HTMLElement; if (!monthElement.hasAttribute('click-listener-added')) { this.addClickListener(monthElement, index, currentMonthIndex); monthElement.setAttribute('click-listener-added', 'true'); } }); } addClickListener(monthElement: HTMLElement, index: number, currentMonthIndex: number) { this.renderer.listen(monthElement, 'click', () => { if (this.selectedMonthElement && this.selectedMonthElement !== monthElement) { this.clearHighlightStyles(this.selectedMonthElement, 'selected-month-highlight'); } this.applyHighlightStyles(monthElement, 'selected-month-highlight'); this.selectedMonthElement = monthElement; this.lastSelectedIndex = index; if (this.currentMonthElement && index !== currentMonthIndex) { this.clearHighlightStyles(this.currentMonthElement, 'current-month-highlight'); this.currentMonthElement = null; } }); } applyHighlightStyles(element: HTMLElement | null, highlightClass: string) { if (element) { element.classList.add(highlightClass); } } clearHighlightStyles(element: HTMLElement | null, highlightClass: string) { if (element) { element.classList.remove(highlightClass); } } write this function in ts. and

/ Highlight for the selected month / .selected-month-highlight { background-color: #007ad9 !important; color: white !important; }

/ Highlight for the current month when it's grayed out / .current-month-grayed { background-color: #a5acb3 !important; color: white !important; }

/ Highlight for the current month / .current-month-highlight { background-color: #007ad9 !important; color: white !important; }

this in global css