How do I set shown month when using primeng calendar with multiple selection?

284 Views Asked by At

I have an inline primeNg Calendar with multiple selection. I want it to show the month of a date I included in the model and when I remove some date from the model I want it show the current date. I tried to use defaultDate={{value}}, minDate={{value}} as seen in some SO answers but nothing worked. AFAIU the documentation doesn't mention any method to set current month being displayed.

How do I programmatically change the month being displayed with multiselection ? This is my html:

<p-calendar [(ngModel)]="dates" [defaultDate]="currentCalDate" [disabledDays]="[0,1, 2, 3, 4, 5, 6]" [readonlyInput]="true"
    selectionMode="multiple" [inline]="true"></p-calendar>

this is how I set selected dates and the date I want to be shown currently:

this.dates = this.myevents.filter(a=>a.marked).map(a => new Date(a.startDate));
this.currentCalDate = myevent.marked ? new Date(myevent.startDate) : new Date();

This is an Agular frontend.

2

There are 2 best solutions below

0
Nelson Teixeira On BEST ANSWER

I made it work like this:

this.calendario.defaultDate = myevent.marked ? new Date(event.startDate) : newDate();
this.calendario.updateModel(this.myevents.filter(e=>e.marked).map(a => new Date(e.startDate)));
1
Mouayad_Al On

To achieve the desired result, you can simply modify your code to place the desired date as the first element of your dates list. I implemented this change and confirmed that it functions correctly.