my calendar is repeated when you give prev or next

1

I'm doing a calendar in jQuery. How could I do it so that the tbody does not repeat itself? I still do not have the conditions for the years but it is the least. Thank you in advance.

      $(function(){

        var weekday= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
        var months = ["January","February","March","April","May", "June", "July","August","September","October","November","December"];
        var d = new Date();
        var day = d.getDate();
        var month = d.getMonth();
        var year = d.getFullYear();


        function days(month,year) {
          //last day of month
          var lastDay = new Date(year,month + 1, 0).getDate();

          //first day of month
          var a = new Date("1 ,"+months[month]+","+year+"");

          //month string
          $("#date").html(months[month]+" "+year);

          var counter = 0;
          $("#days").append("<tr>");
            for(var i = 1; i < lastDay+1;i++,counter++){

              //blank space
              if(i == 1){
                for(var j = 0; j < a.getDay();j++,counter++){
                  $("#days").append("<td></td>");
                }
              }

              //new week
              if(counter%7 == 0){
                $("#days").append("</tr><tr>");
              }

              //display days
              $("#days").append("<td><a href='?d="+i+"&m="+month+"&y="+year+"'>"+i+"</a></td>");
            }

        };

        days(month,year);

        //left click
        $("#prev").on("click",function(){
          month--;
          days(month,year);
        });

        //right click
        $("#next").on("click",function(){
          month++;
          days(month,year);
        });

      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
      <tr>
        <td class="btn" id="prev">&lang;</td>
        <td id="date" colspan="5"></td>
        <td class="btn" id="next">&rang;</td>
      </tr>
      <tr>
        <td>SUN</td>
        <td>MON</td>
        <td>TUE</td>
        <td>WEN</td>
        <td>THU</td>
        <td>FRI</td>
        <td>SAT</td>
      </tr>
      <tbody id="days"></tbody>
    </table>
    
asked by Cristian Hernandez 12.06.2017 в 19:05
source

1 answer

0

A small error in append in days you should only change it to html I recommend you read a bit of documentation so you can know where apply it each of these.

HERE A REFERENCE

    $(function(){

        var weekday= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
        var months = ["January","February","March","April","May", "June", "July","August","September","October","November","December"];
        var d = new Date();
        var day = d.getDate();
        var month = d.getMonth();
        var year = d.getFullYear();


        function days(month,year) {
          //last day of month
          var lastDay = new Date(year,month + 1, 0).getDate();

          //first day of month
          var a = new Date("1 ,"+months[month]+","+year+"");

          //month string
          $("#date").html(months[month]+" "+year);

          var counter = 0;
          $("#days").html("<tr>");
            for(var i = 1; i < lastDay+1;i++,counter++){

              //blank space
              if(i == 1){
                for(var j = 0; j < a.getDay();j++,counter++){
                  $("#days").append("<td></td>");
                }
              }

              //new week
              if(counter%7 == 0){
                $("#days").append("</tr><tr>");
              }

              //display days
              $("#days").append("<td><a href='?d="+i+"&m="+month+"&y="+year+"'>"+i+"</a></td>");
            }

        };

        days(month,year);

        //left click
        $("#prev").on("click",function(){
          month--;
          days(month,year);
        });

        //right click
        $("#next").on("click",function(){
          month++;
          days(month,year);
        });

      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
      <tr>
        <td class="btn" id="prev">&lang;</td>
        <td id="date" colspan="5"></td>
        <td class="btn" id="next">&rang;</td>
      </tr>
      <tr>
        <td>SUN</td>
        <td>MON</td>
        <td>TUE</td>
        <td>WEN</td>
        <td>THU</td>
        <td>FRI</td>
        <td>SAT</td>
      </tr>
      <tbody id="days"></tbody>
    </table>
    
answered by 12.06.2017 / 19:14
source