[duvida] Calendario não funciona corretamente

Vinicius_Rodrigues · Dezembro 8, 2010

Olá, novamente venho aqui para tentar acabar com uma duvida que eu já não tenho mais solução.

bom, eu tenho uma pagina em que preciso colocar 2 caixas para data, e um botão a frente que quando clica, aparece um mini calendario.

até ai tudo bem, mas quando eu clico, aparece metade do calendario , faltando os dias;

só aparece o menuzinho e os dias da semana , mas faltam os dias.

<!-- BEGIN body -->
<link rel="stylesheet" type="text/css" href="./expressoAdmin1_2/templates/default/accesslogproxy.css">
<p>
    <div align="center">
        <table border="0" width="100%">
            <tr>
                <td align="left" width="25%">
                    <input type="button" value="{lang_back}" onClick="document.location.href='{back_url}'">
                          
   
&lt;script type="text/javascript">

// construindo o calendário
function popdate(obj,div,tam,ddd)
{
    if (ddd) 
    {
        day = ""
        mmonth = ""
        ano = ""
        c = 1
        char = ""
        for (s=0;s<parseInt(ddd.length);s++)
        {
            char = ddd.substr(s,1)
            if (char == "/") 
            {
                c++; 
                s++; 
                char = ddd.substr(s,1);
            }
            if (c==1) day    += char
            if (c==2) mmonth += char
            if (c==3) ano    += char
        }
        ddd = mmonth + "/" + day + "/" + ano
    }
  
    if(!ddd) {today = new Date()} else {today = new Date(ddd)}
    date_Form = eval (obj)
    if (date_Form.value == "") { date_Form = new Date()} else {date_Form = new Date(date_Form.value)}
  
    ano = today.getFullYear();
    mmonth = today.getMonth ();
    day = today.toString ().substr (8,2)
  
    umonth = new Array ("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro")
    days_Feb = (!(ano % 4) ? 29 : 28)
    days = new Array (31, days_Feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)

    if ((mmonth < 0) || (mmonth > 11))  alert(mmonth)
    if ((mmonth - 1) == -1) {month_prior = 11; year_prior = ano - 1} else {month_prior = mmonth - 1; year_prior = ano}
    if ((mmonth + 1) == 12) {month_next  = 0;  year_next  = ano + 1} else {month_next  = mmonth + 1; year_next  = ano}
    txt  = "<table bgcolor='#efefff' style='border:solid #330099; border-width:1' cellspacing='4' cellpadding='1' border='3' width='"+tam+"' height='"+tam+"'>"
    txt += "<tr bgcolor=#330099'><td colspan='7' align='center'><table border='0' cellpadding='0' width='100%' bgcolor='#FFFFFF'><tr>"
    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano-1).toString())+"') class='Cabecalho_Calendario' title='Ano Anterior'><<</a></td>"
    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_prior+1).toString() + "/" + year_prior.toString())+"') class='Cabecalho_Calendario' title='Mês Anterior'><</a></td>"
    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_next+1).toString()  + "/" + year_next.toString())+"') class='Cabecalho_Calendario' title='Próximo Mês'>></a></td>"
    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano+1).toString())+"') class='Cabecalho_Calendario' title='Próximo Ano'>>></a></td>"
    txt += "<td width=20% align=right><a href=java script:force_close('"+div+"') class='Cabecalho_Calendario' title='Fechar Calendário'><b>X</b></a></td></tr></table></td></tr>"
    txt += "<tr><td colspan='7' align='right' bgcolor='#ccccff' class='mes'><a href=java script:pop_year('"+obj+"','"+div+"','"+tam+"','" + (mmonth+1) + "') class='mes'>" + ano.toString() + "</a>"
    txt += " <a href=java script:pop_month('"+obj+"','"+div+"','"+tam+"','" + ano + "') class='mes'>" + umonth[mmonth] + "</a> <div id='popd' style='position:absolute'></div></td></tr>"
    txt += "<tr bgcolor='#330099'><td width='100%' height='1%' class='dia' align=center><b>Dom</b></td><td width='14%' height='1%' class='dia' align=center><b>Seg</b></td><td width='14%' height='1%' class='dia' align=center><b>Ter</b></td><td width='14%' height='1%' class='dia' align=center><b>Qua</b></td><td width='14%' height='1%' class='dia' align=center><b>Qui</b></td><td width='14%' height='1%' class='dia' align=center><b>Sex<b></td><td width='14%' height='1%' class='dia' align=center><b>Sab</b></td></tr>"
    today1 = new Date((mmonth+1).toString() +"/01/"+ano.toString());
    diainicio = today1.getDay () + 1;
    week = d = 1
    start = false;

    for (n=1;n<= 42;n++) 
    {
        if (week == 1)  txt += "<tr bgcolor='#330099' align=center position:absolute>"
        if (week==diainicio) {start = true}
        if (d > days[mmonth]) {start=false}
        if (start) 
        {
            dat = new Date((mmonth+1).toString() + "/" + d + "/" + ano.toString())
            day_dat   = dat.toString().substr(0,10)
            day_today  = date_Form.toString().substr(0,10)
            year_dat  = dat.getFullYear ()
            year_today = date_Form.getFullYear ()
            colorcell = ((day_dat == day_today) && (year_dat == year_today) ? " bgcolor='#FFCC00' " : "" )
            txt += "<td"+colorcell+" align=center><a href=java script:block('"+  d + "/" + (mmonth+1).toString() + "/" + ano.toString() +"','"+ obj +"','" + div +"') class='data'>"+ d.toString() + "</a></td>"
            d ++ 
        } 
        else 
        { 
            txt += "<td class='data' align=center> </td>"
        }
        week ++
        if (week == 8) 
        { 
            week = 1; txt += "</tr>"} 
        }
        txt += "</table>"
        div2 = eval (div)
        div2.innerHTML = txt 
}
  
