Webpoint

Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc.

por Alexandre Magno

Home
Contato

Categorias

Arquivos

Plugin do Jcalendar em Português

Postado em Julho 19th, 2007 por Alexandre Magno

O Jquery oferece um Plugin para escolha de datas em campos de textos excelente. Ele se chama Jcalendar. Ele é amplamente customizável e a aparência pode ser controlada totalmente por CSS. O único problema que sua estrutura é em inglês e ao traduzir as strings no arquivo original, o layout bagunça um pouco. Então resolvi fazer uma versão em português para quem quiser implementar em seu site. Quem já tem implantado, basta substituir o arquivo.

Versão em Português do Jcalendar

CSS adpatdo do Jcalendar para a versão em Português

Como funciona o Jcalendar?

Para o seu funcionamento, estes dois arquivos tem que estar referenciados no head do documento(O Jquery, e o plugin):

Para o script:

<script src="jquery.js" type="text/javascript">
 
</script>
 
<script src="jquery.calendar.js" type="text/javascript">
 
</script>

Para o CSS:

 
<style type="text/css">
  @import url(jquery-calendar.css);
</style>

Depois disto, para aplicar um simples calendário, utilize as seguintes linhas:

$('input selector').calendar();

É possível também passar várias configurações, como autopopup, ícone em image, o formato da data etc.

Alguns exemplos do Jcalendar

Parâmetros

O código para o segundo exemplo encontra-se abaixo:

$('input selector').calendar({autoPopUp: 'both',
 
  buttonImageOnly: true,
 
  buttonImage: 'calendar.gif',
 
  buttonText: 'Calendar'});

Assim, com esses parâmetros você especifica uma imagem para servir de ícone como calendário:

autoPopUp - Especifica se o calendário vai aparecer quando o usuário der focus no campo (focus), quando o ícone for clicado (buttom), ou em ambos os casos(both)
buttomImageOnly - Coloca somente a imagem, aceita true ou false
buttomImage - especifica a imagem que será o ícone do calendário
buttomText - especifica o texto do calendário

Se desejar mudar o layout, apenas modifique o CSS. Uma boa maneira de se orientar na hora de montar é usar o firebug para ver o nome das classes e ids no formulário, mas fica a critério de vocês.

Considerações finais

O jCalendar não funciona no IE 6 e 7 se for referenciado no script sem o import, portanto, não deixem de colocar como está listado acima. O Opera apresenta um bug no dimensionamento do box do calendário. Vou tentar solucionar e posto aqui quando conseguir, mas ele funciona muito bem na maioria dos Browsers. Se tiverem algum problema, comentem que eu posso ajudar quando for possível.

Comentários

Assine o RSS para comentários

Neto comentou:

29th Agosto, 2007 às 9:33 am

Muito bom!

Breno comentou:

5th Outubro, 2007 às 8:32 am

E o problema do Opera, resolveu??? Fora isso, perfeito…

Breno comentou:

5th Outubro, 2007 às 8:37 am

Desculpe-me postar novamente, mas é que consegui resolver o problema do OPERA… caso alguém não tenha solucionado ainda, no class do css ‘calendar_div’ acrescente ‘width:185px;’, sem as aspas, óbvio… aqui funfou… obrigado…

admin comentou:

5th Outubro, 2007 às 10:35 am

Que isso breno, poste quantas vezes quiser, muito obrigado pela solução do problema, só estava faltando este pequeno detalhe para ficar perfeito…

abraços…

Rafael Soares comentou:

20th Maio, 2008 às 12:52 pm

E ai rapaz, tuo Bem? Bem, muito bom o POST, realmente me ajudou bastante, só tive um contratempo estranho, que as vezes acontece comigo usando JQuery. Eu peguei a ultima versão da JQuery no site oficial, estava usando ela para fazer meus scripts. No entando, estava tendo problemas com o JCalendar, pois quando eu clicava no ícone para abrir o calendario, ele não abria, só abria quando licava na Input Text, por mais que eu colocasse o parametro “autoPopUp: ‘both’.”. Decidi então pegar o JQuery que você usou, e tcharam! Funcionou!! Bem, seria legal talvez você testar alguma hora e ver se tem algo que se possa fazer para funcionar com a ultima versão da Jquery(que deveria ser a que tem menos Bugs!).

Bem, é isso, um abraço e parabéns pelo blog!

Att.
Rafael S.

admin comentou:

21st Maio, 2008 às 11:22 am

@Rafael: Muito obrigado Rafael. A questão não é tanto bug na nova versão do jQuery, mas alguns plugins em novas versões tornam-se incompatíveis dependendo da maneira como foram feitos. Muitas vezes os desenvolvedores de plugins não lançam uma versão nova que adapta a novas versões. E isto gera muitos bugs, mas plugins consagrados, como o interface são incompatíveis com versões novas. Abraços e boa sorte!

Pyro comentou:

10th Outubro, 2008 às 2:05 pm

Esse foi o único exemplo simples e funcional do jQuery Calendar, só que no meu caso eu preciso utilizar em vários campos no mesmo formulário, e em determinado ponto dá um erro alegando que tem muitos campos e não preenche mais.
Alguém aqui já passou por isso?

Alexandre Magno comentou:

10th Outubro, 2008 às 2:18 pm

@Pyro: Por favor, passe alguma página de exemplo ou exatamente o erro e como você está utilizando o calendário. Abraços e boa sorte.

Eder Feliciano comentou:

15th Outubro, 2008 às 10:28 am

