Adicionar "eventos" Em Calendario Dinamico

CaptainZap · Outubro 1, 2012

Bom, tenho um calendário já pronto, ele já até tem os dias "clicáveis". Gostaria de uma ajuda para que quando clicasse neste tal dia, aparecesse ou melhor, abrisse outra página com um arquivo pdf. Obrigado.

<HTML>
<HEAD>

<script LANGUAGE="Javascript">
var dDate = new Date();
var dCurMonth = dDate.getMonth();
var dCurDayOfMonth = dDate.getDate();
var dCurYear = dDate.getFullYear();
var objPrevElement = new Object();

function fToggleColor(myElement) {
var toggleColor = "#ff0000";
if (myElement.id == "calDateText") {
if (myElement.color == toggleColor) {
myElement.color = "";
} else {
myElement.color = toggleColor;
  }
} else if (myElement.id == "calCell") {
for (var i in myElement.children) {
if (myElement.children[i].id == "calDateText") {
if (myElement.children[i].color == toggleColor) {
myElement.children[i].color = "";
} else {
myElement.children[i].color = toggleColor;
           }
        }
     }
  }
}
function fSetSelectedDay(myElement){
if (myElement.id == "calCell") {
if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {
myElement.bgColor = "#c0c0c0";
objPrevElement.bgColor = "";
document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);
objPrevElement = myElement;
     }
  }
}
function fGetDaysInMonth(iMonth, iYear) {
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
}
function fBuildCal(iYear, iMonth, iDayStyle) {
var aMonth = new Array();
aMonth[0] = new Array(7);
aMonth[1] = new Array(7);
aMonth[2] = new Array(7);
aMonth[3] = new Array(7);
aMonth[4] = new Array(7);
aMonth[5] = new Array(7);
aMonth[6] = new Array(7);
var dCalDate = new Date(iYear, iMonth-1, 1);
var iDayOfFirst = dCalDate.getDay();
var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
var iVarDate = 1;
var i, d, w;
if (iDayStyle == 2) {
aMonth[0][0] = "Domingo";
aMonth[0][1] = "Segunda";
aMonth[0][2] = "Terça";
aMonth[0][3] = "Quarta";
aMonth[0][4] = "Quinta";
aMonth[0][5] = "Sexta";
aMonth[0][6] = "Sáb";
} else if (iDayStyle == 1) {
aMonth[0][0] = "Dom";
aMonth[0][1] = "Seg";
aMonth[0][2] = "Ter";
aMonth[0][3] = "Qua";
aMonth[0][4] = "Qui";
aMonth[0][5] = "Sex";
aMonth[0][6] = "Sáb";
} else {
aMonth[0][0] = "Do";
aMonth[0][1] = "Se";
aMonth[0][2] = "Te";
aMonth[0][3] = "Qa";
aMonth[0][4] = "Qi";
aMonth[0][5] = "Sx";
aMonth[0][6] = "Sá";
}
for (d = iDayOfFirst; d < 7; d++) {
aMonth[1][d] = iVarDate;
iVarDate++;
}
for (w = 2; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
aMonth[w][d] = iVarDate;
iVarDate++;
     }
  }
}
return aMonth;
}
function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {
var myMonth;
myMonth = fBuildCal(iYear, iMonth, iDayStyle);
document.write("<table border='1'>")
document.write("<tr>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");
document.write("</tr>");
for (w = 1; w < 7; w++) {
document.write("<tr>")
for (d = 0; d < 7; d++) {
document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onmouseover='fToggleColor(this)' onmouseout='fToggleColor(this)' onclick=fSetSelectedDay(this)>");
if (!isNaN(myMonth[w][d])) {
document.write("<font id=calDateText onmouseover='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onmouseout='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");
} else {
document.write("<font id=calDateText onmouseover='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onmouseout='fToggleColor(this)' onclick=fSetSelectedDay(this)> </font>");
}
document.write("</td>")
}
document.write("</tr>");
}
document.write("</table>")
}
function fUpdateCal(iYear, iMonth) {
myMonth = fBuildCal(iYear, iMonth);
objPrevElement.bgColor = "";
document.all.calSelectedDate.value = "";
for (w = 1; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (!isNaN(myMonth[w][d])) {
calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
} else {
calDateText[((7*w)+d)-7].innerText = " ";
        }
     }
  }
}

