how to use primeNg calendar "locale" for more than one value or dynamically and also change firstdate automaticaly?

Question

based on it for e.g if locale is france week day is from monday to sunday if german de its from saturday to sun how can i use more than one in locale

<p-calendar [(ngModel)]="value" [locale]="fr\de/?/??what i write here"></p-calendar>

//on ts file

this.de = {
      firstDayOfWeek: 1,
      dayNames: [, "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"],
      dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
      monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
      monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
      today: 'Today',
      clear: 'Clear',
      dateFormat: 'mm/dd/yy',
      weekHeader: 'Wk'
  };

this.fr = {
      firstDayOfWeek: 0,
      dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
      monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
      monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
      today: 'Today',
      clear: 'Clear',
      dateFormat: 'mm/dd/yy',
      weekHeader: 'Wk'
  };

Answer 1

in commponent .ts file

@Component({
  selector: 'app-calendar-demos',
  templateUrl: './calendar-demos.component.html',
  styleUrls: ['./calendar-demos.component.scss']
})
export class CalendarDemosComponent implements OnInit {
  value: Date;
  fday:number;
  _localeCal: any;
  x=Intl.DateTimeFormat().resolvedOptions().timeZone;

  constructor() { 
    if(this.x=='Asia/Calcutta'){
      this.fday=1;
    }
    else if(this.x==' Europe/Paris'||'USA'||'Canada/Pacific'){
      this.fday=0;
    }
  }


  ngOnInit(): void {
    var offset = new Date().getTimezoneOffset();
    console.log(offset);
    console.log(Intl.DateTimeFormat().resolvedOptions().timeZone);
    this._localeCal = {
      firstDayOfWeek:this.fday,
      dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
      monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
      monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
      today: 'Today',
      clear: 'Clear',
      dateFormat: 'mm/dd/yy',
      weekHeader: 'Wk'
  };

}


}

here we simply checking for time zone by using getTimezoneOffset() js fun.store it in variable and pass to firstweek day by checking condition on constructor to revoke automatically..console to see outcome. you can modify else if condition as your need.

in componen.html

<p-calendar [(ngModel)]="value" [locale]="_localeCal"></p-calendar>

calendar for utc region {{x}}

if you know other way please feel free to response. thanks