// função para exibir a janela com os meses
function pop_month(obj, div, tam, ano)
{
  txt  = "<table bgcolor='#CCCCFF' border='5' width=auto>"
  for (n = 0; n < 12; n++) { txt += "<tr><td align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+("01/" + (n+1).toString() + "/" + ano.toString())+"')>" + umonth[n] +"</a></td></tr>" }
  txt += "</table>"
  popd.innerHTML = txt
}

// função para exibir a janela com os anos
function pop_year(obj, div, tam, umonth)
{
  txt  = "<table bgcolor='#CCCCFF' border='5' width=auto>"
  l = 1
  for (n=1991; n<2012; n++)
  {  if (l == 1) txt += "<tr>"
     txt += "<td align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+(umonth.toString () +"/01/" + n) +"')>" + n + "</a></td>"
     l++
     if (l == 4) 
        {txt += "</tr>"; l = 1 } 
  }
  txt += "</tr></table>"
  popd.innerHTML = txt 
}

// função para fechar o calendário
function force_close(div) 
    { div2 = eval (div); div2.innerHTML = ''}
    
// função para fechar o calendário e setar a data no campo de data associado
function block(data, obj, div)
{ 
    force_close (div)
    obj2 = eval(obj)
    obj2.value = data 
}

</script>

<!-- 
o css abaixo é apenas para dar uma aparência melhor para o calendário. você pode mudá-lo a sua maneira 
insira o código abaixo entre as tags <HEAD> </HEAD> de sua página
-->
<style>
    .dia {font-family: helvetica, arial; font-size: 8pt; color: #FFFFFF}
    .data {font-family: helvetica, arial; font-size: 2pt; color=#330099}
    .mes {font-family: helvetica, arial; font-size: 8pt}
    .Cabecalho_Calendario {font-family: helvetica, arial; font-size: 10pt; color: #000000; text-decoration:none; font-weight:bold}
</style>


<!-- insira o código abaixo dentro das tags <BODY> </BODY> de sua página -->
<form name='form1'>

<!-- data 1 -->
Data Inicial: <input NAME="data1" SIZE="10" MAXLENGTH="10" value=""> 
<input TYPE="button" NAME="btnData1" VALUE="..." Onclick="java script:popdate('document.form1.data1','pop1','150',document.form1.data1.value)">

<span id="pop1" style="position:absolute"></span>

<br><br>      
<!-- data 2 -->
Data Final:   <input NAME="data2" SIZE="10" MAXLENGTH="10" value=""> 
<input TYPE="button" NAME="btnData2" VALUE="..." Onclick="java script:popdate('document.form1.data2','pop2','150',document.form1.data2.value)">
<!-- na span abaixo aparece o segundo calendario -->
<span id="pop2" style="position:absolute" ></span>
      
</form>

                
                </td>
            </tr>
        </table>
    </div>

    <div align="center">
        <table width="100%">
            <tr bgcolor="{th_bg}" align="center">
                <td width="20%">{lang_loginid}</td>
                <td width="20%">{lang_ip_address}</td>
                <td width="30%">{lang_login}</td>
                <td width="30%">{lang_logout}</td>
            </tr>
            
            {rows}
            
<!-- END body -->
<!-- BEGIN row -->
    <tr>
        <td style="border-bottom:1px solid black">{row_loginid}</td>
        <td style="border-bottom:1px solid black">{row_ip}</td>
        <td style="border-bottom:1px solid black">{row_li}</td>
        <td style="border-bottom:1px solid black">{row_lo}</td>
    </tr>
<!-- END row -->

<!-- BEGIN row_empty -->
    <tr>
        <td colspan="7" align="center"><font color="red"><b>{message}</b></font></td>
    </tr>
<!-- END row_empty -->

    <tr>
        <td>
            <input type="button" value="{lang_back}" onClick="document.location.href='{back_url}'">
        </td>
    </tr>

esse é o codigo da pagina com o calendario, e abaixo o codigo do calendario que eu arrumei em um site.

<!-- insira o seguinte código de javascript em sua página. -->



&lt;script language='Javascript'>



// construindo o calendário

function popdate(obj,div,tam,ddd)

{

    if (ddd) 

    {

        day = ""

        mmonth = ""

        ano = ""

        c = 1

        char = ""

        for (s=0;s<parseInt(ddd.length);s++)

        {

            char = ddd.substr(s,1)

            if (char == "/") 

            {

                c++; 

                s++; 

                char = ddd.substr(s,1);

            }

            if (c==1) day    += char

            if (c==2) mmonth += char

            if (c==3) ano    += char

        }

        ddd = mmonth + "/" + day + "/" + ano

    }

  

    if(!ddd) {today = new Date()} else {today = new Date(ddd)}

    date_Form = eval (obj)

    if (date_Form.value == "") { date_Form = new Date()} else {date_Form = new Date(date_Form.value)}

  

    ano = today.getFullYear();

    mmonth = today.getMonth ();

    day = today.toString ().substr (8,2)

  

    umonth = new Array ("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro")

    days_Feb = (!(ano % 4) ? 29 : 28)

    days = new Array (31, days_Feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)



    if ((mmonth < 0) || (mmonth > 11))  alert(mmonth)

    if ((mmonth - 1) == -1) {month_prior = 11; year_prior = ano - 1} else {month_prior = mmonth - 1; year_prior = ano}

    if ((mmonth + 1) == 12) {month_next  = 0;  year_next  = ano + 1} else {month_next  = mmonth + 1; year_next  = ano}

    txt  = "<table bgcolor='#efefff' style='border:solid #330099; border-width:2' cellspacing='0' cellpadding='3' border='0' width='"+tam+"' height='"+tam*1.1 +"'>"

    txt += "<tr bgcolor='#FFFFFF'><td colspan='7' align='center'><table border='0' cellpadding='0' width='100%' bgcolor='#FFFFFF'><tr>"

    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano-1).toString())+"') class='Cabecalho_Calendario' title='Ano Anterior'><<</a></td>"

    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_prior+1).toString() + "/" + year_prior.toString())+"') class='Cabecalho_Calendario' title='Mês Anterior'><</a></td>"

    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_next+1).toString()  + "/" + year_next.toString())+"') class='Cabecalho_Calendario' title='Próximo Mês'>></a></td>"

    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano+1).toString())+"') class='Cabecalho_Calendario' title='Próximo Ano'>>></a></td>"

    txt += "<td width=20% align=right><a href=java script:force_close('"+div+"') class='Cabecalho_Calendario' title='Fechar Calendário'><b>X</b></a></td></tr></table></td></tr>"

    txt += "<tr><td colspan='7' align='right' bgcolor='#ccccff' class='mes'><a href=java script:pop_year('"+obj+"','"+div+"','"+tam+"','" + (mmonth+1) + "') class='mes'>" + ano.toString() + "</a>"

    txt += " <a href=java script:pop_month('"+obj+"','"+div+"','"+tam+"','" + ano + "') class='mes'>" + umonth[mmonth] + "</a> <div id='popd' style='position:absolute'></div></td></tr>"

    txt += "<tr bgcolor='#330099'><td width='14%' class='dia' align=center><b>Dom</b></td><td width='14%' class='dia' align=center><b>Seg</b></td><td width='14%' class='dia' align=center><b>Ter</b></td><td width='14%' class='dia' align=center><b>Qua</b></td><td width='14%' class='dia' align=center><b>Qui</b></td><td width='14%' class='dia' align=center><b>Sex<b></td><td width='14%' class='dia' align=center><b>Sab</b></td></tr>"

    today1 = new Date((mmonth+1).toString() +"/01/"+ano.toString());

    diainicio = today1.getDay () + 1;

    week = d = 1

    start = false;



    for (n=1;n<= 42;n++) 

    {

        if (week == 1)  txt += "<tr bgcolor='#efefff' align=center>"

        if (week==diainicio) {start = true}

        if (d > days[mmonth]) {start=false}

        if (start) 

        {

            dat = new Date((mmonth+1).toString() + "/" + d + "/" + ano.toString())

            day_dat   = dat.toString().substr(0,10)

            day_today  = date_Form.toString().substr(0,10)

            year_dat  = dat.getFullYear ()

            year_today = date_Form.getFullYear ()

            colorcell = ((day_dat == day_today) && (year_dat == year_today) ? " bgcolor='#FFCC00' " : "" )

            txt += "<td"+colorcell+" align=center><a href=java script:block('"+  d + "/" + (mmonth+1).toString() + "/" + ano.toString() +"','"+ obj +"','" + div +"') class='data'>"+ d.toString() + "</a></td>"

            d ++ 

        } 

        else 

        { 

            txt += "<td class='data' align=center> </td>"

        }

        week ++

        if (week == 8) 

        { 

            week = 1; txt += "</tr>"} 

        }

        txt += "</table>"

        div2 = eval (div)

        div2.innerHTML = txt 

}

  