// End -->
</script>
</head>


<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>
<script language="Javascript" for=window event=onload>
<!-- Begin
var dCurDate = new Date();
frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;
for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)
if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())
frmCalendarSample.tbSelYear.options[i].selected = true;
//  End -->
</script>

<form name="frmCalendarSample" method="post" action="">
<input type="hidden" name="calSelectedDate" value="">

<table border="1">
<tr>
<td>
<select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="1">Janeiro</option>
<option value="2">Fevereiro</option>
<option value="3">Março</option>
<option value="4">Abril</option>
<option value="5">Maio</option>
<option value="6">Junho</option>
<option value="7">Julho</option>
<option value="8">Agosto</option>
<option value="9">Setembro</option>
<option value="10">Outubro</option>
<option value="11">Novembro</option>
<option value="12">Dezembro</option>
</select>

<select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</td>
</tr>
<tr>
<td>
<script language="Javascript">
var dCurDate = new Date();
fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
</script>
</td>
</tr>
</table>
</form>
</BODY>
</head>
</html>

Gaw · Outubro 1, 2012

é só colocar o endereço do PDF na tag <a> do dia... ou não é isso que você quer?

tentei rodar seu código aqui... travou meu navegador... ficou uns 5 min carregando e quando carregou eu vi que você não está calculando ano bisexto nem nada... eu tenho um código de calendário muito bom se você quizer usar:

<html>
   <head>

       <style type="text/css">
           span.label {
               color:black;
               width:30;
               height:16;
               text-align:center;
               margin-top:0;
               background:#ffF;
               font:bold 13px Arial;
           }
           span.c1 {
               background: none repeat scroll 0 0 #FFFFFF;
               color: black;
               display: block;
               font: bold 13px Arial;
               height: 16px;
               margin-top: 0;
               text-align: center;
               width: 30px;
           }
           span.c2 {
               cursor:hand;
               color:red;
               width:30;
               height:16;
               text-align:center;
               margin-top:0;
               background:#ffF;
               font:bold 13px Arial;
           }
           span.c3 {
               cursor:hand;
               color:#b0b0b0;
               width:30;
               height:16;
               text-align:center;
               margin-top:0;
               background:#ffF;
               font:bold 12px Arial;
           }
       </style>

       <script type="text/javascript">
           function maxDays(mm, yyyy){
               var mDay;
               if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
                   mDay = 30;
               }
               else{
                   mDay = 31
                   if(mm == 1){
                       if (yyyy/4 - parseInt(yyyy/4) != 0){
                           mDay = 28
                       }
                       else{
                           mDay = 29
                       }
                   }
               }
               return mDay;
           }
           function changeBg(id){
               if (eval(id).style.backgroundColor != "yellow"){
                   eval(id).style.backgroundColor = "yellow"
               }
               else{
                   eval(id).style.backgroundColor = "#ffffff"
               }
           }
           function writeCalendar(){
               var now = new Date
               var dd = now.getDate()
               var mm = now.getMonth()
               var dow = now.getDay()
               var yyyy = now.getFullYear()
               var arrM = new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Augosto","Setembro","Outubro","Novembro","Dezembro")
               var arrY = new Array()
               for (ii=0;ii<=4;ii++){
                   arrY[ii] = yyyy - 2 + ii
               }
               var arrD = new Array("Dom","Seg","Ter","Qua","Qui","Sex","Sab")

               var text = ""
               text = "<form name=calForm>"
               text += "<table border=1>"
               text += "<tr><td>"
               text += "<table width=100%><tr>"
               text += "<td align=left>"
               text += "<select name=selMonth onChange='changeCal()'>"
               for (ii=0;ii<=11;ii++){
                   if (ii==mm){
                       text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>"
                   }
                   else{
                       text += "<option value= " + ii + ">" + arrM[ii] + "</option>"
                   }
               }
               text += "</select>"
               text += "</td>"
               text += "<td align=right>"
               text += "<select name=selYear onChange='changeCal()'>"
               for (ii=0;ii<=4;ii++){
                   if (ii==2){
                       text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>"
                   }
                   else{
                       text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>"
                   }
               }
               text += "</select>"
               text += "</td>"
               text += "</tr></table>"
               text += "</td></tr>"
               text += "<tr><td>"
               text += "<table border=1>"
               text += "<tr>"
               for (ii=0;ii<=6;ii++){
                   text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>"
               }
               text += "</tr>"
               aa = 0
               for (kk=0;kk<=5;kk++){
                   text += "<tr>"
                   for (ii=0;ii<=6;ii++){
                       text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)'>1</span></td>"
                       aa += 1
                   }
                   text += "</tr>"
               }
               text += "</table>"
               text += "</td></tr>"
               text += "</table>"
               text += "</form>"
               document.write(text)
               changeCal()
           }
           function changeCal(){
               var now = new Date
               var dd = now.getDate()
               var mm = now.getMonth()
               var dow = now.getDay()
               var yyyy = now.getFullYear()
               var currM = parseInt(document.calForm.selMonth.value)
               var prevM
               if (currM!=0){
                   prevM = currM - 1
               }
               else{
                   prevM = 11
               }
               var currY = parseInt(document.calForm.selYear.value)
               var mmyyyy = new Date()
               mmyyyy.setFullYear(currY)
               mmyyyy.setMonth(currM)
               mmyyyy.setDate(1)
               var day1 = mmyyyy.getDay()
               if (day1 == 0){
                   day1 = 7
               }
               var arrN = new Array(41)
               var aa
               for (ii=0;ii<day1;ii++){
                   arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1
               }
               aa = 1
               for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
                   arrN[ii] = aa
                   aa += 1
               }
               aa = 1
               for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
                   arrN[ii] = aa
                   aa += 1
               }
               for (ii=0;ii<=41;ii++){
                   eval("sp"+ii).style.backgroundColor = "#FFFFFF"
               }
               var dCount = 0
               for (ii=0;ii<=41;ii++){
                   if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){
                       eval("sp"+ii).innerHTML = arrN[ii]
                       eval("sp"+ii).className = "c3"
                   }
                   else{
                       eval("sp"+ii).innerHTML = arrN[ii]
                       if ((dCount==0)||(dCount==6)){
                           eval("sp"+ii).className = "c2"
                       }
                       else{
                           eval("sp"+ii).className = "c1"
                       }
                       if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
                           eval("sp"+ii).style.backgroundColor="#90EE90"
                       }
                   }
                   dCount += 1
                   if (dCount>6){
                       dCount=0
                   }
               }
           }
       </script>

   </head>

   <body>

       <script type="text/javascript">writeCalendar()</script>

   </body>
