In4net Blog http://in4net.wordpress.com Dicas Tutoriais Aplicativos Cursos para Designers Tue, 08 Sep 2009 01:42:38 +0000 pt-br hourly 1 http://wordpress.com/ http://s2.wp.com/i/buttonw-com.png In4net Blog http://in4net.wordpress.com JS Calendar – Componente de Calendário para Web http://in4net.wordpress.com/2009/09/08/js-calendar-componente-de-calendario-para-web/ http://in4net.wordpress.com/2009/09/08/js-calendar-componente-de-calendario-para-web/#comments Tue, 08 Sep 2009 01:42:38 +0000 in4net http://in4net.wordpress.com/?p=78 ]]> Calendario

Calendario

JS Calendar – Componente de Calendário para Web

Galera.

Neste primeiro post vou falar sobre o componente de calendário, JS Calendar.  O JS Calendar foi desenvolvido pela DhtmlGoodies.com em JavaScript.  Para ver um exemplo do calendário, clique aqui.

Conhecendo o JS Calendar

Primeiramente, faça o download do JS Calendar no sítio da desenvolvedora. Ao descompactar, veremos dois arquivos e dois diretórios:

arquivo lgpl.txt - licença de uso do JS Calendar

arquivo js_calendar.html - exemplo do JS Calendar

diretório images – com imagens do exemplo e do calendário

diretório dhtmlgoodies_calendar - onde encontraremos o javascript e o css

Construindo uma página com o calendário

Vamos criar uma página em branco (html).

Após criar esta página em branco, entre as tags <HEAD> e </HEAD> insira o texto abaixo:

<title>Teste de Calendario</title>
<!– Título do Sítio –>

<link type=”text/css” rel=”stylesheet” href=”dhtmlgoodies_calendar.css” media=”screen”></link>
<!– Referência ao css utilizado no calendário –>

<script type=”text/javascript” src=”dhtmlgoodies_calendar.js”></script>
<!– Referência a biblioteca de funções utilizada no JS Calendar –>

Entre  as tags <BODY> e </BODY> inclua o texto abaixo:

<form>
Data: <input type=”text” value=”” readonly name=”campoData”><br>
<!– Campo do tipo texto, apenas como leitura. O usuário não poderá digitar a data diretamente no campo. Isso evita erros de digitação. –>

<input type=”button” value=”Calendário” onclick=”displayCalendar(document.forms[0].campoData,’dd-mm-yyyy’,this)”>
<!– Botão com nome Calendário com a função displayCalendar sendo chamada pelo onclick. Importante citar que no document.forms[0].XXXXX, XXXXX é o nome do campo onde receberá o valor escolhido no calendário –>

</form>

Grave o arquivo como testeCalendario.htm e faça um teste clicando sobre o botão “Calendário”

Para mudar o formato da data, altere o terceiro parâmetro da função displayCalendar que neste exemplo está como dd-mm-yyyy.

Fico por aqui.

Até o próximo post.

Abraços.


]]> http://in4net.wordpress.com/2009/09/08/js-calendar-componente-de-calendario-para-web/feed/ 0 in4net Calendario Curso de HTML – Aula 12 http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-12/ http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-12/#comments Tue, 08 Sep 2009 01:28:09 +0000 in4net http://in4net.wordpress.com/?p=75 ]]> Curso de HTML – Aula 12


]]> http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-12/feed/ 0 in4net Curso de HTML – Aula 11 – Tabelas I http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-11-tabelas-i/ http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-11-tabelas-i/#comments Tue, 08 Sep 2009 01:25:55 +0000 in4net http://in4net.wordpress.com/?p=73 ]]> Curso de HTML – Aula 11 – Tabelas I




]]> http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-11-tabelas-i/feed/ 0 in4net Curso de HTML – Aula 10 – Links III http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-10-links-iii/ http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-10-links-iii/#comments Tue, 08 Sep 2009 01:22:46 +0000 in4net http://in4net.wordpress.com/?p=69 ]]> Curso de HTML – Aula 10 – Links III




]]> http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-10-links-iii/feed/ 0 in4net Curso de HTML – Aula 9 – Links II http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-9-links-ii/ http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-9-links-ii/#comments Tue, 08 Sep 2009 01:07:59 +0000 in4net http://in4net.wordpress.com/?p=67 ]]> Curso de HTML – Aula 9 – Links II



]]> http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-9-links-ii/feed/ 0 in4net Curso de HTML – Aula 8 – Links I http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-8-links-i/ http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-8-links-i/#comments Tue, 08 Sep 2009 01:06:10 +0000 in4net http://in4net.wordpress.com/?p=65 ]]> Curso de HTML – Aula 8 – Links I



]]> http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-8-links-i/feed/ 0 in4net Curso de HTML – Aula 7 – Listas http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-7-listas/ http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-7-listas/#comments Tue, 08 Sep 2009 01:05:02 +0000 in4net http://in4net.wordpress.com/?p=63 ]]> Curso de HTML – Aula 7 – Listas

Lista


]]> http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-7-listas/feed/ 0 in4net Curso de HTML – Aula 6 – Imagens http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-6-imagens/ http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-6-imagens/#comments Tue, 08 Sep 2009 01:03:31 +0000 in4net http://in4net.wordpress.com/?p=61 ]]> Curso de HTML – Aula 6 – Imagens

Trabalhando com imagens!


]]> http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-6-imagens/feed/ 0 in4net Curso de HTML – Aula 5 – Cores (Parte II) http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-5-cores-parte-ii/ http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-5-cores-parte-ii/#comments Tue, 08 Sep 2009 01:01:51 +0000 in4net http://in4net.wordpress.com/?p=59 ]]> Curso de HTML – Aula 5 – Cores (Parte II)

Cores parte 2


]]> http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-5-cores-parte-ii/feed/ 0 in4net Curso de HTML – Aula 4 – Cores (Parte I) http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-4-cores-parte-i/ http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-4-cores-parte-i/#comments Tue, 08 Sep 2009 00:59:16 +0000 in4net http://in4net.wordpress.com/?p=56 ]]> Curso de HTML – Aula 4 – Cores (Parte I)

Aprendendo sobre cores hexdemal ou rgb!

Downlaod Cpick



]]> http://in4net.wordpress.com/2009/09/08/curso-de-html-aula-4-cores-parte-i/feed/ 0 in4net