// função para exibir a janela com os meses

function pop_month(obj, div, tam, ano)

{

  txt  = "<table bgcolor='#CCCCFF' border='0' width=80>"

  for (n = 0; n < 12; n++) { txt += "<tr><td align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+("01/" + (n+1).toString() + "/" + ano.toString())+"')>" + umonth[n] +"</a></td></tr>" }

  txt += "</table>"

  popd.innerHTML = txt

}



// função para exibir a janela com os anos

function pop_year(obj, div, tam, umonth)

{

  txt  = "<table bgcolor='#CCCCFF' border='0' width=160>"

  l = 1

  for (n=1991; n<2012; n++)

  {  if (l == 1) txt += "<tr>"

     txt += "<td align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+(umonth.toString () +"/01/" + n) +"')>" + n + "</a></td>"

     l++

     if (l == 4) 

        {txt += "</tr>"; l = 1 } 

  }

  txt += "</tr></table>"

  popd.innerHTML = txt 

}



// função para fechar o calendário

function force_close(div) 

    { div2 = eval (div); div2.innerHTML = ''}

    

// função para fechar o calendário e setar a data no campo de data associado

function block(data, obj, div)

{ 

    force_close (div)

    obj2 = eval(obj)

    obj2.value = data 

}



</script>



<!-- 

o css abaixo é apenas para dar uma aparência melhor para o calendário. você pode mudá-lo a sua maneira 

insira o código abaixo entre as tags <HEAD> </HEAD> de sua página

-->

<style>

    .dia {font-family: helvetica, arial; font-size: 8pt; color: #FFFFFF}

    .data {font-family: helvetica, arial; font-size: 8pt; text-decoration:none; color:#191970}

    .mes {font-family: helvetica, arial; font-size: 8pt}

    .Cabecalho_Calendario {font-family: helvetica, arial; font-size: 10pt; color: #000000; text-decoration:none; font-weight:bold}

</style>





<!-- insira o código abaixo dentro das tags <BODY> </BODY> de sua página -->

<form name='form1'>



<!-- data 1 -->

<input NAME="data1" SIZE="10" MAXLENGTH="10" value=""> 

<input TYPE="button" NAME="btnData1" VALUE="..." Onclick="java script:popdate('document.form1.data1','pop1','150',document.form1.data1.value)">

<!-- 

    na span abaixo aparece o primeiro calendario.

    você pode colocar a span abaixo no lugar onde quiser em sua 

    pagina inclusive dentro de uma table para facilitar o 

    posicionamento. Mas lembre-se que quanto mais perto a span 

    estiver do campo de data a ela associada mais fácil será para

    o usuario associar. 

-->



<span id="pop1" style="position:absolute"></span>



<br><br>      

<!-- data 2 -->

<input NAME="data2" SIZE="10" MAXLENGTH="10" value=""> 

<input TYPE="button" NAME="btnData2" VALUE="..." Onclick="java script:popdate('document.form1.data2','pop2','150',document.form1.data2.value)">

<!-- na span abaixo aparece o segundo calendario -->

<span id="pop2" style="position:absolute"></span>

      

<!-- 

    caso queira inserir outros campos de data em sua página

    certifique-se de substituir corretamente os nomes dos

    objetos em javascript. 

    EX: o objeto input text será o data3 - ou como você quiser

        o objeto button será o btnData3 - ou como você quiser

        nas chamadas das funçoes no evento onClick os nomes

        deverão referenciar seus respectivos objetos.

-->

</form>

Obrigado desde já.

rickayron · Dezembro 9, 2010

Olá, novamente venho aqui para tentar acabar com uma duvida que eu já não tenho mais solução.

bom, eu tenho uma pagina em que preciso colocar 2 caixas para data, e um botão a frente que quando clica, aparece um mini calendario.

até ai tudo bem, mas quando eu clico, aparece metade do calendario , faltando os dias;

só aparece o menuzinho e os dias da semana , mas faltam os dias.

<!-- BEGIN body -->
<link rel="stylesheet" type="text/css" href="./expressoAdmin1_2/templates/default/accesslogproxy.css">
<p>
    <div align="center">
        <table border="0" width="100%">
            <tr>
                <td align="left" width="25%">
                    <input type="button" value="{lang_back}" onClick="document.location.href='{back_url}'">
                          
   
&lt;script type="text/javascript">

// construindo o calendário
function popdate(obj,div,tam,ddd)
{
    if (ddd) 
    {
        day = ""
        mmonth = ""
        ano = ""
        c = 1
        char = ""
        for (s=0;s<parseInt(ddd.length);s++)
        {
            char = ddd.substr(s,1)
            if (char == "/") 
            {
                c++; 
                s++; 
                char = ddd.substr(s,1);
            }
            if (c==1) day    += char
            if (c==2) mmonth += char
            if (c==3) ano    += char
        }
        ddd = mmonth + "/" + day + "/" + ano
    }
  
    if(!ddd) {today = new Date()} else {today = new Date(ddd)}
    date_Form = eval (obj)
    if (date_Form.value == "") { date_Form = new Date()} else {date_Form = new Date(date_Form.value)}
  
    ano = today.getFullYear();
    mmonth = today.getMonth ();
    day = today.toString ().substr (8,2)
  
    umonth = new Array ("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro")
    days_Feb = (!(ano % 4) ? 29 : 28)
    days = new Array (31, days_Feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)

    if ((mmonth < 0) || (mmonth > 11))  alert(mmonth)
    if ((mmonth - 1) == -1) {month_prior = 11; year_prior = ano - 1} else {month_prior = mmonth - 1; year_prior = ano}
    if ((mmonth + 1) == 12) {month_next  = 0;  year_next  = ano + 1} else {month_next  = mmonth + 1; year_next  = ano}
    txt  = "<table bgcolor='#efefff' style='border:solid #330099; border-width:1' cellspacing='4' cellpadding='1' border='3' width='"+tam+"' height='"+tam+"'>"
    txt += "<tr bgcolor=#330099'><td colspan='7' align='center'><table border='0' cellpadding='0' width='100%' bgcolor='#FFFFFF'><tr>"
    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano-1).toString())+"') class='Cabecalho_Calendario' title='Ano Anterior'><<</a></td>"
    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_prior+1).toString() + "/" + year_prior.toString())+"') class='Cabecalho_Calendario' title='Mês Anterior'><</a></td>"
    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_next+1).toString()  + "/" + year_next.toString())+"') class='Cabecalho_Calendario' title='Próximo Mês'>></a></td>"
    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano+1).toString())+"') class='Cabecalho_Calendario' title='Próximo Ano'>>></a></td>"
    txt += "<td width=20% align=right><a href=java script:force_close('"+div+"') class='Cabecalho_Calendario' title='Fechar Calendário'><b>X</b></a></td></tr></table></td></tr>"
    txt += "<tr><td colspan='7' align='right' bgcolor='#ccccff' class='mes'><a href=java script:pop_year('"+obj+"','"+div+"','"+tam+"','" + (mmonth+1) + "') class='mes'>" + ano.toString() + "</a>"
    txt += " <a href=java script:pop_month('"+obj+"','"+div+"','"+tam+"','" + ano + "') class='mes'>" + umonth[mmonth] + "</a> <div id='popd' style='position:absolute'></div></td></tr>"
    txt += "<tr bgcolor='#330099'><td width='100%' height='1%' class='dia' align=center><b>Dom</b></td><td width='14%' height='1%' class='dia' align=center><b>Seg</b></td><td width='14%' height='1%' class='dia' align=center><b>Ter</b></td><td width='14%' height='1%' class='dia' align=center><b>Qua</b></td><td width='14%' height='1%' class='dia' align=center><b>Qui</b></td><td width='14%' height='1%' class='dia' align=center><b>Sex<b></td><td width='14%' height='1%' class='dia' align=center><b>Sab</b></td></tr>"
    today1 = new Date((mmonth+1).toString() +"/01/"+ano.toString());
    diainicio = today1.getDay () + 1;
    week = d = 1
    start = false;

    for (n=1;n<= 42;n++) 
    {
        if (week == 1)  txt += "<tr bgcolor='#330099' align=center position:absolute>"
        if (week==diainicio) {start = true}
        if (d > days[mmonth]) {start=false}
        if (start) 
        {
            dat = new Date((mmonth+1).toString() + "/" + d + "/" + ano.toString())
            day_dat   = dat.toString().substr(0,10)
            day_today  = date_Form.toString().substr(0,10)
            year_dat  = dat.getFullYear ()
            year_today = date_Form.getFullYear ()
            colorcell = ((day_dat == day_today) && (year_dat == year_today) ? " bgcolor='#FFCC00' " : "" )
            txt += "<td"+colorcell+" align=center><a href=java script:block('"+  d + "/" + (mmonth+1).toString() + "/" + ano.toString() +"','"+ obj +"','" + div +"') class='data'>"+ d.toString() + "</a></td>"
            d ++ 
        } 
        else 
        { 
            txt += "<td class='data' align=center> </td>"
        }
        week ++
        if (week == 8) 
        { 
            week = 1; txt += "</tr>"} 
        }
        txt += "</table>"
        div2 = eval (div)
        div2.innerHTML = txt 
}
  
