Search code examples
jsfprimefacesjsf-2calendar

Changing first day of the week in PrimeFaces calendar

Hello I am using PrimeFaces p:calendar component, my question is that how to set Monday to be the first day of the week, not Sunday (default)?

Code for the tag p:calendar:

<p:calendar id="toDate" label="#{msg.date_to_report}"
    value="#{dailyCashierReport.toDate}" showOn="button" pattern="dd-MM-yyyy" />

Reference Image

Solution

  • For changing just first day of the week, set locale="en_US" or locale="en_GB" (As Primefaces has only the English language in default) to the p:calendar component as:

    <p:calendar id="toDate" label="#{msg.date_to_report}" locale="en_GB"
    value="#{dailyCashierReport.toDate}" showOn="button" pattern="dd-MM-yyyy" />

    And add following JavaScript in your template / view:

    <script>
    PrimeFaces.locales['en_GB'] = {
        firstDay : 1
    };
</script>

    But, if you want to change the language as well, then see the following reference links for other available options.

    Customize first Day of the Week in PrimeFaces Calendar
    PrimeFaces Locales