当我切换到下个月时,我的日历应用程序会跳几个月

时间:2016-02-25 11:18:41

标签: javascript calendar

嘿,有些人是javascript和jquery的新手但是对于一个项目,我需要创建一个基于web的日历,显示当前月份,启用月份切换并显示月份的正确日期,我的问题是我不断得到一个我无法理解的错误,我已经尝试多次更改代码但没有任何作用...请协助ps我当前的功能只能切换到当前年度的任何协助,切换到明年之后,即从2016年12月到2017年1月或上一年即2016年1月至2015年12月,这里是我的代码

    <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script type='text/javascript' src='/my project2/assets/javascript/jquery/jquery.js'></script>
        <style type="text/css">
            #calendar-container{
            padding:10px;
            width:832px;
            height:415px;
            text-align:center;
            border-radius:3px;
            border:1px solid #e1e1e1;
            font-size:16px;
            font-family:arial;
            min-width:832px;
            }
            #prev{
            float:left;
            }
            #next{
            float:right;
            }
            #calendar-container>div{
            padding:0;
            margin-bottom:10px; 
            }
            #calendar-month-year{
            margin:5px;
            }
            #calendar-dates > table > tr > td{
            padding:20px;
            border:1px solid #e1e1e1;               
            }
            #events{
            font-size: 14px;
            position: relative;
            top: -14px;
            left: -15px;
            border-radius:5px;  
            color:#00868b;  
            font-size:15px;         
            }
            a{
            padding:20px;
            text-decoration:none;
            }
            table{
            border:1px solid #eee;
            width:832px;
            }
            #today{
            background-color: red;
            margin: 0;
            padding: 20px;
            border-radius: 30px;
            }
        </style>
        <script type="text/javascript">
            $(function(){          
                var d=new Date();
                var month=d.getMonth();
                var year=d.getFullYear(); //2014
                var daysinMonth=daysInMonth(month, year);
                var calendar="";
                $("#calendar").click(function(){
                    $("#calendar-container").addClass("active");
                    $("#calendar").html("close calendar");
                    calendarGenerator();
                });
                $("#prev").click(function(prevMonth){
                    prevMonth=month-1;
                    $("table").remove();
                    calendarGenerator(prevMonth);
                });
                $("#next").click(function(nextMonth){
                    nextMonth=month+1;
                    $("table").remove();
                    calendarGenerator(nextMonth);
                });

            function daysInMonth(month, year){
                //added the one so it would pick february, apparently here 1-jan 2-feb not 0-jan and 1-feb
                return new Date(year, month+1, 0).getDate();
            }
            function calendarGenerator(nextMonth){    
                var monthName=["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                var today=d.getDate();
                daysToEndMonth=daysinMonth-today;
                if(nextMonth==null){
                    month=month; //0-11
                }else{
                    month=nextMonth;
                }
                var firstDate=monthName[month]+" "+1+" "+year;//September 1 2014
                var tmp=new Date(firstDate).toDateString();//Mon Sep 01 2014...
                var firstDay=tmp.substring(0, 3); //Mon
                var dayName=["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
                var dayNo=dayName.indexOf(firstDay);//1
                var days=new Date(year, month+1, 0).getDate();//30 //Tue Sep 30 2014... 
                var calendar=getCalendar(dayNo, days, today);
                document.getElementById("calendar-month-year").innerHTML=monthName[month]+" "+year; 
                document.getElementById("calendar-dates").appendChild(calendar);                
            }
            //document.getElementById("calendar-dates").innerHTML=calendar;
            function getCalendar(dayNo, days, today){
                var table=document.createElement("table");
                var tr=document.createElement("tr");
                //row for the day letters
                for(var c=0; c<=6; c++){
                    var td=document.createElement("td");
                    td.innerHTML='SMTWTFS'[c];
                    tr.appendChild(td);
                }
                table.appendChild(tr);
                //create 2nd row
                tr=document.createElement("tr");
                var c;
                for(c=0; c<=6; c++){
                    if(c==dayNo){
                        break;
                    }
                var td=document.createElement("td");
                td.innerHTML="";
                tr.appendChild(td);
                }
                var count=1;
                for(; c<=6; c++){
                    var td=document.createElement("td");
                    td.innerHTML="<a href='#' class='days'><span id='events'>"+6+"</span>"+count+"</a>";
                    count++;
                    if(count==today+1){
                        td.innerHTML="<a href='#' id='today' class='days' style=''><span id='events'></span>"+(count-1)+"</a>";
                    }
                    tr.appendChild(td); 
                }
                table.appendChild(tr);
                //rest of the daterows
                for(var r=3; r<=6; r++){
                    tr=document.createElement("tr");
                    for(var c=0; c<=6; c++){
                        if(count>days){
                        table.appendChild(tr);
                        return table
                    }
                    if(count==today+1){
                        td.innerHTML="<a href='#' id='today' class='days'><span id='events'></span>"+(count-1)+"</a>";
                    }
                    var td=document.createElement("td");
                    td.innerHTML="<a href='#' class='days'><span id='events'>"+14+"</span>"+count+"</a>";
                    count++;
                    tr.appendChild(td);
                    }
                    table.appendChild(tr);
                }
            }
    });

            </script>
    </head>
    <body>
        <button id='calendar'>open calendar</button><br/>
        <div id="calendar-container" class="inactive">
            <div id="calendar-header">
                <span id="calendar-month-year"></span>
                <button id="prev">prev</button>
                <button id="next">next</button>
            </div>
            <span id="calendar-dates"></span>
        </div>      
    </body>
</html>

0 个答案:

没有答案
相关问题