// função para exibir a janela com os meses
function pop_month(obj, div, tam, ano)
{
  txt  = "<table bgcolor='#CCCCFF' border='5' width=auto>"
  for (n = 0; n < 12; n++) { txt += "<tr><td align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+("01/" + (n+1).toString() + "/" + ano.toString())+"')>" + umonth[n] +"</a></td></tr>" }
  txt += "</table>"
  popd.innerHTML = txt
}

// função para exibir a janela com os anos
function pop_year(obj, div, tam, umonth)
{
  txt  = "<table bgcolor='#CCCCFF' border='5' width=auto>"
  l = 1
  for (n=1991; n<2012; n++)
  {  if (l == 1) txt += "<tr>"
     txt += "<td align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+(umonth.toString () +"/01/" + n) +"')>" + n + "</a></td>"
     l++
     if (l == 4) 
        {txt += "</tr>"; l = 1 } 
  }
  txt += "</tr></table>"
  popd.innerHTML = txt 
}

// função para fechar o calendário
function force_close(div) 
    { div2 = eval (div); div2.innerHTML = ''}
    
// função para fechar o calendário e setar a data no campo de data associado
function block(data, obj, div)
{ 
    force_close (div)
    obj2 = eval(obj)
    obj2.value = data 
}

</script>

<!-- 
o css abaixo é apenas para dar uma aparência melhor para o calendário. você pode mudá-lo a sua maneira 
insira o código abaixo entre as tags <HEAD> </HEAD> de sua página
-->
<style>
    .dia {font-family: helvetica, arial; font-size: 8pt; color: #FFFFFF}
    .data {font-family: helvetica, arial; font-size: 2pt; color=#330099}
    .mes {font-family: helvetica, arial; font-size: 8pt}
    .Cabecalho_Calendario {font-family: helvetica, arial; font-size: 10pt; color: #000000; text-decoration:none; font-weight:bold}
</style>


<!-- insira o código abaixo dentro das tags <BODY> </BODY> de sua página -->
<form name='form1'>

<!-- data 1 -->
Data Inicial: <input NAME="data1" SIZE="10" MAXLENGTH="10" value=""> 
<input TYPE="button" NAME="btnData1" VALUE="..." Onclick="java script:popdate('document.form1.data1','pop1','150',document.form1.data1.value)">

<span id="pop1" style="position:absolute"></span>

<br><br>      
<!-- data 2 -->
Data Final:   <input NAME="data2" SIZE="10" MAXLENGTH="10" value=""> 
<input TYPE="button" NAME="btnData2" VALUE="..." Onclick="java script:popdate('document.form1.data2','pop2','150',document.form1.data2.value)">
<!-- na span abaixo aparece o segundo calendario -->
<span id="pop2" style="position:absolute" ></span>
      
</form>

                
                </td>
            </tr>
        </table>
    </div>

    <div align="center">
        <table width="100%">
            <tr bgcolor="{th_bg}" align="center">
                <td width="20%">{lang_loginid}</td>
                <td width="20%">{lang_ip_address}</td>
                <td width="30%">{lang_login}</td>
                <td width="30%">{lang_logout}</td>
            </tr>
            
            {rows}
            
<!-- END body -->
<!-- BEGIN row -->
    <tr>
        <td style="border-bottom:1px solid black">{row_loginid}</td>
        <td style="border-bottom:1px solid black">{row_ip}</td>
        <td style="border-bottom:1px solid black">{row_li}</td>
        <td style="border-bottom:1px solid black">{row_lo}</td>
    </tr>
<!-- END row -->

<!-- BEGIN row_empty -->
    <tr>
        <td colspan="7" align="center"><font color="red"><b>{message}</b></font></td>
    </tr>
<!-- END row_empty -->

    <tr>
        <td>
            <input type="button" value="{lang_back}" onClick="document.location.href='{back_url}'">
        </td>
    </tr>

esse é o codigo da pagina com o calendario, e abaixo o codigo do calendario que eu arrumei em um site.

<!-- insira o seguinte código de javascript em sua página. -->



&lt;script language='Javascript'>



// construindo o calendário

function popdate(obj,div,tam,ddd)

{

    if (ddd) 

    {

        day = ""

        mmonth = ""

        ano = ""

        c = 1

        char = ""

        for (s=0;s<parseInt(ddd.length);s++)

        {

            char = ddd.substr(s,1)

            if (char == "/") 

            {

                c++; 

                s++; 

                char = ddd.substr(s,1);

            }

            if (c==1) day    += char

            if (c==2) mmonth += char

            if (c==3) ano    += char

        }

        ddd = mmonth + "/" + day + "/" + ano

    }

  

    if(!ddd) {today = new Date()} else {today = new Date(ddd)}

    date_Form = eval (obj)

    if (date_Form.value == "") { date_Form = new Date()} else {date_Form = new Date(date_Form.value)}

  

    ano = today.getFullYear();

    mmonth = today.getMonth ();

    day = today.toString ().substr (8,2)

  

    umonth = new Array ("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro")

    days_Feb = (!(ano % 4) ? 29 : 28)

    days = new Array (31, days_Feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)



    if ((mmonth < 0) || (mmonth > 11))  alert(mmonth)

    if ((mmonth - 1) == -1) {month_prior = 11; year_prior = ano - 1} else {month_prior = mmonth - 1; year_prior = ano}

    if ((mmonth + 1) == 12) {month_next  = 0;  year_next  = ano + 1} else {month_next  = mmonth + 1; year_next  = ano}

    txt  = "<table bgcolor='#efefff' style='border:solid #330099; border-width:2' cellspacing='0' cellpadding='3' border='0' width='"+tam+"' height='"+tam*1.1 +"'>"

    txt += "<tr bgcolor='#FFFFFF'><td colspan='7' align='center'><table border='0' cellpadding='0' width='100%' bgcolor='#FFFFFF'><tr>"

    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano-1).toString())+"') class='Cabecalho_Calendario' title='Ano Anterior'><<</a></td>"

    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_prior+1).toString() + "/" + year_prior.toString())+"') class='Cabecalho_Calendario' title='Mês Anterior'><</a></td>"

    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_next+1).toString()  + "/" + year_next.toString())+"') class='Cabecalho_Calendario' title='Próximo Mês'>></a></td>"

    txt += "<td width=20% align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano+1).toString())+"') class='Cabecalho_Calendario' title='Próximo Ano'>>></a></td>"

    txt += "<td width=20% align=right><a href=java script:force_close('"+div+"') class='Cabecalho_Calendario' title='Fechar Calendário'><b>X</b></a></td></tr></table></td></tr>"

    txt += "<tr><td colspan='7' align='right' bgcolor='#ccccff' class='mes'><a href=java script:pop_year('"+obj+"','"+div+"','"+tam+"','" + (mmonth+1) + "') class='mes'>" + ano.toString() + "</a>"

    txt += " <a href=java script:pop_month('"+obj+"','"+div+"','"+tam+"','" + ano + "') class='mes'>" + umonth[mmonth] + "</a> <div id='popd' style='position:absolute'></div></td></tr>"

    txt += "<tr bgcolor='#330099'><td width='14%' class='dia' align=center><b>Dom</b></td><td width='14%' class='dia' align=center><b>Seg</b></td><td width='14%' class='dia' align=center><b>Ter</b></td><td width='14%' class='dia' align=center><b>Qua</b></td><td width='14%' class='dia' align=center><b>Qui</b></td><td width='14%' class='dia' align=center><b>Sex<b></td><td width='14%' class='dia' align=center><b>Sab</b></td></tr>"

    today1 = new Date((mmonth+1).toString() +"/01/"+ano.toString());

    diainicio = today1.getDay () + 1;

    week = d = 1

    start = false;



    for (n=1;n<= 42;n++) 

    {

        if (week == 1)  txt += "<tr bgcolor='#efefff' align=center>"

        if (week==diainicio) {start = true}

        if (d > days[mmonth]) {start=false}

        if (start) 

        {

            dat = new Date((mmonth+1).toString() + "/" + d + "/" + ano.toString())

            day_dat   = dat.toString().substr(0,10)

            day_today  = date_Form.toString().substr(0,10)

            year_dat  = dat.getFullYear ()

            year_today = date_Form.getFullYear ()

            colorcell = ((day_dat == day_today) && (year_dat == year_today) ? " bgcolor='#FFCC00' " : "" )

            txt += "<td"+colorcell+" align=center><a href=java script:block('"+  d + "/" + (mmonth+1).toString() + "/" + ano.toString() +"','"+ obj +"','" + div +"') class='data'>"+ d.toString() + "</a></td>"

            d ++ 

        } 

        else 

        { 

            txt += "<td class='data' align=center> </td>"

        }

        week ++

        if (week == 8) 

        { 

            week = 1; txt += "</tr>"} 

        }

        txt += "</table>"

        div2 = eval (div)

        div2.innerHTML = txt 

}

  

