4

你好朋友在我的应用程序中,我真的制作了一个弹出页面,它在数据库中插入事件并从数据库中获取事件,但事件没有按时间显示数据/读取有一系列事件,事件 ID、事件标题、开始、结束和格式为像数组一样


[{"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)在事件源中如何获取事件开始时间,结束时间与mysql格式相同(“yyyy-MM-dd H:mm:ss”)

4)如何通过 eventid 删除一个或多个事件,以及在数据库中完成的更改

Java脚本:

<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>

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>
4

3 回答 3

4

只是事件属性的 url 从数据库返回 Json 数据。

 $('#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"
            }
});

并且 json 数据可以采用这种格式。和我一起工作得很好。

       [{"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}]
于 2013-10-29T06:38:14.197 回答
2

你好朋友 Fullcalendar 使用 MySql 格式工作正常,只需在脚本中制作

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

                    }                    
                ],
于 2013-04-08T10:54:11.200 回答
1

我刚试过这个......我在一个函数上设置了所有信息,就像这样......

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!

    })

});

就是这样……真的很简单……

希望能帮助到你

纳乔

于 2015-10-01T16:41:38.793 回答