title: How To show fetch events from database with time in fullcalendar
body: <p>Hello Friends In my Application I really Make a Popup Page which Inserts Events in database and also fetch events from database but events not show as per time  Data/read have an array of numbers of events with eventid,eventtitle,start,end &amp; format of array like </p>
  
  <hr>
  
  <p>[{"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"}]</p>
  
  <hr>
  
  <p>so what i have to do i don't know and more  Now i m try to Update events which reopen a popup form with already fillup in edit mode &amp; if changes in events like modify title or drag and drop on another date also store in database by eventid(unique for each events) so what i have to do my Code is same as Below </p>
  
  <hr>
  
  <p>1) How to store Update events/event in database if exist events modify</p>
  
  <p>2) after successfully insertion it is not alert</p>
  
  <p>3) In eventsource how to fetch event starttime,endtime which is same as mysql format("yyyy-MM-dd H:mm:ss")</p>
  
  <p>4) how to remove event or events by a eventid and changes also done in database</p>
  
  <p>JavaSCRIPT:</p>
  
  <pre><code>&lt;script&gt;
  
      $(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("&lt;?php echo base_url(); ?&gt;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 : '&lt;?php echo base_url(); ?&gt;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" &amp;&amp; count==0){
                     var a=$(".fc-day-number").prepend("&lt;img src='/assets/images/add.jpg' width='20' height='20'style='margin-right:80px;' name='date'&gt;");                                    
                     count++;
                 }
             },
             eventSources: [
                 {
                     url: '&lt;?php echo base_url(); ?&gt;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 : '&lt;?php echo base_url(); ?&gt;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();
                  });
              }
  
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>CSS CODE:
  &lt;style&gt;
  /*
  */      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;
          }
  &lt;/style&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>HTML CODE:
  
  &lt;div class="wrapper"&gt;
      &lt;div id='calendar'&gt;&lt;/div&gt;
      &lt;div id="detail"&gt;&lt;/div&gt;
      &lt;div id="popup"&gt; 
          &lt;form name="addData" id="addData" action="" method="post"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input type="hidden" name="eventID" id="eventID"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;label for="eventName"&gt;Description : &lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input name="eventName" id="eventName"type="text"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;label for="AgentName"&gt;AgentName : &lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;select name="AgentName" id="AgentName"&gt;&lt;/select&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;label for="UserName"&gt;UserName : &lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;select name="UserName" id="UserName"&gt;&lt;/select&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="left"colspan="2"&gt;&lt;button type="submit"class="k-button" name="submit" id="submit"&gt;Submit&lt;/button&gt;
                          &lt;button type="reset" name="reset" class="k-button" id="reset"&gt;Reset&lt;/button&gt;
                          &lt;button type="submit"class="k-button" name="cancel" id="cancel"&gt;Cancel&lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>