Olá Alexandre,
Muito bom este POST, so que tive um probleminha com a utilização dele.
Em algumas máquinas, quando abre o calendário, aparece como o dia 13/10/2008 sendo uma terça-feira, quando o correto é segunda-feira.

Você já teve este tipo de problema? Tem alguma dica de como resolver?
Obrigado.

Alexandre Magno comentou:

16th Outubro, 2008 às 9:53 am

@Eder: Nunca vi este tipo de problema Eder. Vou dar uma olhada e se souber de algo te aviso. Se conseguir achar a solução poste aqui. Abraços.

claudio comentou:

4th Novembro, 2008 às 3:02 pm

Já pereceberam que o dia 11 de Outubro sai duplicado no Jcalendar.

Podem conferir incluisive no exemplo de este Blog?

Alguém sabe como corrigir?

Obrigado, Claudio

Amanda comentou:

11th Dezembro, 2008 às 3:47 pm

Olá! Muito bom mesmo o plugin Parabéns.
Quero relatar um probleminha que tem ocorrido comigo… De repente, do nada, o calendário começou a ficar leeeeento. clicava no input text e o calendário demorava a carregar, clicava no mês e demorava a carregar…Isso usando o Firefox. Testei no IE e no Chrome e a resposta ao click era normal. Desabilitei todos os complementos q uso no FF e isso aparentemente resolveu o “problema”, pelo que percebi o complemento que torna o jcalendar lento é o Firebug :\

Alexandre Magno comentou:

12th Dezembro, 2008 às 11:51 pm

@amanda: Provavelmente deve ser o Firebug mas em conjunto com o Firefox 3 que apresentava vários problemas na manipulação do DOM como no Thickbox. Abraços e boa sorte…

claudio comentou:

19th Dezembro, 2008 às 2:17 pm

O dia 11 de Outubro sai duplicado no Jcalendar.

Podem conferir incluisive no exemplo de este Blog?

Alguém sabe como corrigir?

Obrigado, Claudio

Joao Fonseca comentou:

29th Dezembro, 2008 às 7:59 am

Bom dia… desde ja parabens pelo calendário eu nao tenho mt pratica em jquery e gostaria de saber como fazer para que o calendário apareça na minha pagina assim que esta é carregada, pois nao tou conseguindo. se alguem me puder ajudar… obrigada

paulo manhani comentou:

4th Janeiro, 2009 às 8:53 pm

Olá amigo, eu tenho esse component JCalendar no meu netbeans e estou tentando usar ele pra uma aplicação desktop, só que não consigo dar evento de mouse nele, tipo eu queria que ao clicar numa data ele me abrisse uma nova janela tipo uma agenda…tem como vc me ajudar com algo..

Alexandre Magno comentou:

5th Janeiro, 2009 às 3:48 pm

@Joao: O plugin não foi feito para este propósito, pois ele em seu core anexa um evento para acontecer. Dê uma revisada no propósito que você deseja utilizar por que talvez não esteja da forma apropriada.

@Paulo: Por favor, me explique melhor para eu poder te ajudar, por que desta forma não ficou muito claro. abraços…

Odegar Medeiros comentou:

11th Junho, 2009 às 5:58 pm

Excelente
parabens pela publicação
fácil de usar
valeu!

Calendário para jQuery em português em Webpoint - Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc. comentou:

18th Junho, 2009 às 10:08 pm

[…] UI, Jquery Há um tempo atrás escrevi um post do plugin jCalendar em português. Ele é bastante visitado e gostaria muito de oferecer uma solução atual para este plugin usando […]

ana comentou:

26th Junho, 2009 às 5:34 pm

Preciso fazer com jsquery uma caixa amigável(calendário)numa página de edição para a pessoa escolhar as datas…..
pode me ajudar?

ana comentou:

26th Junho, 2009 às 5:35 pm

preciso fazer um calendário que possibilite a pessoa escolher asd datas na tela….
pode me ajudar?

Alexandre Magno comentou:

27th Junho, 2009 às 12:30 pm

@ana: voce precisa deste calendario mas que ele apareça na tela sem estar associado a um campo? Se possível explique melhor e mostre exemplos para que possa entender melhor.
Abraços e boa sorte…

Daniel Schultz comentou:

7th Julho, 2009 às 11:28 am

Gostei do seu exemplo! Mas como fazer calendários duplos com datas que nao se sobreponham ?

Alexandre Magno comentou:

7th Julho, 2009 às 6:44 pm

@Daniel: Dê uma olhada no post http://www.alexandremagno.net/blog/2009/06/18/calendario-para-jquery-em-portugues/ que é um exemplo mais atualizado deste calendário. Como seria estes múltiplos calendários??? Você quer um objeto de opções para vários? Em mais de um campo, explique melhor o que você deseja, pois para dois calendários basta fazer duas chamadas em campos diferentes. Espero ter ajudado, abraços e boa sorte…

Paulo comentou:

12th Julho, 2009 às 11:51 pm

Tudo bom pessoal…

Muito bom o post.
Seguinte resolvi testar o componente, porem quando o calendário é aberto ele fica em baixo dos box’s que ficam logo abaixo.
Alguem ai sabe resolver este problema colocando ele por cima de qualquer outro campo

master comentou:

20th Maio, 2010 às 6:32 pm

como é este plugin?

Alexandre Magno comentou:

22nd Maio, 2010 às 7:09 pm

@master: Já tem um post mais atualizado sobre esta funcionalidade. É um plugin de calendário para escolha de data em inputs para este fim.