Customize first day of the week in Primefaces calendar

Goal

We want to specify the first day of the week in a Primefaces calendar

Description

In my Web application, I had the need to present Monday as the first day of the week, instead of the default Sunday. After a quick search on Google about how to change that behaviour, I got to the Primefaces forum where Primefaces leader says that the answer is to use a specific locale.

How to

My first attempt was to simply put the locale string in the calendar’s attribute as in:

<p:calendar value="myBean.date" locale="pt" />

but the result was basically nothing, i.e., all strings and the first day of the week was still being shown in the default english.

Another quick search, and I got to Primefaces Wiki where they clearly state that Components like calendar and schedule uses a shared PrimeFaces Locales property to display localized labels. PrimeFaces only provides English translations, add the corresponding locales in a javascript file to your application to support more locales for components that can be localized. (by the way, the same kind of warning is specified in Primefaces’ user guide)

So, all I had to do was specify a definition for the locale “pt” in my application’s javascript file, as follows (notice the definition of the firstDay attribute as 1, meaning Monday – it starts in 0, for Sunday):

PrimeFaces.locales['pt'] = {
  closeText : 'Fechar',
  prevText : 'Anterior',
  nextText : 'Seguinte',
  currentText : 'Início',
  monthNames : [ 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
                 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' ],
  monthNamesShort : [ 'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago',
                      'Set', 'Out', 'Nov', 'Dez' ],
  dayNames : [ 'Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta',
               'Sábado' ],
  dayNamesShort : [ 'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb' ],
  dayNamesMin : [ 'D', 'S', 'T', 'Q', 'Q', 'S', 'S' ],
  weekHeader : 'Semana',
  firstDay : 1,
  isRTL : false,
  showMonthAfterYear : false,
  yearSuffix : '',
  timeOnlyTitle : 'Só Horas',
  timeText : 'Tempo',
  hourText : 'Hora',
  minuteText : 'Minuto',
  secondText : 'Segundo',
  ampm : false,
  month : 'Mês',
  week : 'Semana',
  day : 'Dia',
  allDayText : 'Dia completo'
};

And that was it. I got my calendar in Portuguese text and Monday as the first day of the week, as expected.

Explanations

Without the inclusion of the locale’s definition (whose key must match the key for the locale specified in the attribute locale of the calendar component, no locale specific behaviour will be applied to your calendar.

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s