Question

由于我是新手，我尝试使用JavaScript和JQuery创建一个简单的日历，而不使用任何插件。我试图尝试;

使用dataArray
生成随机日期（即Calendar.Generate（数据））并比较，

a）如果它们与当月的日期匹配，则添加为新事件

b）如果他们不匹配则显示错误消息

但到现在为止，我无法管理它。任何帮助，将不胜感激。谢谢..

<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<style type="text/css">
    #cal-container{
        padding: 10px;
        width: 950px;
        height:%100;
        text-align: center;
        border: 1px solid #00F;
        border-radius: 10px;
        font-size: 16px;
        font-family: Arial;
        background-color: #ccc;
    }

    #cal-container > div{
        padding: 5px 45px;
        margin-bottom: 10px;
    }

    #cal-month-year{
        margin: 5px;
        font-size:25px;
        font-weight:bold;
    }

    #cal-dates>table>tr>td{
        padding: 30px;
        border: 1px solid #000;
        width:100px;
    }
</style>

</head>

<body>
  <div id="cal-container">
        <div id="cal-header">
            <span id="cal-month-year"></span>
        </div>

        <div id="cal-dates">
        </div>
  </div>

  <script>
        window.onload = function simpleCalendar(){
            var time = new Date();
            var month_name = ['January','February','March','April','May','June','July','August','September','October','November','December'];
            var month = time.getMonth();                    
            var year = time.getFullYear();                  
            var first_date = month_name[month] + " " + 1 + " " + year;  
            var foo = new Date(first_date).toDateString();          
            var first_day = foo.substring(0, 3);                    
            var day_name = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
            var day_number = day_name.indexOf(first_day);               
            var days = new Date(year, month+1, 0).getDate();    

            var calendar = get_calendar(day_number, days);
            document.getElementById("cal-month-year").innerHTML = month_name[month]+" "+year;
            document.getElementById("cal-dates").appendChild(calendar);
        }

        function get_calendar(day_number, days){
            var table = document.createElement('table');    
            var tr = document.createElement('tr');      

            //first row 
            for(var col=0; col<=6; col++){
                var td = document.createElement('td');
                var gun = ['Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday', 'Sunday']
                td.innerHTML = gun[col];
                tr.appendChild(td);
            }
            table.appendChild(tr);


            //Second row


            tr = document.createElement('tr');
            var col;
            for(col=0; col<=6; col++){
                if(col == day_number){
                    break;
                }
                var td = document.createElement('td');
                td.innerHTML = "";
                tr.appendChild(td);
            }


            var count = 1;      
            for(; col<=6; col++){
                var td = document.createElement('td');
                td.innerHTML = count;
                count++;
                tr.appendChild(td);
            }
            table.appendChild(tr); 


            //other rows 
            for(var row=3; row<=7; row++){
                tr = document.createElement('tr');
                for(var col=0; col<=6; col++){
                    if(count > days){
                        table.appendChild(tr);
                        return table;
                    }
                    var td = document.createElement('td');
                    td.innerHTML = count;
                    count++;
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
            return table;


            var dataArray = [   
                    {"title":"Party",   "startdate":"2016/09/05"},
                    {"title":"Workshop JS", "startdate":"2016/09/15","enddate":"2016/09/18"},
                    {"title":"Math Quiz",   "startdate":"2016/09/23"},
                    {"title":"Code Camp",   "startdate":"2016/09/22","enddate":"2016/09/25"}
            ];

            for(var row=0; row<=6; row++){
                for(var col=0; col<=6; col++){          
                    for (var k=0; k<=dataArray.length; k++){
                        if(table[row][col] == dataArray[k].startdate){          
                            table[row][col].appendChild(dataArray[k].title);                        
                        }
                    }
                }
            }
            return table;           
        }

    </script>
 </body>

使用JavaScript和JQuery的简单日历，无需使用任何插件

0 个答案: