InfoAjuda

Projeto 2 - Calendario em Javascript (web design avançado)

Projeto 2 - Calendario em Javascript (web design avançado)
« Online: Agosto 25, 2017, 06:26:59 pm »
segue projeto ultilizado na competência 2.

Link para visualização online
Calendario

abaixo codigo do sistema:
<html>
Código: [Selecionar]
<!DOCTYPE html>
<html>
<head>
<style>
#retangulo {width: 610px; margin:auto; border: 1px solid black; padding: 10px;
background-color: #999; text-align: center; }
table {width:100%; margin:auto;}
th, td {width: 50px; height: 50px; border: 1px solid black; background-color: white; }
th {background-color:orange;}
</style>
<script src="atividade.js"></script>
</head>
<body>
<div id="retangulo" class="linha">
<div id="titulo" class="dentro">
<h3 id="nome">Nome do Aluno</h3>
<p id="data">Dia mês e ano do nascimento do aluno</p>
</div>
<table id="calendario">
<tr id="cabecalho">
<th>domingo</th><th>segunda</th><th>terça</th><th>quarta</th><th>quinta</th><th>sexta</th><th>sábado</th>
</tr>
<tr id="exemplo">
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>

</table>
<div id="controle" class="linha"><p><button id="acao" onclick="executar()">Ação</button></p></div>
</div>

</body>
</html>


<Javascript>
Código: [Selecionar]
function executar() {

var $aluno = "..Diego Barbosa dos Santos.."; //Nome do Aluno =)
var $data = new Date();
$data.setFullYear(1988, 6, 26); // ANO, MêS e Dia (data de nascimento)
var $meses = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];
var $pega_mes = $data.getMonth();
var $mes_prox = $pega_mes+1;
var $mes_ant = $pega_mes -1;
var $ano = $data.getFullYear();
var $calendario ="";
var $dia_i = 1;



var $prox_data = new Date($mes_prox +' 1 ,'+$ano);
var $dia_semana= $prox_data.getDay();
var $dia_semana2 = $dia_semana;

while ($dia_semana>0){
$calendario += "<td></td>";
$dia_semana--;
}

while ($dia_i <= 31){
if ($dia_semana2 > 6){
$dia_semana2 = 0;
$calendario += "</tr><tr>";
}
$calendario +="<td>"+$dia_i+"</td>";
$dia_semana2++;
$dia_i++;
}
 
var $montar_calendario = "<table><th>domingo</th><th>segunda</th><th>terça</th><th>quarta</th><th>quinta</th><th>sexta</th><th>sábado</th>";
$montar_calendario += "<tr>";
$montar_calendario += $calendario;
$montar_calendario += "</tr></table>";

// escreve o nome do aluno no HTML
document.getElementById("nome").innerHTML = $aluno;

// Escreve a data de nascimento no HTML
document.getElementById("data").innerHTML = $data.getDate() + " de "  + $meses[$data.getMonth()] + " de " + $data.getFullYear() ;

//Monta o Calendario na div HTML
document.getElementById("calendario").innerHTML=$montar_calendario;




}
« Última modificação: Outubro 11, 2017, 08:53:41 am por DiegoB. »

Re:Projeto 2 - Calendario em Javascript (web design avançado)
« Resposta #1 Online: Agosto 26, 2017, 12:04:24 pm »
Segue meu código .js para montagem do calendário.
Ele é genérico, serve para qualquer data que você colocar no HTML:

Código: [Selecionar]
var data, diaDaSemana, novaData;
var split;
var mes; //ARMAZENA A QUANTIDADE DE DIAS DO MÊS, PARA SABER ATÉ ONDE DEVE SER O PREENCHIMENTO DA TABELA

function executar(){
document.getElementById("nome").innerHTML="DIEGO JOSÉ DE OLIVEIRA FÉLIX MARTINS";
var nascimento = document.getElementById("data").innerHTML="10 de janeiro de 1986";

var tabela = document.getElementById("calendario"); //RECEBE A TABELA
var linhas = document.getElementById("exemplo"); //RECEBE O VETOR LINHA CONTENDO OS 0's

//DESCOBRINDO O DIA DA SEMANA DA DATA DE NASCIMENTO
descobrirDiaSemana(nascimento);

//LIMPANDO OS VALORES DA TABELA
limparTabela(linhas);

var dia = 1;

//PERCORRE AS LINHAS PREENCHENDO OS DADOS - começa do 1. 0 é o cabeçalho.
for(i = 1; dia <= mes; i++){
//PERCORRE AS COLUNAS PREENCHENDO OS DADOS
for(var j = 0; j < 7; j++){
if(i==1 && j < diaDaSemana)
tabela.rows[i].cells[j].innerHTML="";
else
tabela.rows[i].cells[j].innerHTML=dia++;
if(dia > mes) break;
}
if(dia <= mes) addLinha(tabela);
}
}

// ########## FUNÇÕES ##########
function descobrirDiaSemana(nascimento){
split = nascimento.split(" ");
split[2] = converterMes(split);
//COLOCANDO O PRIMEIRO DIA DO MÊS DA DATA DE NASCIMENTO COMO REFERENCIA PARA INSERÇÃO DOS DIAS NA TABELA.
novaData = split[2] + " " + 1 + "," +split[4];
data = new Date(novaData);
//PEGA O DIA DA SEMANA EM QUE OCORREU O PRIMEIRO DIA DO MÊS DE ANIVERSÁRIO
diaDaSemana = data.getDay();
}

function converterMes(split){
//CONVERTE O MÊS PARA O PADRÃO AMERICANO
if (!split[2].localeCompare("janeiro") || !split[2].localeCompare("Janeiro")) {mes = 31; return "january";}
else if(!split[2].localeCompare("fevereiro")|| !split[2].localeCompare("Fevereiro")) {mes = bissexto(split); return "february";}
else if(!split[2].localeCompare("março") || !split[2].localeCompare("Março")) {mes = 31; return "march";}
else if(!split[2].localeCompare("abril") || !split[2].localeCompare("Abril")) {mes = 30; return "april";}
else if(!split[2].localeCompare("maio") || !split[2].localeCompare("Maio")) {mes = 31; return "may";}
else if(!split[2].localeCompare("junho") || !split[2].localeCompare("Junho")) {mes = 30; return "june";}
else if(!split[2].localeCompare("julho") || !split[2].localeCompare("Julho")) {mes = 31; return "july";}
else if(!split[2].localeCompare("agosto") || !split[2].localeCompare("Agosto")) {mes = 31; return "august";}
else if(!split[2].localeCompare("setembro") || !split[2].localeCompare("Setembro")) {mes = 30; return "september";}
else if(!split[2].localeCompare("outubro") || !split[2].localeCompare("Outubro")) {mes = 31; return "octuber";}
else if(!split[2].localeCompare("novembro") || !split[2].localeCompare("Novembro")) {mes = 30; return "november";}
else if(!split[2].localeCompare("dezembro") || !split[2].localeCompare("Dezembro")) {mes = 31; return "december";}
else return "MÊS DIGITADO É INVÁLIDO";
}

function bissexto(split){
var ano = parseInt(split[4]);
if(((ano % 4 == 0) && (ano % 100 != 0)) || (ano % 400 == 0))
return 29;
return 28;
}

function limparTabela(linhas){
for(var k = 0; k < 7; k++){
linhas.cells[k].innerHTML="";
}
}

function addLinha(tabela){
var numDeLinhas = tabela.rows.length; //CAPTURA O NÚMERO DE LINHAS DA TABELA
var numDeColunas = tabela.rows[numDeLinhas-1].cells.length; //CAPTURA O NÚMERO DE COLUNAS DA TABELA DISPOSTAS NA ÚLTIMA LINHA. Mantém o padrão.
var novaLinha = tabela.insertRow(numDeLinhas); //INSERE NOVA LINHA

//CRIANDO AS COLUNAS
for(var k = 0; k < numDeColunas; k++){
var novaCelula = novaLinha.insertCell(k);
}
}