Как показать события выборки из базы данных со временем в 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) В источнике событий, как получить время начала события, время окончания, которое совпадает с форматом mysql ("гггг-ММ-дд H: мм: сс")

4) как удалить событие или события по событию, а также изменения, внесенные в базу данных

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>

person Ankit Doshi    schedule 08.04.2013    source источник


Ответы (3)


просто 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}]
person Harish Lalwani    schedule 29.10.2013

Привет друзья, Fullcalendar отлично работает с форматом MySql, просто сделайте его в скрипте

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

                    }                    
                ],
person Ankit Doshi    schedule 08.04.2013

Я просто попробовал это ... Я установил всю информацию о функции, вот так ...

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!

    })

});

И все ... очень просто ...

Надеюсь, поможет

Начо

person Nacho    schedule 01.10.2015