Pessoal. Vou postar aqui um estudo que estive fazendo a respeito da classe Calendar (http://www.electricprism.com/aeron/calendar/#download) para o framework Mootools (http://actionman.wevertonnaves.com.br/blog/2008/02/06/mootools-um-otimo-framework-ajax/). Na verdade este arquivo é meio que uma “traduzida” da página de exemplo da página em inglês da classe.
Primeiramente, precisamos ter o mootools com as classes Fx.Style, Element e Window. Para ativar o arraste, o componente Drag também será necessária. Também é necessário o download da classe Calendar. Mas não se preocupe, eu já separei todos os arquivos aqui . Vamos conferir abaixo como proceder:
1º – Inclua os javascripts na página.
É fácil, só colar o código abaixo, e editar o caminho dos arquivos, caso necessário:
<script language=”JavaScript” type=”text/javascript” src=”mootools/calendar.js” mce_src=”mootools/calendar.js”></script>
2º Iniciando a classe.
Para isso, cole o código abaixo entre as tags <head>:
<!–
window.addEvent(‘domready’, function() { myCal = new Calendar({ date: ‘d/m/Y’ }); });
//–>
</script>
Lembre-se de que iremos alterar as opções do objeto Calendar posteriormente.
3º Iniciando a classe.
Incluindo o campo da data no documento, caso já não tenha um. Cole o código abaixo entre as tags <body>:
4º Explicando
Na chamada em javascript, a função (){…} é atachada ao evento ‘domready’ da janela, e será executada assim que o código html ser carregado, sem esperar por imagens. Dentro da função (){…} estamos definindo um novo calendário, onde myCal é o id do novo objeto, new Calendar cria um novo objeto de calendário, e ele exige a seguinte estrutura:
No iddocampo, colocamos o id do campo onde o calendário será anexado. em formato, colocaremos o formato em que desejamos exibir a data após selecioná-la no calendário. Podemos colocar partes do formato em campos diferentes, como exemplo, uma data de 21 de janeiro de 2008 pode ser colocada o mês e o ano em um campo, e o dia em outro, basta especificar cada campo separando-os por vírgula. Os parâmetros possíveis para essa parte são:
d: dia do mês em número (01 a 31)D: dia da semana abreviado (Seg)
j: dia do mês sem leading zeros (1 a 31)
l: dia da semana completo (Segunda)
S: retorna a abreviatura da posição ordinária do mês – first(st), second(nd), third(rd), restantes(th)
F: nome do mês completo (Fevereiro)
m: número do mês (01 a 12)
M: nome do mês abreviado (Fev)
n: número do mês sem leading zeros (1 a 12)
Y: ano em 4 dígitos (2008)
y: ano em 2 dígitos (08)
Os parâmetros no segundo grupo de chaves, devem ser definidos na estrutura {parametro: valor, parametro: valor}.
Segue abaixo uma relação do que pode ser usado:
blocked: Um array com as informações das datas que devem ser bloqueadas no formato ‘dia mes ano’. As informações devem ser separadas por espaço e podem conter o * indicando ‘todos’. Por exemplo blocked: ['1 1 2007'] bloqueia o dia 1 de Janeiro de 2007. blocked: ['* 1 2007'] bloqueia todos os dias de Janeiro de 2007. Para indicar vários valores do mesmo dia, mes, etc, separe por vírgula e sem espaço. Também podemos adicionar valores de 0 a 6 para dias da semana, após a estrutura ‘dia mes ano’.
classes: São 12 classes em CSS para serem aplicadas á construção do formulário: calendar, prev, next, month, year, today, invalid, valid, inactive, active, hover, hilite. A sintaxe utiliza é: classes: ['alternate', '', '', 'mes']. Note que nesse explo, classes não definidas, são passadas vazias.
days: Uma matriz com 7 nomes do dia da semana, começando na segunda.
months: Uma matriz com 7 nomes do mês.
direction: Um número positivo ou negativo, indicando se o calendário exibirá as datas futuras n vezes a partir da data atual (valor: n), ou datas passadas n vezes da data atual (valor: -n). O valor 0 deixa o calendário padrão com datas passadas e futuras.
draggable: Um valor boleano, indicando se o calendário será arrastável. Para que a funcionalidade do arraste funcione, o mootools deve estar com o componente Drag.
navigation: Um valor numérico que indica o tipo de navegação entre mês/ano. 0 indica sem navegação. 1 é navegação soomente por mês. 2 navega por mês e ano.
offset: Um valor numérico que indica o dia que inicia a semana. O padrão é 0 (Domingo).
onHideStart, onHideComplete, onShowStart, onShowComplete: Handlers para dispararmos outros scripts na página.
Tweak: Define os valores de posição x,y (a referência 0 é o botão) do calendário. No formato tweak: {x:0,y:0}.
Isso aí galera. Podem ver que é bem completo esse calendário. Ele também tem a opção de selecionar um intervalo de datas, mas isso fica para a próxima. Baixe os arquivos aqui , já com os três estilos padrões: calendar.css, dashboard.css e i-heart-ny.
Qualquer dúvida estou á disposição.
#1 por Eduardo em Setembro 25th, 2008
Olá amigo nossa tô louco atraz desse calendario, seu ficheiro está fora do ar não consegui fazer downloads vc poderia me enviar ele pro meu email? os três exemplos o azul preto e o que utiliza foto?
Obs:. Também notei que as datas antigas não aparecem gostaria de saber como faço pra retirar esse bloqueio pois gostaria de usar a antiga tbm.
#2 por Eduardo Betioli em Dezembro 10th, 2008
Parabéns e muito obrigado, bastante explicativo. E o material de download está completo.
#3 por Camila Emidio em Junho 26th, 2009
Olá, estou desenvolvendo um formulário e gostaria de inserir este calendário, porém os links estão quebrados, poderia, por favor, me enviar os arquivos?
Obg
#4 por raphael em Setembro 14th, 2009
Também notei que as datas antigas não aparecem gostaria de saber como faço pra retirar esse bloqueio pois gostaria de usar a antiga tbm. [2]
#5 por Camila Emidio em Outubro 27th, 2009
Olá, estou desenvolvendo um formulário e gostaria de inserir este calendário, porém os links estão quebrados, poderia, por favor, me enviar os arquivos?
Obg