2

I am working on an existing JSF Primefaces 8 project with previous developers long gone and I have in general become reasonably competent over the last year or so, but the one thing that still escapes me is styling. I believe the project is using something like sass.

I have a couple of p:calendar elements in readOnly mode (no free form date entry) that make up a 'from date' & 'to date' combination. I am restricting them with each other via minDate & maxDate to ensure that 'to date' is greater/equal than 'from date'.

So far so good and while it does work I would like to make it visually clearer that certain dates are not available. As in 'gray out' the unavailable dates. Unfortunately it does not render like that, the unavailable dates have the same text color & background as the valid ones.

When I inspect the unavailable ones I get this

<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">23</span></td>

so I think I need to overwrite the text color for this class, right? But how do I go on about that?

I found the following in src/resources/sass/_forms.scss

    .ui-datepicker-calendar {
        font-size: 13px;
        margin: 8px 0 0 0;
        padding: 8px;

        td {
            padding: 2px;
            a {
                color: $text-color-primary;
                text-align: center;
                @include border-radius-all($border-radius);
            }

            &.ui-datepicker-today a {
                background-color: $panel-background-color-darkest;
            }

            a.ui-state-active {
                background-color: $highlight-primary-color;
                color: $text-color-white;
            }
        }
    }

I do realize I need to learn the principle here in the very near future but any quick help would be appreciated all the same.

Thanks for your time

CalleWirsch
  • 95
  • 9
  • 1
    Does this answer your question? [How do I override default PrimeFaces CSS with custom styles?](https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) – Jasper de Vries Jan 26 '23 at 14:17
  • It may well do, but I don't even know enough to know or not. I guess I need to educate myself on the basics and now is as good a time as any. Thanks for the reply and the link in any case. I had seen this post as part of my searches but it left me just with more questions. Mindless monkey playing with it didn't change anything in my app, didnt even break it :D – CalleWirsch Jan 26 '23 at 15:08

1 Answers1

0

I got to the bottom of it. I needed to tweak the datepicker styles in one of my SASS (.scss) files and added to '.ui-datepicker-calendar {}' the following section:

    .ui-datepicker-unselectable .ui-state-default {
        color: $color-grey-lighten-3;
    }

This link helped me greatly: https://www.hongkiat.com/blog/jquery-ui-datepicker/

CalleWirsch
  • 95
  • 9