• Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Post job
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

252
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.

enter image description here

<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.

over 1 year ago · Juan Pablo Isaza
1 answers
Answer question

0

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:

enter image description here

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.

over 1 year ago · Juan Pablo Isaza Report
Answer question
Find remote jobs