Calendário Simples em JavaScript

Jonathan Queiroz · Janeiro 30, 2009

Esse é um calendário simples construído em JavaScript

Foi feito apenas para demonstrar o funcionamento de um calendário, apesar de que não foi construído da melhor forma possível !

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title></title>
<script type="text/javascript">
var nome_mes
var numero_mes
var data_atual = new Date()

function ClicaDia(dia) {
x = document.getElementById("calendario")
x.style.visibility = "hidden"

y = document.getElementById("span_msgdata")
y.style.visibility = "visible"
a = document.getElementById("span_data")
a.style.visibility = "visible"
a.innerHTML = dia + "/" + eval(numero_mes+1) + "/" + data_atual.getFullYear()
b = document.getElementById("span_msgdata")
b.style.visibility = "visible"
document.form.botao_escolher_data.style.visibility = "visible"
c = document.getElementById("div_mostra_dias")
c.style.visibility = "hidden"
}

function AtualizaMes() {
switch (numero_mes) {
case 0:
nome_mes = "Janeiro"
quantidade_dias = 31
break
case 1:
nome_mes = "Fevereiro"
quantidade_dias = 28
break
case 2:
nome_mes = "Março"
quantidade_dias = 31
break
case 3:
nome_mes = "Abril"
quantidade_dias = 30
break
case 4:
nome_mes = "Maio"
quantidade_dias = 31
break
case 5:
nome_mes = "Junho"
quantidade_dias = 30
break
case 6:
nome_mes = "Julho"
quantidade_dias = 31
break
case 7:
nome_mes = "Agosto"
quantidade_dias = 31
break
case 8:
nome_mes = "Setembro"
quantidade_dias = 30
break
case 9:
nome_mes = "Outubro"
quantidade_dias = 31
break
case 10:
nome_mes = "Novembro"
quantidade_dias = 30
break
case 11:
nome_mes = "Dezembro"
quantidade_dias = 31
break
}
z.innerHTML = nome_mes
var valor=""
for (i=1;i<=quantidade_dias;i++) {
if (i/7==parseInt(i/7)) {
valor = valor + "<br>"
}
valor = valor + "<input type='button' name='calendaria_dia"+i+"' value='"+i+"' style='width: 50' onclick='ClicaDia("+i+")'>"
}
k = document.getElementById("div_mostra_dias")
k.innerHTML = valor

}

function EscolheData() {
x = document.getElementById("calendario")
x.style.visibility = "visible"

y = document.getElementById("span_data")
y.style.visibility = "hidden"
a = document.getElementById("span_data")
a.style.visibility = "hidden"
b = document.getElementById("span_msgdata")
b.style.visibility = "hidden"
document.form.botao_escolher_data.style.visibility = "hidden"
c = document.getElementById("div_mostra_dias")
c.style.visibility = "visible"

z = document.getElementById("span_nome_mes")
numero_mes = data_atual.getMonth()
if (z.innerHTML="data") {
AtualizaMes()
}

}
function ProximoMes() {
if (numero_mes<12) {
numero_mes = numero_mes+1
AtualizaMes()
}
}

function VoltaMes() {
if (numero_mes>=0) {
numero_mes = numero_mes-1
AtualizaMes()
}
}
</script>
</head>
<body>
<div id="calendario" name="calendario" style="visibility: hidden">
<input type="button" value="<" onclick="VoltaMes()">
<span id="span_nome_mes" name="span_nome_mes">data</span>
<input type="button" value=">" onclick="ProximoMes()">
</div>

<div id="pagina" name="pagina">
<span id="span_msgdata">Data: </span>
<span id="span_data" name="span_data" style="text-decoration: underline"><span style="color: red">Escolha uma data</span></span>
<form name="form" action="pagina2.htm" method="post">
<br><input type="button" name="botao_escolher_data" value="Escolher outra data" onclick="EscolheData()">
<div id="div_mostra_dias">

</div>
</form>
</div>
</body>
</html>

Seria melhor e mais eficiente se, ao invés de inúmeros switch fosse utilizado um Array

Quando tiver mais tempo eu aprimoro o script e posto aqui !

Entrar

Calendário Simples em JavaScript

Pergunta

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades