Jquery 如何在fullcalendar中随时间显示从数据库获取事件

你好，朋友在我的应用程序中，我真的做了一个弹出页面，在数据库中插入事件，也从数据库中获取事件，但事件不按时间显示数据/读取有一个事件编号数组，带有eventid、eventtitle、start、end和数组格式，如

---

[id:“10”，“title:“ramukaka”，“start:“2013-04-04 18:44:00”，“end:“2013-04-05 18:44:00”}，{“id:“11”，“title:“rameshbhai”，“start:“2013-04-11 20:28:00”，“end:“2013-04-03 20:28:00”}]

---

所以，我必须做什么我不知道，现在我正在尝试更新事件，这些事件在编辑模式下重新打开一个弹出表单，如果事件中的更改（如修改标题或在另一个日期拖放）也按eventid存储在数据库中（每个事件都是唯一的），那么我必须做的代码如下所示

---

1） 如果存在修改事件，如何在数据库中存储更新事件/事件

2） 成功插入后，它不会发出警报

3） 在eventsource中，如何获取与mysql格式相同的事件开始时间、结束时间（“yyyy-MM-dd H:MM:ss”）

4） 如何通过eventid删除一个或多个事件以及数据库中的更改

JavaSCRIPT:

<script>

    $(document).ready(function() {
        var count=0;
        var liveDate=new Date();
        var dat = new Date();
        var d = dat.getDate();
        var m = dat.getMonth();
        var y = dat.getFullYear();
        $.getJSON("<?php echo base_url(); ?>names",function(data){
            var select = $('#AgentName'); //combo/select/dropdown list
            if (select.prop) {
                var options = select.prop('options');
            }
            else {
                var options = select.attr('options');
            }
            $('option', select).remove();
            $.each(data, function(key, value){
                options[options.length] = new Option(value['name'], value['id']);
            });
        });
        var calendar = $('#calendar').fullCalendar({
           header: {
               left: 'prev,next today',
               center: 'title',
               right: 'month,agendaWeek,agendaDay'
           },
           selectable: true,
           selectHelper: true,
           select: function(start, end, allDay) {
               $("#popup").show();
               $("#eventName").focus();
               $("#submit").click(function(){
                   var title=$("#eventName").val();
                   if (title) {
                       calendar.fullCalendar('renderEvent',{
                           title: title,
                           start: start,
                           end: end,
                           allDay: false
                           },
                       true // make the event "stick"
                       );
                       var dataString={};
                       dataString['eventName']=title;
                       dataString['startTime']=$.fullCalendar.formatDate(start, "yyyy-MM-dd H:mm:ss");
                       dataString['endTime']=$.fullCalendar.formatDate(end, "yyyy-MM-dd H:mm:ss");
                       $.ajax({
                           type : 'POST',
                           dataType : 'json',
                           url : '<?php echo base_url(); ?>data/insert',
                           data: dataString,
                           success: function(data) {
                               alert("Data Insert SuccessFully");
                               if(data.success)
                                   alert("Data Insert SuccessFully");
                           }
                       });
                   }
               });
           },
           editable: true,
           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++;
               }
           },
           eventSources: [
               {
                   url: '<?php echo base_url(); ?>data/read',
                   type: 'POST',
                   id:id,
                   title:title,
                   start:new Date(start),
                   end:new Date(end),// use the `url` property
                   color: '#65a9d7',    // an option!
                   textColor: '#3c3d3d'  // an option!
                }                    
            ],
            eventClick : function (start,end){
                $("#popup").open();
                $("#submit").click(function(){
                    var title=$("#eventName").val();
                    if (title) {
                        calendar.fullCalendar('renderEvent',{
                            title: title,
                            start: start,
                            end: end,
                            allDay: false
                            },
                            true // make the event "stick"
                        );
                        var dataString={};
                        dataString['eventName']=title;
                        dataString['startTime']=$.fullCalendar.formatDate(start, "yyyy-MM-dd H:mm:ss");
                        dataString['endTime']=$.fullCalendar.formatDate(end, "yyyy-MM-dd H:mm:ss");
                        $.ajax({
                            type : 'POST',
                            dataType : 'json',
                            url : '<?php echo base_url(); ?>data/update',
                            data: dataString,
                            success: function(data) {
                                alert("Data Insert SuccessFully");
                                if(data.success)
                                    alert("Data Insert SuccessFully");
                            }
                        });
                    }
                    calendar.fullCalendar('unselect');
                    calendar.fullCalendar('refetchEvents');
                    $("#popup").hide();
                });
            }

        });
    });
</script>

