Calendário com botão

Eduardo Assis · Novembro 20, 2008

Estou procurando e não achei nada, na verdade vi muitos mas nada de entender o codigo.

Queria algo para colocar um um formulario, que ao clicar em um botão apareça um calendario em pt_BR com navegação de mês e que quando clicar ele preencha o campo.

E tb com opção de ao clicar ele me redirecionar para uma pagina com os valores da data escolhida para fazer algo como agenda de compromissos.

Abraços.

Mestre SAM · Novembro 20, 2008

um dos melhores calendarios q eu axei foi esse:

http://www.mariosam.com/dicas-de-programad...o-no-formulario

o codigo não é dificil de entender não,

da pra configurar legal.

sucesso!

Jonathan Queiroz · Novembro 20, 2008

Cara, aqui no fórum tem vários scripts de calendário...

Tinha até um post meu sobre como criar um calendário (tava procurando aqui pra lhe mostrar, mas não achei... Mas tenho salvo no meu PC)

Dá uma olhada aqui:

<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>

É um código básico, você pode personalizar... Também seria mais fácil construir um Array para armazenar as informações do calendário (quantidade de dias em cada mês, etc...)

Não entendi muito bem o que você quer dizer com "agenda de compromissos"

Se for para o usuário atualizar e modificar seus compromissos, você teria que utilizar linguagem dinâmica (para salvar as informações em um banco de dados) e depois aprimorar o código para que funcionasse bem !

Qualquer coisa, posta aí !

Entrar

Calendário com botão

Pergunta

Eduardo Assis

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Mestre SAM

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades