Postagens
Female
Vou postar ele aqui, caso alguém também precise :
<style>
.data{font:bold 12 arial;text-decoration:none;color:#FFFFFF;}
. TD {text-align:center;}
.semana {font-size:12px; font-weight:900;text-align:center;color:#671616;border:1 solid #000000;width:30px;height:25px;}
.dia {font:bold 12 arial;text-align:center;background-color:#dcdcdc;width:30px;height:25px;}
.especial {font:bold 12 arial;border:1 solid black;background-color:#ff0000;width:18;height:18;}
.mescell {background-color:#303030;border:1 solid black;font:Verdana, Helvetica, sans-serif;width:285px;}
.mestxt {font-size:12px; font-weight:900;color:#ffffff;text-align:center;padding-bottom:5px;}
.anocell {background-color:#000000;border:1 solid black;}
.anotxt {font:bold 12 arial;}
.botaoant{ color:#FFFFFF;}
.teste{background:#00CC33;}
</style>
<script language=JavaScript>
var data=new Date();
var dia=data.getDay();
var mes=data.getMonth();
var ano=data.getYear();
var evento;
var arrMeses=new Array('JANEIRO','FEVEREIRO','MARÇO','ABRIL','MAIO','JUNHO','JULHO','AGOSTO','SETEMBRO','OUTUBRO','NOVEMBRO','DEZEMBRO');
var arrDias=new Array('D','S','T','Q','Q','S','S');
var i
function diasMes(mes,ano) {
if(mes==1) return (ano%4==0)?29:28;
else if(mes>6) return (mes%2==1)?31:30;
return (mes%2==0)?31:30;
}
function montaMes() {
//var obj=document.all.dCalendario;
var obj=document.getElementById("dCalendario");
data1=new Date(ano,mes,1);dia1=data1.getDay();
var html='<table cellpadding=3 cellspacing=3 border=1 ><tr>';
//html+='<td colspan=7 class=anocell width=100%>';
//html+='<table width=100% cellpadding=0 cellspacing=0><tr>';
//html+='<td width=20><a href="javascript:mudaAno(-1)"><</a></td>';
//html+='<td align=center class=anotxt>'+ano+'</td>';
//html+='<td width=20><a href="javascript:mudaAno(1)">></a></td></tr></table>';
html+='<tr><td colspan=7 class=mescell>';
html+='<table width=100% cellpadding=1 cellspacing=3 ><tr>';
html+='<td width=30px class=botao ><a class=data href="javascript:mudaMes(-1)"><img src="img/ico/botao_calend1.jpg" /></a></td>';
html+='<td align=center class=mestxt>'+arrMeses[mes]+'</td>';
html+='<td width=30px class=botao ><a class=data href="javascript:mudaMes(1)"><img src="img/ico/botao_calend2.jpg" /></a></td></tr></table>';
html+='</td></tr><tr bgcolor=#dcdcdc>';
//monta os dias
for(i=0;i<arrDias.length;i++)
html+='<td class=semana>'+arrDias[i]+'</td>';
html+='</tr><tr>';
for(i=0;i<dia1;i++) html+='<td></td>';
for(i=0,nDias=diasMes(mes,ano);i<nDias;i++) {
html+='<td id=d'+i+' class=dia>'+(i+1)+'</td>';
if((i+dia1)%7==6) html+='</tr>';
}
html+='</html>';
obj.innerHTML=html;
}
function mudaAno(x) {
ano+=x;
montaMes();
}
function mudaMes(x) {
mes+=x;
if(mes<0) {mes=11;ano--;}
else if(mes>11) {mes=0;ano++;}
montaMes();
}
function marcaData() {
var evento = 20;
for(aa=1; aa <= i ; aa++) {
var obj=document.getElementById("d"+aa);
if(obj.innerHTML == 20){
obj.style.border='1px #DF5359 solid';
obj.style.cursor = 'pointer';
obj.onclick = function()
{
window.open("teste_evento.html", "Teste", "height = 300, width = 400");
};
};
};
};
</script>
Aí, na página onde for ficar o calendario você inclui um evento onLoad na tag body com as funções:
<body onLoad=montaMes();marcaData();>
E faz uma div assim,com a id dCalendario:
<div id="dCalendario" ></div>
A minha função marcaData() é responsável por marca uma data selecionada, e abrir uma janlea popup (teste_evento.html no meu caso)quando clicar nesta data, mas ficou um pouco na gambiarra e não está funcionando muito bem... Se alguém quiser dar uma aprimorada ou melhorar essa parte do código, fique a vontade
Aliás, eu havia pensado em abrir essa janela popup usando o prettyPhoto do Jquery. Alguém sabe como fazer isso?
beijos!
