How do you style first date and last date of a range p-calendar? #84
-
Hii Is there a property to style the first date and last date of a p-calendar from PrimeNG. When styling the p-highlight it changes all elements in the range to the style. Is there a way to specify the first element and last element styles in css to create a range selection like the following: |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Hi, Unfortunately, the calendar component doesn't have a feature that changes only first and last dates of the range value. However, you can open an issue requesting that feature on the repo. I'm not sure but that might help, but the result won't be the same as in the screenshot: 1-) Access view of the calendar For now, I don't see a possible solution by just CSS, but some javascript can help you as I mentioned above. |
Beta Was this translation helpful? Give feedback.
Hi,
Unfortunately, the calendar component doesn't have a feature that changes only first and last dates of the range value. However, you can open an issue requesting that feature on the repo.
I'm not sure but that might help, but the result won't be the same as in the screenshot:
1-) Access view of the calendar
2-) Get the elements with the .p-highlight class or get the elements of selected dates.
3-) Append styles to first and the last element or append a class that can make changes you want.
For now, I don't see a possible solution by just CSS, but some javascript can help you as I mentioned above.