Se você migrou do PrimeFaces 2.x para a versão 3.x, deve ter notado uma mudança importante: o calendário (p:calendar) não vem mais traduzido automaticamente para o português. Na versão 3, é necessário configurar manualmente o locale.
Este post mostra o passo a passo para configurar a tradução completa do componente.
Passo 1: Criar e Configurar o Arquivo JavaScript
Crie um arquivo (ex: primefaces-locale-pt_BR.js) e adicione o seguinte código:
PrimeFaces.locales['pt_BR'] = {
closeText: 'Fechar',
prevText: 'Anterior',
nextText: 'Próximo',
currentText: 'Hoje',
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-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', '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: 'Somente Hora',
timeText: 'Tempo',
hourText: 'Hora',
minuteText: 'Minuto',
secondText: 'Segundo',
ampm: false,
month: 'Mês',
week: 'Semana',
day: 'Dia',
allDayText: 'Dia Inteiro' };
Passo 2: Importar o JavaScript na Página
Inclua o arquivo criado em suas páginas XHTML/JSF. Você pode fazer isso de duas formas:
- Diretamente na página:
<h:outputScript name="js/primefaces-locale-pt_BR.js" /> - Em um template principal (recomendado), para que fique disponível em todas as páginas que usam
p:calendar.
Passo 3: Configurar o Componente p:calendar
No seu componente, adicione o atributo locale="pt_BR" para aplicar a tradução:
<p:calendar locale="pt_BR" showButtonPanel="true" navigator="true" id="ptCal" />Explicação das Configurações Principais
firstDay: 1: Define Segunda-feira como o primeiro dia da semana (padrão brasileiro).ampm: false: Configura o formato de 24 horas.currentText: 'Hoje': Texto do botão para voltar à data atual.allDayText: 'Dia Inteiro': Tradução para eventos de dia completo em agendas.
Dica Importante
Não se esqueça de importar o arquivo JavaScript nas páginas que utilizarem o componente p:calendar. Se sua aplicação usar um template (como Facelets templates), inclua o script nele para aplicar a tradução globalmente.
Dica de Boa Prática: Se sua aplicação for multilíngue, carregue este script condicionalmente com base no locale do usuário. Esta configuração também pode ser estendida para outros componentes do PrimeFaces que utilizam o mesmo objeto de localização.
Com esses passos, seu calendário do PrimeFaces 3 estará completamente traduzido e com a experiência do usuário adequada para o público brasileiro.