Calendario Javascript

Asked

Viewed 3,970 times

2

I am seeing a Javascript calendar. I want to show every month of the year. My problem is that the first month works well, but the rest don’t stay on the right days. Step by parameter the number of each month that is in the array. 

    function calendar(mois){

        var date = new Date();
        var day = date.getDate();
        var month = date.getMonth();
        var year = date.getYear();

        if(year<=200)
        {
                year += 1900;
        }
        months = new Array('Janvier', 'F&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;cembre');
        days_in_month = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

        var moisaujorduiu = month;

        month = mois;

        //ano bissesto, muda dia fevereiro
        if(year%4 == 0 && year!=1900)
        {
                days_in_month[1]=29;
        }


        total = days_in_month[month]; //days month

        var date_today = day+' '+months[month]+' '+year;//22 ouctober 2014

        beg_j = date; //today date

        beg_j.setDate(1);


        if(beg_j.getDate()==2) //1
        {
                beg_j=setDate(0);
        }
        beg_j = beg_j.getDay();

        document.write('<table class="cal_calendar"><tr><th colspan="7">'+months[mois]+' '+year+'</th></tr><br>');
        document.write('<tr class="cal_d_weeks"><th>Dim</th><th>Lun</th><th>Mar</th><th>Mer</th><th>Jeu</th><th>Ven</th><th>Sam</th></tr><tr>'); 
        week = 0;

        for(i=1;i<=beg_j;i++)
        {
                var beforemonth = months[month-1]; 

               document.write('<td><div class ="divday" />'+(days_in_month[month-1]-beg_j+i)+'</div></td>');
                week++;
        }
        for(i=1;i<=total;i++)
        {
                if(week==0)
                {
                    document.write("<tr>");
                }

                if(day==i && moisaujorduiu==month) //si le jour = le jour de aujordhui est si le mois = mois aujordui 
                {

                    document.write("<td><b><div class ='divtoday' onclick='open_popup(\""+i+" "+months[month]+"\")' href='#'>"+i+"</div><b></td>"); //day of today
                }
                //les autre jours
                else
                {

                    document.write("<td><div class ='divday' onclick='open_popup(\""+i+" "+months[month]+"\")' href='#'>"+i+"</div></td>");
                }
                week++;
                if(week==7)
                {
                        document.write('</tr>');
                        week=0;
                }
        }

            //pour les jour du prochain mois

             for(i=1;week!=0;i++)
            {
                    var nextmonth = months[month+1];
                    document.write('<td><div class ="divday">'+i+'</td>');
                    week++;
                    if(week==7)
                    {
                            document.write('</tr>');
                            week=0;
                    }
            }
        document.write('</table>');

Then I create a table, for each month in a cell and call the function with parameter.

<table border=0 width=100% height=100%>
        <tr>
            <td>
                    <script type="text/javascript">
                        var mois = 0; //janvier
                        calendar(mois);
                    </script>
            </td>
            <td>
                <script type="text/javascript">
                    var mois = 1; //fevrier
                calendar(mois);
                </script>
            </td>
            <td>
                <script type="text/javascript">
                    var mois = 2; //mars
                    calendar(mois);
                </script>
            </td>
            <td>
                <script type="text/javascript">
                    var mois = 3; //avril
                    calendar(mois);
                </script>
            </td>
        </tr>
        <tr>
            <td>    
                <script type="text/javascript">
                    var mois = 4; 
                    calendar(mois);
                </script>
            </td>
            <td>
                <script type="text/javascript">
                    var mois = 5; 
                    calendar(mois);
                </script>
            </td>
            <td>    
                <script type="text/javascript">
                    var mois = 6; 
                    calendar(mois);
                </script>
            </td>
            <td>    
                <script type="text/javascript">
                    var mois = 7; 
                    calendar(mois);
                </script>
            </td>
        </tr>
        <tr>
            <td>    
                <script type="text/javascript">
                    var mois = 8; 
                    calendar(mois);
                </script>
            </td>
            <td>    
                <script type="text/javascript">
                    var mois = 9; 
                    calendar(mois);
                </script>
            </td>
            <td>    
                <script type="text/javascript">
                    var mois = 10; 
                    calendar(mois);
                </script>
            </td>
            <td>    
                <script type="text/javascript">
                    var mois = 11; 
                    calendar(mois);
                </script>
            </td>
        </tr>   
    </table>
javascript html

1 answer

5


Hello, it’s simple your problem. You are always assigning a day in the variable 

beg_j = date; //today date
beg_j.setDate(1); //<--- passando um único dia

Being that you should spend the total of days you’ve had adding up every month

I made the following adjustment:

if(month > 0) { 
    soma = 0;
    for(var m=0; m<month; m++) {
        soma += days_in_month[m];
    }
    beg_j.setDate(soma+1);
}
else {
    beg_j.setDate(1);
}

Test and see if it works. I hope I’ve helped

Follow the Updated Javascript function:

function calendar(mois){

    var date = new Date();
    var day = date.getDate();
    var month = date.getMonth();
    var year = date.getYear();

    if(year<=200)
    {
            year += 1900;
    }
    months = new Array('Janvier', 'F&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;cembre');
    days_in_month = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

    var moisaujorduiu = month;

    month = mois;

    //ano bissesto, muda dia fevereiro
    if(year%4 == 0 && year!=1900)
    {
            days_in_month[1]=29;
    }


    total = days_in_month[month]; //days month

    var date_today = day+' '+months[month]+' '+year;//22 ouctober 2014

    beg_j = date; //today date

    if(month > 0) { 
        soma = 0;
        for(var m=0; m<month; m++) {
            soma += days_in_month[m];
        }
        beg_j.setDate(soma+1);
    }
    else {
        beg_j.setDate(1);
    }


    if(beg_j.getDate()==2) //1
    {
            beg_j=setDate(0);
    }
    beg_j = beg_j.getDay();

    document.write('<table class="cal_calendar"><tr><th colspan="7">'+months[mois]+' '+year+'</th></tr><br>');
    document.write('<tr class="cal_d_weeks"><th>Dim</th><th>Lun</th><th>Mar</th><th>Mer</th><th>Jeu</th><th>Ven</th><th>Sam</th></tr><tr>'); 
    week = 0;

    for(i=1;i<=beg_j;i++)
    {
            var beforemonth = months[month-1]; 

           document.write('<td><div class ="divday" />'+(days_in_month[month-1]-beg_j+i)+'</div></td>');
            week++;
    }
    for(i=1;i<=total;i++)
    {
            if(week==0)
            {
                document.write("<tr>");
            }

            if(day==i && moisaujorduiu==month) //si le jour = le jour de aujordhui est si le mois = mois aujordui 
            {

                document.write("<td><b><div class ='divtoday' onclick='open_popup(\""+i+" "+months[month]+"\")' href='#'>"+i+"</div><b></td>"); //day of today
            }
            //les autre jours
            else
            {

                document.write("<td><div class ='divday' onclick='open_popup(\""+i+" "+months[month]+"\")' href='#'>"+i+"</div></td>");
            }
            week++;
            if(week==7)
            {
                    document.write('</tr>');
                    week=0;
            }
    }

        //pour les jour du prochain mois

         for(i=1;week!=0;i++)
        {
                var nextmonth = months[month+1];
                document.write('<td><div class ="divday">'+i+'</td>');
                week++;
                if(week==7)
                {
                        document.write('</tr>');
                        week=0;
                }
        }
    document.write('</table>');
}

  • Enjoy and simplify your HTML, use the value of months directly, e.g., Calendar(1); rather than creating an unnecessary variable.

  • I used your code like http://jsfiddle.net/L6qwmbqz/2/ but it doesn’t work. Yes I simplified the html code, it’s better this way.

  • You just switched one line for IF right?? I edited my answer with the whole function, change it for your and test. I tested it here and it’s all right.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.