// função para exibir a janela com os meses

function pop_month(obj, div, tam, ano)

{

  txt  = "<table bgcolor='#CCCCFF' border='0' width=80>"

  for (n = 0; n < 12; n++) { txt += "<tr><td align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+("01/" + (n+1).toString() + "/" + ano.toString())+"')>" + umonth[n] +"</a></td></tr>" }

  txt += "</table>"

  popd.innerHTML = txt

}



// função para exibir a janela com os anos

function pop_year(obj, div, tam, umonth)

{

  txt  = "<table bgcolor='#CCCCFF' border='0' width=160>"

  l = 1

  for (n=1991; n<2012; n++)

  {  if (l == 1) txt += "<tr>"

     txt += "<td align=center><a href=java script:popdate('"+obj+"','"+div+"','"+tam+"','"+(umonth.toString () +"/01/" + n) +"')>" + n + "</a></td>"

     l++

     if (l == 4) 

        {txt += "</tr>"; l = 1 } 

  }

  txt += "</tr></table>"

  popd.innerHTML = txt 

}



// função para fechar o calendário

function force_close(div) 

    { div2 = eval (div); div2.innerHTML = ''}

    

// função para fechar o calendário e setar a data no campo de data associado

function block(data, obj, div)

{ 

    force_close (div)

    obj2 = eval(obj)

    obj2.value = data 

}



</script>



<!-- 

o css abaixo é apenas para dar uma aparência melhor para o calendário. você pode mudá-lo a sua maneira 

insira o código abaixo entre as tags <HEAD> </HEAD> de sua página

-->

<style>

    .dia {font-family: helvetica, arial; font-size: 8pt; color: #FFFFFF}

    .data {font-family: helvetica, arial; font-size: 8pt; text-decoration:none; color:#191970}

    .mes {font-family: helvetica, arial; font-size: 8pt}

    .Cabecalho_Calendario {font-family: helvetica, arial; font-size: 10pt; color: #000000; text-decoration:none; font-weight:bold}

</style>





<!-- insira o código abaixo dentro das tags <BODY> </BODY> de sua página -->

<form name='form1'>



<!-- data 1 -->

<input NAME="data1" SIZE="10" MAXLENGTH="10" value=""> 

<input TYPE="button" NAME="btnData1" VALUE="..." Onclick="java script:popdate('document.form1.data1','pop1','150',document.form1.data1.value)">

<!-- 

    na span abaixo aparece o primeiro calendario.

    você pode colocar a span abaixo no lugar onde quiser em sua 

    pagina inclusive dentro de uma table para facilitar o 

    posicionamento. Mas lembre-se que quanto mais perto a span 

    estiver do campo de data a ela associada mais fácil será para

    o usuario associar. 

-->



<span id="pop1" style="position:absolute"></span>



<br><br>      

<!-- data 2 -->

<input NAME="data2" SIZE="10" MAXLENGTH="10" value=""> 

<input TYPE="button" NAME="btnData2" VALUE="..." Onclick="java script:popdate('document.form1.data2','pop2','150',document.form1.data2.value)">

<!-- na span abaixo aparece o segundo calendario -->

<span id="pop2" style="position:absolute"></span>

      

<!-- 

    caso queira inserir outros campos de data em sua página

    certifique-se de substituir corretamente os nomes dos

    objetos em javascript. 

    EX: o objeto input text será o data3 - ou como você quiser

        o objeto button será o btnData3 - ou como você quiser

        nas chamadas das funçoes no evento onClick os nomes

        deverão referenciar seus respectivos objetos.

-->

</form>

Obrigado desde já.

O que você postou ai é javascript, caso queira uma solução com js acho melhor pedir a transferencia de tópico mas caso queira um calendario em php aqui está um basico.

<link rel="stylesheet" type="text/css" href="calendario.css">
<?
class calendario{
  var $mes = array(
                   '01' => 'JANEIRO',
                   '02' => 'FEVEREIRO',
                   '03' => 'MARÇO',
                   '04' => 'ABRIL',
                   '05' => 'MAIO',
                   '06' => 'JUNHO',
                   '07' => 'JULHO',
                   '08' => 'AGOSTO',
                   '09' => 'SETEMBRO',
                   '10' => 'OUTUBRO',
                   '11' => 'NOVEMBRO',
                   '12' => 'DEZEMBRO'
                  );

  function mes_anterior($dia,$mes,$ano){
    if($mes == 1){
       $man = 12;
       $aan = $ano - 1;
    } else {
       $man = $mes - 1;
       $aan = $ano;
    }

    $val = checkdate($man,$dia,$aan);
    if($val == 0){
      $dia = 1;
    }
    echo '<a href="calendario.php?data='.sprintf("%02.0f",$dia).'/'.sprintf("%02.0f",$man).'/'.$aan.'">«</a>';
  }

  function mes_proximo($dia,$mes,$ano){
    if($mes == 12){
       $mpr = 1;
       $apr = $ano + 1;
    } else {
       $mpr = $mes + 1;
       $apr = $ano;
    }

    $val = checkdate($mpr,$dia,$apr);
    if($val == 0){
      $dia = 1;
    }
    echo '<a href="calendario.php?data='.sprintf("%02.0f",$dia).'/'.sprintf("%02.0f",$mpr).'/'.$apr.'">»</a>';
  }

  function ano_anterior($dia,$mes,$ano){
    $aan = $ano - 1;
    echo '<a href="calendario.php?data='.sprintf("%02.0f",$dia).'/'.sprintf("%02.0f",$mes).'/'.$aan.'">«</a>';
  }

  function ano_proximo($dia,$mes,$ano){
    $apr = $ano + 1;
    echo '<a href="calendario.php?data='.sprintf("%02.0f",$dia).'/'.sprintf("%02.0f",$mes).'/'.$apr.'">»</a>';
  }

  function cria($data){
    $arr = explode("/",$data);
    $dia = $arr[0];
    $mes = $arr[1];
    $ano = $arr[2];

    if(($dia == '') OR ($mes = '') OR ($ano = '')){
      $data = date("d/m/Y");
      $arr = explode("/",$data);
      $dia = $arr[0];
      $mes = $arr[1];
      $ano = $arr[2];
    }

    $arr = explode("/",$data);
    $dia = $arr[0];
    $mes = $arr[1];
    $ano = $arr[2];

    $val = checkdate($mes,$dia,$ano); // Verifica se a data é válida
    if($val == 1){
      $ver = date('d/m/Y', mktime(0,0,0,$mes,$dia,$ano));
    } else {
      $ver = date('d/m/Y', mktime(0,0,0,date(m),date(d),date(Y)));
    }

    $arr = explode("/",$ver);
    $dia = $arr[0];
    $mes = $arr[1];
    $ano = $arr[2];

    $ult = date("d", mktime(0,0,0,$mes+1,0,$ano));
    $dse = date("w", mktime(0,0,0,$mes,1,$ano));

    $tot = $ult+$dse;
    if($tot != 0){
      $tot = $tot+7-($tot%7);
    }

    for($i=0;$i<$tot;$i++){
      $dat = $i-$dse+1;
      if(($i >= $dse) AND ($i < ($dse+$ult))){
        $aux[$i]  = '
          <td ';

        if(($dat == date(d)) AND ($mes == date(m)) AND ($ano == date(Y))){
          $aux[$i] .= 'class="calendario_dias_hoje"';
        } else {
          $aux[$i] .= 'class="calendario_dias"';
        }

        if(($dat == date(d)) AND ($mes == date(m)) AND ($ano == date(Y))){
          $aux[$i] .= 'class="calendario_links_hoje"';
        } else {
          $aux[$i] .= 'class="calendario_links"';
        }

        $aux[$i] .= '><a href="calendario.php?data='.sprintf("%02.0f",$dat).'/'.$mes.'/'.$ano.'">'.$dat.'</a>
          </td>
        ';
      } else {
        $aux[$i] = '
          <td>
          </td>
        ';
    }

    if(($i%7) == 0){
      $aux[$i] = '<tr align="center">'.$aux[$i];
    }

    if(($i%7) == 6){
      $aux[$i] .= '</tr>';
    }
  }

  echo '
  <table cellspacing="0" cellpadding="0" class="calendario_tabela">
    <tr>
      <td>
        <table cellspacing="1" cellpadding="1">
          <tr class="calendario_mes_ano">
            <td>
  ';
  $this->mes_anterior($dia,$mes,$ano);
  echo '
            </td>
            <td colspan="5">'.$this->mes[$mes].'</td>
            <td>
  ';
  $this->mes_proximo($dia,$mes,$ano);
  echo '
</td>
          </tr>

          <tr class="calendario_mes_ano">
            <td>
  ';
  $this->ano_anterior($dia,$mes,$ano);
  echo '
            </td>
            <td colspan="5">'.$ano.'</td>
            <td>
  ';
  $this->ano_proximo($dia,$mes,$ano);
  echo '
            </td>
          </tr>

          <tr class="calendario_semana">
            <td WIDTH="30">D</td>
            <td WIDTH="30">S</td>
            <td WIDTH="30">T</td>
            <td WIDTH="30">Q</td>
            <td WIDTH="30">Q</td>
            <td WIDTH="30">S</td>
            <td WIDTH="30">S</td>
          </tr>
  ';
  echo implode(' ',$aux);
  if(count($aux) == 35){
    echo '
          <tr>
            <td colspan="7">&nbsp;</td>
          </tr>
    ';
  };
  echo '
          <tr>
            <td class="calendario_mes_ano" colspan="7" align="center">[ <a href="calendario.php?data='.date(d).'/'.date(m).'/'.date(Y).'">Hoje</a> ]</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  ';
   }
}

$teste = new calendario;
$teste->cria($_GET["data"]);
?>

Codigo do css

/* CSS Document */
.calendario_tabela{
    font-family:monospace;
    font-size:10px;
    border:1px solid #000000;
    background:#FFFFFF;
}
.calendario_dias{
    background:#FFFFFF;
    padding:2px;
}
.calendario_dias_hoje{
    background:#ff0000;
    color:#ffffff;
    padding:2px;
}
.calendario_semana{
    background:#000000;
    color:#FFFFFF;
    text-align:center;
    font-weight:bold;
}
.calendario_hoje{
    font-weight:bold;
    color:#ffffff;
}
.calendario_mes_ano{
    text-align:center;
    font-weight:bold;
    color:#666666;
}
.calendario_links{
    color:#000000;
    display:block;
    text-decoration:none;
}
.calendario_links:hover{
    text-decoration:none;
    background:#ff0000;
    color:#FF0000;
}
.calendario_links_hoje{
    color:#FF0000;
    display:block;
    text-decoration:none;
}
.calendario_links_hoje:hover{
    text-decoration:none;
    background:#000000;
    color:#ff0000;
}

a:link {
  font-family:     monospace;
  font-size:       12px;
  text-decoration: none;
  color:           #000000;
}
a:visited {
  font-family:     monospace;
  font-size:       12px;
  text-decoration: none;
  color:           #000000;
}
a:hover {
  font-family:     monospace;
  font-size:       12px;
  text-decoration: underline;
  color:           #000000;
}
a:active {
  font-family:     monospace;
  font-size:       12px;
  text-decoration: none;
  color:           #0000000;
}

até mais

Vinicius_Rodrigues · Dezembro 9, 2010

Muito obrigado, vou usar esse php que voce me passou xD

agradeço.

Entrar

[duvida] Calendario não funciona corretamente

Pergunta

Vinicius_Rodrigues

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

rickayron

Link para o comentário

Compartilhar em outros sites

Vinicius_Rodrigues

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades