2013-04-08 87 views
3

你好朋友在我的應用程序中,我真的做了一個彈出頁面,它在數據庫中插入事件,並從數據庫中獲取事件,但事件不按時間顯示數據/讀有一個數組與事件ID的事件號碼,EVENTTITLE,開始,結束陣列的&格式等如何在fullcalendar中顯示數據庫中的提取事件


[{ 「ID」: 「10」, 「標題」: 「ramukaka」, 「啓動」:「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「}]


所以我必須做的我不知道和更多現在即時嘗試更新事件,重新打開彈出式窗體與已編輯模式中的fillup &如果修改標題或在另一個日期拖放事件的更改也存儲在由事件ID(獨特的每個事件)數據庫,所以我必須做我的代碼是一樣的下面


1)如何存儲更新事件/事件在數據庫中是否存在事件修改

2)後成功插入它不是警報

3)在eventsource中如何使用fe TCH事件開始時間,結束時間,其是相同的MySQL格式( 「YYYY-MM-DD H:MM:SS」)

4)如何通過一個事件ID和改變在數據庫也做以除去一個或多個事件

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> 

回答

1

^h ELLO朋友Fullcalendar工作正常使用MySQL格式腳本

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

        }      
       ], 
3

只是一個網址只是讓在事件屬性從數據庫返回的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

我只是嘗試這樣做......我 設置上的所有功能信息,像這樣......

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! 

    }) 

}); 

就是這樣......很簡單...

希望它有助於

Nacho

相關問題