</html>

CaptainZap · Outubro 3, 2012

valeu amigooo! testarei assim que chegar em casa, vamos ver..

CaptainZap · Outubro 5, 2012

é só colocar o endereço do PDF na tag <a> do dia... ou não é isso que você quer?

tentei rodar seu código aqui... travou meu navegador... ficou uns 5 min carregando e quando carregou eu vi que você não está calculando ano bisexto nem nada... eu tenho um código de calendário muito bom se você quizer usar:

<html>
   <head>

       <style type="text/css">
           span.label {
               color:black;
               width:30;
               height:16;
               text-align:center;
               margin-top:0;
               background:#ffF;
               font:bold 13px Arial;
           }
           span.c1 {
               background: none repeat scroll 0 0 #FFFFFF;
               color: black;
               display: block;
               font: bold 13px Arial;
               height: 16px;
               margin-top: 0;
               text-align: center;
               width: 30px;
           }
           span.c2 {
               cursor:hand;
               color:red;
               width:30;
               height:16;
               text-align:center;
               margin-top:0;
               background:#ffF;
               font:bold 13px Arial;
           }
           span.c3 {
               cursor:hand;
               color:#b0b0b0;
               width:30;
               height:16;
               text-align:center;
               margin-top:0;
               background:#ffF;
               font:bold 12px Arial;
           }
       </style>

       <script type="text/javascript">
           function maxDays(mm, yyyy){
               var mDay;
               if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
                   mDay = 30;
               }
               else{
                   mDay = 31
                   if(mm == 1){
                       if (yyyy/4 - parseInt(yyyy/4) != 0){
                           mDay = 28
                       }
                       else{
                           mDay = 29
                       }
                   }
               }
               return mDay;
           }
           function changeBg(id){
               if (eval(id).style.backgroundColor != "yellow"){
                   eval(id).style.backgroundColor = "yellow"
               }
               else{
                   eval(id).style.backgroundColor = "#ffffff"
               }
           }
           function writeCalendar(){
               var now = new Date
               var dd = now.getDate()
               var mm = now.getMonth()
               var dow = now.getDay()
               var yyyy = now.getFullYear()
               var arrM = new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Augosto","Setembro","Outubro","Novembro","Dezembro")
               var arrY = new Array()
               for (ii=0;ii<=4;ii++){
                   arrY[ii] = yyyy - 2 + ii
               }
               var arrD = new Array("Dom","Seg","Ter","Qua","Qui","Sex","Sab")

               var text = ""
               text = "<form name=calForm>"
               text += "<table border=1>"
               text += "<tr><td>"
               text += "<table width=100%><tr>"
               text += "<td align=left>"
               text += "<select name=selMonth onChange='changeCal()'>"
               for (ii=0;ii<=11;ii++){
                   if (ii==mm){
                       text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>"
                   }
                   else{
                       text += "<option value= " + ii + ">" + arrM[ii] + "</option>"
                   }
               }
               text += "</select>"
               text += "</td>"
               text += "<td align=right>"
               text += "<select name=selYear onChange='changeCal()'>"
               for (ii=0;ii<=4;ii++){
                   if (ii==2){
                       text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>"
                   }
                   else{
                       text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>"
                   }
               }
               text += "</select>"
               text += "</td>"
               text += "</tr></table>"
               text += "</td></tr>"
               text += "<tr><td>"
               text += "<table border=1>"
               text += "<tr>"
               for (ii=0;ii<=6;ii++){
                   text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>"
               }
               text += "</tr>"
               aa = 0
               for (kk=0;kk<=5;kk++){
                   text += "<tr>"
                   for (ii=0;ii<=6;ii++){
                       text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)'>1</span></td>"
                       aa += 1
                   }
                   text += "</tr>"
               }
               text += "</table>"
               text += "</td></tr>"
               text += "</table>"
               text += "</form>"
               document.write(text)
               changeCal()
           }
           function changeCal(){
               var now = new Date
               var dd = now.getDate()
               var mm = now.getMonth()
               var dow = now.getDay()
               var yyyy = now.getFullYear()
               var currM = parseInt(document.calForm.selMonth.value)
               var prevM
               if (currM!=0){
                   prevM = currM - 1
               }
               else{
                   prevM = 11
               }
               var currY = parseInt(document.calForm.selYear.value)
               var mmyyyy = new Date()
               mmyyyy.setFullYear(currY)
               mmyyyy.setMonth(currM)
               mmyyyy.setDate(1)
               var day1 = mmyyyy.getDay()
               if (day1 == 0){
                   day1 = 7
               }
               var arrN = new Array(41)
               var aa
               for (ii=0;ii<day1;ii++){
                   arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1
               }
               aa = 1
               for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
                   arrN[ii] = aa
                   aa += 1
               }
               aa = 1
               for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
                   arrN[ii] = aa
                   aa += 1
               }
               for (ii=0;ii<=41;ii++){
                   eval("sp"+ii).style.backgroundColor = "#FFFFFF"
               }
               var dCount = 0
               for (ii=0;ii<=41;ii++){
                   if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){
                       eval("sp"+ii).innerHTML = arrN[ii]
                       eval("sp"+ii).className = "c3"
                   }
                   else{
                       eval("sp"+ii).innerHTML = arrN[ii]
                       if ((dCount==0)||(dCount==6)){
                           eval("sp"+ii).className = "c2"
                       }
                       else{
                           eval("sp"+ii).className = "c1"
                       }
                       if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
                           eval("sp"+ii).style.backgroundColor="#90EE90"
                       }
                   }
                   dCount += 1
                   if (dCount>6){
                       dCount=0
                   }
               }
           }
       </script>

   </head>

   <body>

       <script type="text/javascript">writeCalendar()</script>

   </body>
