Question

0

101

Views

PrimeNG Calendar custom year range

I'm trying to redesign PrimeNG Calendar component.

I'd like to make my custom header, and custom year range.

<p-calendar [formControl]="control">
  <ng-template pTemplate="header">
    <div>Custom header</div>
  </ng-template>
</p-calendar>

If I use this content projection, I get new header line, but I don't overwrite origin header. I would like to display years in 3 columns. When I overwrite styles, I get 3 columns, but for 3 columns I need 12 years instead of 10. In the documentation there is the decade parameter, but I don't know how to use it.

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-06-30T10:16:07.162Z

Add the following style to your CSS:

p-calendar .p-calendar .p-datepicker .p-yearpicker .p-yearpicker-year {
    width: 33.3%;
}

If it doesn't work right away, try adding ::ng-deep at the beginning of the selector:

::ng-deep p-calendar .p-calendar .p-datepicker .p-yearpicker .p-yearpicker-year {

If it still doesn't work, add !important:

width: 33.3% !important;

This should be the result:

Note: The element structure might differ between different versions of PrimeNG so if it doesn't work, let me know which version you're using. Also, if you update the PrimeNG version, you'll might have to make changes to the CSS.

Edit: Unfortunately, the number of years that appear in the list is currently hardcoded to be 10. This can be seen in this file in the method yearPickerValues():

yearPickerValues() {
    let yearPickerValues = [];
    let base = this.currentYear -  (this.currentYear % 10);
    for (let i = 0; i < 10; i++) { // <-- here
        yearPickerValues.push(base + i);
    }

    return yearPickerValues;
}

You can open an issue on their GitHub page and ask them to add an input perhaps.