Para inserir um calendário em uma aplicação rails, vamos utilizar o plugin Calendar Date Select. Ele é um calendário em Javascript que utiliza a biblioteca Prototype.
Algumas demonstrações do funcionamento podem ser vistas em http://electronicholas.com/calendar.
Para instalá-lo:
script/plugin install http://calendardateselect.googlecode.com/svn/tags/calendar_date_select
Após instalado o plugin voce deve inserir o calendário na view em que voce deseja:
No caso acima escolhemos a cor cinza (”silver”) mas também é possível escolher outras cores como vermelho (”red”) e azul (”blue”).
Insira também a biblioteca Prototype caso ela já não esteja incluída:
Agora é só inserir o código para o calendário como abaixo:
Existem várias opções de customização do calendário que podem ser encontradas no site oficial
Traduzindo o calendário para português
Para passar os dias da semana e a data para o formato d/M/Y deve-se ir no environment.rb e adicionar:
Obs.: O formato italiano corresponde ao formato (’d/M/Y’)
Deve-se adicionar o javascript correspondente à esse formato, incluindo na view:
Para a tradução para o português, deve-se criar o arquivo pt.js em public/javascripts/calendar_date_select/locale
pt.js
E para que o calendário adote o idioma português como configurado acima basta adicionar a variável
como mostrado abaixo.
5 comments ↓
Fabiano,
Não estou utilizando nenhum tratamento especial. Utilizo o campo no mysql do tipo date ao invés de datetime. Para validação da data utilizo o plugin validates_date_time (http://agilewebdevelopment.com/plugins/validates_date_time).
Certo.. obrigado !
Jah fiz funcionar, usei um carinha diferente chamado Rails Date Kit.. a verdade é que optei por ele por motivos meramente estéticos e de eficiência sabe, ele cumpre a função
Meu problema era passar a data no formato Brazuca d/m/A mas dai em JS eu traduzo para ISO
Eu sei que podia fazer um tratamento muito melhor sobre isso no model, mas….
Estou precisando seriamente de um calendário de tela inteira agora, você tem alguma sugestão ??
Se não vou adaptar esse plugin mesmo usando embedded => true
Fabiano,
Tenho usado o Calendar Date Select e ele tem me servido bem, por isso o recomendo. Uma possibilidade para colocar um calendário na tela inteira seria (como voce falou) utilizando o embedded => true . E caso voce queira modificar o seu visual basta alterar o css!
Alguém sabe se tem como restringir os meses como se pode fazer com os anos (year_range)?
Leave a Comment