Quando realizamos uma interface de usuário, é típico ter campos onde o visitante deva introduzir uma data. Estas têm formatos bastante estritos e são complicadas de escrever, sendo então muito cômodo para o usuário contar com a possibilidade de utilizar um calendário para selecionar a data.
Pelo fato de nem sempre o visitante ter a capacidade de entender a programação em PHP, ou aceso a um servidor que permita a publicação de conteúdos programados com PHP, é muito interessante conhecer outras maneiras de implementar um calendário em uma página web. Neste caso vamos apresentar DHTML Calendar, um calendário realizado em Javascript, compatível para todos os navegadores. Este script é gratuito para incorporar um calendário, portanto podemos utilizá-lo sem nenhum tipo de limite.
Como é DHTML Calendar
É um sistema muito potente e facilmente configurável com uma interessante interface, totalmente dinâmica. Pode-se incluir de diversas maneiras dentro de uma página, como um pop-up, ou diretamente no corpo da página, o que o torna muito útil em diversas situações.
O script para configurar o calendário variará de um modo de apresentação a outro. No download do calendário se oferecem alguns exemplos rápidos para mostrar o calendário. Exemplos para os impacientes, que podem ser muito bom para começar rapidamente. Uma das maneiras mais típicas de apresentar o calendário pode ser utilizando um campo de texto e um botão. Ao clicar o botão se mostra o calendário e, uma vez selecionada uma data, se escreve no campo de texto.
O código do exemplo seria o seguinte, muito parecido a um dos exemplos para os impacientes proporcionados no pacote de download.
<html>
<head>
<title>Calendário de provas</title>
<-Folha de estilos do calendário -->
<link rel="stylesheet" type="text/css" media="all" href="calendar-green.css" title="win2k-cold-1" />
<!-- biblioteca principal do calendario -->
<script type="text/javascript" src="calendar.js"></script>
<!-- biblioteca para carregar a linguagem desejada -->
<script type="text/javascript" src="lang/calendar-es.js"></script>
<!-biblioteca que declara a função Calendar.setup, que ajuda a gerar um calendário em poucas linhas de código -->
<script type="text/javascript" src="calendar-setup.js"></script>
</head>
<body>
<!-- formulario com o campo de texto e o botão para lançar o calendário-->
<form action="#" method="get">
<input type="text" name="date" id="campo_data" />
<input type="button" id="lancador" value="..." />
</form>
<!-- script que define e configura o calendario-->
<script type="text/javascript">
Calendar.setup({
inputField : "campo_fecha", // id do campo de texto
ifFormat : "%d/%m/%Y", // formato da data que se escreva no campo de texto
button : "lancador" // o id do botão que lançará o calendário
});
</script>
</body>
</html>
O código anterior está comentado para que se entenda mais facilmente. Tem várias partes.
- No cabeçalho se incluem vários arquivos com as funções e estilos do calendário. Estes arquivos se encontram nos arquivos de download do calendário. Existem vários estilos que se podem utilizar para ajustar o aspecto do calendário ao desenho da página. Também se deve incluir a linguagem na qual apresentar o calendário, neste caso espanhol, que está também incluído no pacote de download.
- Já no corpo da página, se mostra o formulário. É muito simples, pois só tem um campo de texto e um botão para mostrar o calendário.
- No script de javascript, também dentro do corpo da página, se utiliza a função Calendar.setup, que serve para carregar o calendário e configurá-lo com os valores que desejarmos. Todas as opções de configuração têm valores padrão, embora sempre vamos ter que definir, como mínimo, os dados que colocarmos neste exemplo. O dado "inputField" serve para indicar o identificador (atributo id) do campo input onde se tem que escrever a data. O valor "ifFormat" serve para ajustar o formato da data que se deseja escrever no campo de texto. Por último, o valor "button" deve conter o identificador do botão que lançará o calendário ao clicá-lo.
Foi um exemplo o mais simplificado possível. Podemos ver o funcionamento do
calendário que gera este código em uma página a parte.
Na documentação do produto poderemos encontrar mais exemplos do calendário e uma explicação detalhada de sua utilização.
Para maiores informações na página do produto:
http://www.dynarch.com/projects/calendar/
DHTML Calentar é um projeto hospedado em SourceForge.net, com a seguinte página de projeto:
http://sourceforge.net/projects/jscalendar
