Custom buttons for p-calendar in Primeng

Question

I am trying to integrate custom buttons apart from Today and Clear in p-calendar.Is there any way to that? Also, how do I change the label 'Clear' to something like 'Empty' ?

Thanks

Answer 1

To change Clear label, just use the locale property (see Localization part from the doc).

To add custom buttons, you can add a custom template (see Custom Content part from same doc).

<p-calendar [(ngModel)]="dateValue" showButtonBar="true" [locale]="en">
    <p-footer>Cutom footer with custom buttons</p-footer>
</p-calendar>

and

en: any;

ngOnInit() {

    this.en = {
      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 it !!!'
    };


}