如何使用完整日历中的json在每个日期添加，更新，删除新数据

Question

我是“ Fullcalendar ”的新用户，所以我不知道如何在“弹出页面”上添加/修改/删除事件，其中包含三个字段，如描述（事件描述），开始时间和结束时间。也开始timecurrenttime所以请帮助我，如果你有解决方案。我没有更多的知识，所以建议和建议都是可接受的

脚本代码：

    <script type='text/javascript'>

        $(document).ready(function() {  
                var count=0;
            /* initialize the calendar
            -----------------------------------------------------------------*/

            $('#calendar').fullCalendar({
                header: {

                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                     viewDisplay: function(view) {
                                if(view.name=="month" && count==0){
                                        var a=$(".fc-day-number").prepend("<img src='/assets/images/add.jpg' width='20' height='20'style='margin-right:80px;' name='date'>");                                    
                                        count++;
                                    }
                                if(view.name=="agendaDay" || view.name=="agendaWeek"){
                                    $("#popup").hide();
                                    count++;
                                }

                            },
                        slotMinutes:5,
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar !!!
                            eventClick : function (calEvent, jsEvent, view){
                    console.log(calEvent);
                },
                dayClick : function (date, allDay, jsEvent, view){
                    console.log(jsEvent);   
                    $('#popup').show();
                    $('#popup').css({left : jsEvent.clientX, top : jsEvent.clientY});
    //                                    function viewDetail(date,allDay,jsEvent,view)
    //                                    {
    //                                      
    //                                    }
    //                                if(view.name=="agendaWeek" || view.name=="agendaDay"){
    //                                    $('#popup1').show();
    //                                    $('#popup1').css({left: jsEvent.clientX, top : jsEvent.clientY});
    //                                }
                }


        });
    });
    </script>

---

Css代码：

    <style>
    /*
    */      body {
            text-align: left;
            font-size: 14px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            }
        #calendar {
            width: 70%;
            margin: 0 auto;
                    text-align:left;
            }
        #popup{
            height: auto;
            width: 30%;
            position: absolute;
            background-color: white;
                    border-color: #0033ff;
                    border-style: solid;
        }
            #popup input{
                width:90%;
            } 
            #popup table label{
                font-size: 100px;
            }
            #startTime{
                background-image: url('/assets/images/calendar.png');
                background-position:right center;
                background-repeat:no-repeat;
            }
            #endTime{
                background-image: url('/assets/images/calendar.png');
                background-position:right center;
                background-repeat:no-repeat;
            }
    </style>

---

Html代码：

    <div class="wrapper">
    <div id='calendar'></div>
    <div id="popup" style="display:none"> 
        <table>
            <tr>
                <td><lable for="eventName">Description:</lable></td>
                <td><input name="eventName" id="eventName"></td>
                </tr>
                <tr>
                    <td><lable for="startTime">Start: </td>
                    <td><input type="text" id="startTime"/></td>
                </tr>
                <tr>
                    <td><lable for="endTime">End: </td>
                    <td><input type="text" id="endTime"/></td>
                  </tr>
                  <tr>
                      <td align="left"colspan="2"><button type="submit"class="k-button" name="submit" id="submit">Submit</button>//THis Not WOrking i do not know why
                 <button type="reset" name="reset" value="Reset" class="k-button" id="reset">Reset</button>//THis Not WOrking i do not know why
                         </td>
                      </tr>
            </table>

  <script>

        $('#startTime').click(
                function(e) {
                    var a="";
                        $('#startTime').AnyTime_noPicker().AnyTime_picker().focus();
                        e.preventDefault();
                        var a=$('#startTime').val("");

                });

        $('#endTime').click(
                function(e) {
                    $('#endTime').AnyTime_noPicker().AnyTime_picker().focus();
                    e.preventDefault();
                });          
  </script>
    </div>
</div>