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

时间:2013-04-08 07:49:20

标签: jquery fullcalendar

Hello Friends在我的应用程序中我真的创建了一个弹出页面,它在数据库中插入事件并从数据库中获取事件但事件未按时显示数据/读取具有偶数,事件标题,开始,结束的事件数量的数组&安培;数组的格式如


[{“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二十时28分00" 秒}]


所以我必须做的事情我不知道更多现在我尝试更新重新打开弹出窗体的事件,并且已经在编辑模式中加载了&如果修改标题或拖放到其他日期等事件的更改也会通过eventid存储在数据库中(每个事件都是唯一的)所以我需要做的代码与下面相同


1)如果存在事件修改

,如何在数据库中存储更新事件/事件

2)成功插入后,它不是警报

3)在eventsource中如何获取事件启动时间,endtime与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>

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>

3 个答案:

答案 0 :(得分:3)

只是一个url at events属性从数据库返回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}]

答案 1 :(得分:2)

Hello Friends Fullcalendar在MySql格式中运行良好只需在脚本中生成

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

                    }                    
                ],

答案 2 :(得分: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'},";
    }
}

之后,我只是像这样调用fullcalendar中的数据......

$(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!

    })

});

就是这样......非常简单......

希望有所帮助

纳乔