Search code examples
angularprimeng-calendar

set the month based on the route for the calendar month component


I have create a calendar component where I would like to select the default month or based on the route parameters that are getting for the component

Here is the calendar

<p-calendar [maxDate]="dateTime" [(ngModel)]="selectedMonth" name="selectedMonth" dateFormat="MM" view="month" [yearNavigator]="true"
    [monthNavigator]="true" (onSelect)="updateDaysInMonth($event)" [ngModelOptions]="{standalone: true}"
    [readonlyInput]="true"></p-calendar>

In my component I am calling like this

<app-calendar class="p-element mr-2"></app-calendar>

Here is the stackblitz for the same https://stackblitz.com/edit/uvubg7?file=src%2Findex.html.

I will get the month in queryparams where I will read as follows

this.route.queryParams.subscribe(params => {
      const month = params['month'];
      const year = params['year'];

      if (month) {
        this.showTimesheets(month, year);
      }
    });

I would like to show that month(example January/February) by default upon routing the component


Solution

  • OK I am able to figure it out when the component was called the parent component is called initially and then child was loaded. So I did this way

    ngOnInit(): void {
        this.route.queryParams.subscribe(params => {
          this.selectedMonth = new Date(params['year'], params['month'] - 1, 1);
        });
      }