$（文档）.ready（函数（）{
var计数=0；
var liveDate=新日期（）；
var dat=新日期（）；
var d=dat.getDate（）；
var m=dat.getMonth（）；
变量y=dat.getFullYear（）；
$.getJSON（“名称”，函数（数据）{
var select=$（'#AgentName'）；//组合/选择/下拉列表
如果（选择.prop）{
var options=select.prop（'options'）；
}
否则{
var options=select.attr（'options'）；
}
$（'option'，select）.remove（）；
$。每个（数据、函数（键、值）{
选项[options.length]=新选项（值['name']，值['id']）；
});
});
var calendar=$（“#calendar”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
是的，
selectHelper:对，
选择：功能（开始、结束、全天）{
$（“#弹出窗口”）.show（）；
$（“#事件名称”）.focus（）；
$（“#提交”）。单击（函数（）{
var title=$（“#事件名称”）.val（）；
如果（标题）{
日历。完整日历（'renderEvent'{
标题:标题,，
开始：开始，
完:完,，
全天：错
},
true//使事件“持续”
);
var dataString={}；
dataString['eventName']=标题；
dataString['startTime']=$.fullCalendar.formatDate（开始，“yyyy-MM-dd H:MM:ss”）；
dataString['endTime']=$.fullCalendar.formatDate（结束，“yyyy-MM-dd H:MM:ss”）；
$.ajax({
键入：“POST”，
数据类型：“json”，
url:“数据/插入”，
数据：dataString，
成功：功能（数据）{
警报（“数据插入成功”）；
if（data.success）
警报（“数据插入成功”）；
}
});
}
});
},
是的，
视图显示：功能（视图）{
if（view.name==“month”&&count==0）{
变量a=$（“.fc日数”）。前置（“”）；
计数++；
}
},
事件来源：[
{
url:“数据/读取”，
键入：“POST”，
id:id，
标题:标题,，
开始：新日期（开始），
end:newdate（end），//使用'url'属性
颜色：'#65a9d7'，//一个选项！
textColor:“#3c3d3d”//一个选项！
}                    
],
事件单击：函数（开始、结束）{
$（“#弹出窗口”）.open（）；
$（“#提交”）。单击（函数（）{
var title=$（“#事件名称”）.val（）；
如果（标题）{
日历。完整日历（'renderEvent'{
标题:标题,，
开始：开始，
完:完,，
全天：错
},
true//使事件“持续”
);
var dataString={}；
dataString['eventName']=标题；
dataString['startTime']=$.fullCalendar.formatDate（开始，“yyyy-MM-dd H:MM:ss”）；
dataString['endTime']=$.fullCalendar.formatDate（结束，“yyyy-MM-dd H:MM:ss”）；
$.ajax({
键入：“POST”，
数据类型：“json”，
url:“数据/更新”，
数据：dataString，
成功：功能（数据）{
警报（“数据插入成功”）；
if（data.success）
警报（“数据插入成功”）；
}
});
}
日历。完整日历（“取消选择”）；
日历。完整日历（“参考事件”）；
$（“#弹出”）.hide（）；
});
}
});
});

---

CSS代码：
/*
CSS CODE:
<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{
 position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    background: #000;
    display: none;
    width:100%;
    height: 100%;
    opacity:0.5;
    border:1px;
    font-size: 13px;
    padding-top: 20%;
    padding-left: 43%;
    border-color: #0033ff;
        }
        #popup table{
            border-color: #00620C;
            border-style: solid;
            border: 5px;

        }
        #popup input{
            width:80px;
            border-radius: 5px;
        } 
        #popup table label{
            font-size: 12px;
        }
</style>

HTML CODE:

<div class="wrapper">
    <div id='calendar'></div>
    <div id="detail"></div>
    <div id="popup"> 
        <form name="addData" id="addData" action="" method="post">
            <table>
                <tr>
                    <td><input type="hidden" name="eventID" id="eventID"></td>
                </tr>
                <tr>
                    <td><label for="eventName">Description : </label></td>
                    <td><input name="eventName" id="eventName"type="text"></td>
                </tr>
                <tr>
                    <td><label for="AgentName">AgentName : </label></td>
                    <td><select name="AgentName" id="AgentName"></select></td>
                </tr>
                <tr>
                    <td><label for="UserName">UserName : </label></td>
                    <td><select name="UserName" id="UserName"></select></td>
                </tr>
                <tr>
                    <td align="left"colspan="2"><button type="submit"class="k-button" name="submit" id="submit">Submit</button>
                        <button type="reset" name="reset" class="k-button" id="reset">Reset</button>
                        <button type="submit"class="k-button" name="cancel" id="cancel">Cancel</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

eventSources: [
                    {
                        url: '<?php echo base_url(); ?>data/read',
                        type: 'POST',
                        **allDayDefault:false,**
                        color: '#65a9d7',    // an option!
                        textColor: '#3c3d3d'  // an option!

                    }                    
                ],

 $('#calendar').fullCalendar({

        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: true,
        async : false,
        timeFormat: {

                        '': 'h:mm{ - h:mm}'           
                          },
        events: {
            url: "http://url/getMonthlyEventList"
            }
});

       [{"title":"event1","start":"2013-10-12 13:00:00","end":"2013-10-18 16:00:00","allDay":0},
       {"title":"event2","start":"2013-10-28 13:00:00","end":"2013-10-28 15:00:00","allDay":0}]

function data_calendario(){
    global $wpdb;
    $clientes = $wpdb->prefix . "dbt_clientes";
    $result = $wpdb->get_results("SELECT  id_room Pieza, fecha_ingr FROM  " . $clientes . " WHERE  fecha_ingr >=  '2015-08-01' AND cancelado = 0");

    foreach ($result as $rs){ 


        $pieza = $rs->Pieza;
        $fecha_ingreso = $rs->fecha_ingr;
        //$Cant_mes_ant = $rs->Cant_mes_ant;
        //$Cant_mes_ant2 = $rs->Cant_mes_ant2;

        echo "{title: '$pieza', start: '$fecha_ingreso'},";
    }
}

$(document).ready(function() {

// page is now ready, initialize the calendar...

$('#calendar').fullCalendar({
    // put your options and callbacks here

    windowResize: function(view) {
    alert('The calendar has adjusted to a window resize');
},

    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
 dayClick: function(date, allDay, jsEvent, view) {

    if (allDay) {
        // Clicked on the entire day
        $('#calendar')
            .fullCalendar('changeView', 'basicDay'/* or 'agendaDay' */)
            .fullCalendar('gotoDate',
                date.getFullYear(), date.getMonth(), date.getDate());
    }
},

    events: [

<?php data_calendario();?>  //this is where I call the data
],
color: 'yellow',   // an option!
textColor: 'black' // an option!

    })

});