</html>

Po cara, muito bom, agora vou tentar fazer o que você disse, adicionando os pdfs nos dias exatos.. vamos la..

Gaw · Outubro 5, 2012

Belezera amigo, se precisar de mais alguma coisa GRITA AEW!

CaptainZap · Outubro 5, 2012

Bom amigo fiz seu código aqui mas, como que eu faço pra adicionar no dia mes e ano exatos o arquivo? :s

Gaw · Outubro 5, 2012

deixa eu ver...

CaptainZap · Outubro 8, 2012

nada? :/

creio q nao precise de banco de dados..

Gaw · Outubro 8, 2012

não precisa não... é que eu estou com uns rolos aqui no serviço... mas o básico é você criar um array com a data do evento e depois colocar uma condição para verificar se a data que vai ser colocada é a mesma do array de eventos, se sim você coloca o link....

CaptainZap · Outubro 8, 2012

se liga nesse aqui. É outro calendário, porém ele tem somente alguns dias anotados com 'a href'.

<html>
<head>
<title>Imagens em um ComboBox - by Klonder</title>
<style type="text/css">
* {background-color:#FFF; margin:0; padding:0; list-style: none;}
</style>

<script type="text/javascript">
/*
Código by: klonder
klonder@ymail.com
Post exclusivo em: www.forum.imasters.com.br
*/

//Criando um loop que irá criar multiarrays para todos os dias do ano:
var evento = new Array();
for (loopMes = 0; loopMes<=11; loopMes++) {
       evento[loopMes] = new Array();
       for (loopDia=1; loopDia<=31; loopDia++) {
               evento[loopMes][loopDia] = "";
       }
}

//----------------------- AGENDA -----------------------//
evento[10][1] = "Hoje é dia 1. O mês está começando!";
evento[10][2] = "Olá. Hoje é dia 2. O mês começou ontem!";
evento[10][3] = "Eu gosto do dia 3!";
evento[10][28] = "O mês está acabando. Hoje é dia 28!";




function calendario() {
//Defina o mês que será exibido no calendário:
var pesquisaMes = 10; //0:Jan; 1:Fev; 2:Mar; 3:Abr; 4:Mai; 5:Jun; 6:Jul; 7:Ago; 8:Set; 9:Out; 10:Nov; 11:Dez;

//Defina o ano:
var ano = 2009;

//Defina o dia da semana em que o ano começa:
var inicioDiaSem = 4; //0:Dom; 1:Seg; 2:Ter; 3:Qua; 4:Qui; 5:Sex; 6:Sáb;



//----------------------- NÃO ALTERAR -----------------------//
var pesquisaDia = 1; //Não alterar
var diasNoMes = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
//Verificando se o ano é bissexto:
diasNoMes[1] = ((ano%4 == 0)?29:28);

var pesquisaDiasTotais = 0;

for (var i = 0; i<pesquisaMes; i++) {
       pesquisaDiasTotais += diasNoMes[i];
}
pesquisaDiasTotais += pesquisaDia;
//alert(pesquisaDiasTotais);

var calculoDiaSem = ((pesquisaDiasTotais%7)+inicioDiaSem);


//------------------- INICIANDO A CONSTRUÇÃO DO CALENDÁRIO -------------------//
var tabela = ""; //Variável que irá armazenar todas as linhas da tabela do calendário;
var iCount = 1; //Criando um contador contínuo, que servirá de referencial;

//Criando um contador para o dia do mês.
//Esse contador só iniciará quando o iCount for maior ou igual ao dia em que a semana inicia;
var iMes = 1; 

//Construindo o calendário, com 6 linhas:
for (var iLinha=1; iLinha<=6; iLinha++) {
tabela += "<tr>"; // Abrindo a linha atual;
       for(var iCol = 1; iCol<=7; iCol++) {

                       //Se iCount for maior que o dia em que a semana inicia, então: iniciar iMes;
                       //Após os testes, para evitar iniciar o calendário saltando uma linha, vamos elevar o valor
                       //do iCount, caso o calculoDiaSem seja 7;
                       if (calculoDiaSem > 7) {
                               iCount = 8;
                       }

                       if (iCount >= calculoDiaSem && iMes <= diasNoMes[pesquisaMes]) {
                               //Verificar se existem eventos associados ao dia atual:
                               var variavel = eval("evento["+iMes+"]");
                               if (evento[pesquisaMes][iMes] != "") {
                                       temEvento = true;
                               } else {
                                       temEvento = false;
                               }

                               //alert(evalEvento);
                               if (temEvento == true) {
                                       tabela += "<td><a href='javascript:verEvento("+pesquisaMes+","+iMes+")'>"+iMes+"</a></td>";
                               } else {
                                       tabela += "<td>"+iMes+"</td>";
                               }
                               iMes++;
                       } else {
                               tabela += "<td> </td>";
                       }
               iCount++;
       }
tabela += "</tr>"; // Fechando a linha atual;
}

document.getElementById("calendario").innerHTML = "<table width='200px' border='1'>"+tabela+"</table>";
}

function verEvento(v1,v2) {
var objCalEv = document.getElementById("calendarioEventos");

objCalEv.innerHTML = evento[v1][v2];
}
window.onload = calendario;
</script>
</head>
<body>
<div id="calendario"></div>
<br><br>
<div id="calendarioEventos"></div>
</body>
</html>

Vadio · Outubro 9, 2012

não crie..

copie e implemente.

oque você quer fazer?

http://dojotoolkit.org/reference-guide/1.8/dijit/Calendar.html

http://dojotoolkit.org/api/ - (dijit/Calendar)

na moral com isso você consegue fazer oq quiser de forma simples e rápida.

bons estudos.

tem esse também

http://developer.yahoo.com/yui/examples/calendar/index.html

e mais esse

http://jqueryui.com/datepicker/

tem também...

http://livedocs.dojotoolkit.org/dojox/calendar

não vamos esquecer do google....

https://developers.google.com/google-apps/calendar/?hl=pt-br

programo a 5anos também já pensei em desistir pelo mesmo motivo mas essa m***** não me larga... e eu não largo dela.. então comecei a estudar... percebi que o melhor é conhecer oque já tem pronto pois quase tudo oque precisamos fazer já existe feito prontinho esperando para ser usado...

CaptainZap · Outubro 9, 2012

HAHAHAHA Gostei do que disse amigo!

entao, o que eu quero é: um calendário, que tenha em datas exatas algum formulário (link em pdf).

Vadio · Outubro 9, 2012

bom

crie um formulário para add os pdf

tabela

documentos
id - id
path - diretório de destino do arquivo
data - data para ser added

utilizando o dojox/calendar do dojo agora só controlar os eventos e fazer uma consulta ajax assim q uma data for clicada fazer uma busca no db para verificar se existe arquivo para esse dia e disponibilizar o download

a consulta ajax pode ser feita com o dojo/_base/xhr

ou antes de controlar esse evento já popular o calendar com os arquivos

CaptainZap · Outubro 9, 2012

bom

crie um formulário para add os pdf

tabela
documentos
id - id
path - diretório de destino do arquivo
data - data para ser added
utilizando o dojox/calendar do dojo agora só controlar os eventos e fazer uma consulta ajax assim q uma data for clicada fazer uma busca no db para verificar se existe arquivo para esse dia e disponibilizar o download

a consulta ajax pode ser feita com o dojo/_base/xhr

ou antes de controlar esse evento já popular o calendar com os arquivos

poxa mas com certeza tem como fazer sem db, nao?

se liga neste código e testa ai.. se possivel..

<html>
<head>
<title>Imagens em um ComboBox - by Klonder</title>
<style type="text/css">
* {background-color:#FFF; margin:0; padding:0; list-style: none;}
</style>

<script type="text/javascript">
/*
Código by: klonder
klonder@ymail.com
Post exclusivo em: www.forum.imasters.com.br
*/

//Criando um loop que irá criar multiarrays para todos os dias do ano:
var evento = new Array();
for (loopMes = 0; loopMes<=11; loopMes++) {
       evento[loopMes] = new Array();
       for (loopDia=1; loopDia<=31; loopDia++) {
               evento[loopMes][loopDia] = "";
       }
}

//----------------------- AGENDA -----------------------//
evento[10][1] = "Hoje é dia 1. O mês está começando!";
evento[10][2] = "Olá. Hoje é dia 2. O mês começou ontem!";
evento[10][3] = "Eu gosto do dia 3!";
evento[10][28] = "O mês está acabando. Hoje é dia 28!";




function calendario() {
//Defina o mês que será exibido no calendário:
var pesquisaMes = 10; //0:Jan; 1:Fev; 2:Mar; 3:Abr; 4:Mai; 5:Jun; 6:Jul; 7:Ago; 8:Set; 9:Out; 10:Nov; 11:Dez;

//Defina o ano:
var ano = 2009;

//Defina o dia da semana em que o ano começa:
var inicioDiaSem = 4; //0:Dom; 1:Seg; 2:Ter; 3:Qua; 4:Qui; 5:Sex; 6:Sáb;



//----------------------- NÃO ALTERAR -----------------------//
var pesquisaDia = 1; //Não alterar
var diasNoMes = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
//Verificando se o ano é bissexto:
diasNoMes[1] = ((ano%4 == 0)?29:28);

var pesquisaDiasTotais = 0;

for (var i = 0; i<pesquisaMes; i++) {
       pesquisaDiasTotais += diasNoMes[i];
}
pesquisaDiasTotais += pesquisaDia;
//alert(pesquisaDiasTotais);

var calculoDiaSem = ((pesquisaDiasTotais%7)+inicioDiaSem);


//------------------- INICIANDO A CONSTRUÇÃO DO CALENDÁRIO -------------------//
var tabela = ""; //Variável que irá armazenar todas as linhas da tabela do calendário;
var iCount = 1; //Criando um contador contínuo, que servirá de referencial;

//Criando um contador para o dia do mês.
//Esse contador só iniciará quando o iCount for maior ou igual ao dia em que a semana inicia;
var iMes = 1; 

//Construindo o calendário, com 6 linhas:
for (var iLinha=1; iLinha<=6; iLinha++) {
tabela += "<tr>"; // Abrindo a linha atual;
       for(var iCol = 1; iCol<=7; iCol++) {

                       //Se iCount for maior que o dia em que a semana inicia, então: iniciar iMes;
                       //Após os testes, para evitar iniciar o calendário saltando uma linha, vamos elevar o valor
                       //do iCount, caso o calculoDiaSem seja 7;
                       if (calculoDiaSem > 7) {
                               iCount = 8;
                       }

                       if (iCount >= calculoDiaSem && iMes <= diasNoMes[pesquisaMes]) {
                               //Verificar se existem eventos associados ao dia atual:
                               var variavel = eval("evento["+iMes+"]");
                               if (evento[pesquisaMes][iMes] != "") {
                                       temEvento = true;
                               } else {
                                       temEvento = false;
                               }

                               //alert(evalEvento);
                               if (temEvento == true) {
                                       tabela += "<td><a href='javascript:verEvento("+pesquisaMes+","+iMes+")'>"+iMes+"</a></td>";
                               } else {
                                       tabela += "<td>"+iMes+"</td>";
                               }
                               iMes++;
                       } else {
                               tabela += "<td> </td>";
                       }
               iCount++;
       }
tabela += "</tr>"; // Fechando a linha atual;
}

document.getElementById("calendario").innerHTML = "<table width='200px' border='1'>"+tabela+"</table>";
}

function verEvento(v1,v2) {
var objCalEv = document.getElementById("calendarioEventos");

objCalEv.innerHTML = evento[v1][v2];
}
window.onload = calendario;
</script>
</head>
<body>
<div id="calendario"></div>
<br><br>
<div id="calendarioEventos"></div>
</body>
</html>

Ai ele faz um calendário futil, sem eu poder visualizar varios meses, porem tem um 'a href' em arrays.

Vadio · Outubro 9, 2012

vamo lá

primeiro baixe o dojo

coloqueo dentro da pasta htdocs/www do seu apache

vo te passa meu arquivo de configuração do dojo..

dojoConfig.js

dojoConfig = {
   has: {
       "dojo-firebug": true
   },
   baseUrl: "/dojo/dojo",
   parseOnLoad: true,
   async: true,
   packages: [{
       name: "My",
       path: '/dojo'
   }]
};

minha estrutura de pastas ficou assim

htdocs
- dojo
- - dojo
- - - My 
- - dijit
- - dojox

o My é a pasta q eu criei para os meus modulos... dessa maneira eu crio um módulo e posso reutiliza-lo de kk outra página.. mto bacana mas dexa isso pra depois...

vamo só fazer um calendar ae pra você ver...

<!DOCTYPE num sei oq mais>
<html>
<head>
<!-- DOJO STYLE -->
<link href="/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/dojo/dojox/calendar/themes/claro/Calendar.css">
<!-- DOJO SCRIPT -->
<script type="text/javascript" src="/dojo/dojoConfig.js"></script>
<script type="text/javascript"src="/dojo/dojo/dojo.js"></script>
<script type="text/javascript">
       // Require dependencies
       require([
           "dojo/ready",
           "dojox/calendar/Calendar"
       ], function(ready, Calendar){
           ready(function(){
               //encapsulando calendar;
               var calendar = new Calendar({
                   dateInterval: "month"
               },'calendar');
           });
       });
</script>
<body>
<div style="position:relative;width:1024px;height:800px">
   <div id="calendar"></div>
</div>
</body>

Q DOIDO AGORA TEMO UM CALENDAR BEM BACANA

bom você não precisa usar o DB mas tem q informar a data para linkar o pdf em algum lugar..

você pode escrever na mão um json para fazer essa referencia

criar um array

ou simplesmente nomear o pdf com a data e fazer uma busca na pasta onde esses documentos estarão gerar esse array/json e boa

aí tem uma ref melhor.. infelizmente as demo não funfa direito mas você pode testa no seu pc q vai funcionar na boa...

até agora não encontrei algo q não fosse crossbrowser no dojo então um problema a menos..

ref.: http://livedocs.dojotoolkit.org/dojox/calendar

não esqueça de dar uma olhadad na API

para ver propriedades/metodos/eventos

desse "objeto"

bons estudos

beleza..

agora q o calendario ta pronto

você cria um store pra add os dados

eu add um dado ak só pra te mostra como faz...

var someData = [
                   {
                       id: 0,
                       summary: "Event 1",
                       startTime:  new Date(2012,9, 10, 10), //ano, mes (0-11), dia (1-31), hora
                       endTime: new Date(2012,9, 10, 12), //ano, mes (0-11), dia (1-31), hora
                       link: 'xyz'
                   }
               ];

               var calendar = new Calendar({
                   store: new Observable(new Memory({data: someData})),
                   onItemClick: function(e){
                       //console.debug(e.item.link); //chrome debug
                       //alert(e.item.link) //alertando link q foi passado no evento
                   },
                   dateInterval: "month"
               },'calendar');
               calendar.startup();

não vai funfa.. adivinha adivinha....

não importamos a Observable e a Memory.. então vamos importar os objetos necessários para a aplicação...

require([
           "dojo/ready",
           "dojox/calendar/Calendar",
           "dojo/store/Memory",
           "dojo/store/Observable"
       ], function(ready, Calendar, Memory, Observable){
           ready(function(){
               //...
           });
       });

pronto nem dueu..

xD vlw brother espero ter ajudado

esqueci... coloque class="claro" no body para que ele assuma as caracteristicas css já predefinidas desse estilo..

eu sei q tem mais estilos

nihilo, soria, tundra.. você inclusive pode criar seu próprio estilo...

procure usar o "claro" q é os estilos q estamos importando no cabeçalho...

dojotoolkit.org - use.. será sua "biblia" de hj em diante.

mais uma vez bons estudos

<body class="claro">
 <!-- ... -->
</body

pra fala a verdade eu nunca tinha mexido com o calendar do dojo.. por isso to pesquisando ak algumas coisas sobre o objeto.

percebi q do jeito q está é possivel para o usuario mover o evento de data.. mas nós não queremos isso..

então só setarmos no construtor do objeto calendar

moveEnabled : false

mto legal mas agora ele não muda o mouse.. ok vamos dar uma olhadana API - dojox/calendar/Calendar::Events ...

nossa oque temos lá?!?

onItemRollOut(e)

onItemRollOver(e)

ambos são uma função e podemos controlar esses eventos dessa maneira

var calendar = new Calendar({
   //...
   onItemRollOut: function(e){
       alert(e+" - ROLLOUT");
   },
   onItemRollOver: function(e){
       alert(e+" - ROLLOVER");
   }

},'calendar');

pronto.. acho q agora sim você já pode se virar sozinho..

CaptainZap · Outubro 10, 2012

Opa, gostei do que vi. Só vou ter a oportunidade de experimentar isso na sexta-feira =(

mas deve dar certo, se bem que o calendário que eu queria nao era esse de evento nao, vamos ver como vai ficar no outro.

Arquivado

Adicionar "eventos" Em Calendario Dinamico

Recommended Posts

CaptainZap 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gaw 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

CaptainZap 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

CaptainZap 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gaw 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

CaptainZap 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gaw 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

CaptainZap 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gaw 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

CaptainZap 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

CaptainZap 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

CaptainZap 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

CaptainZap 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante