title: Return Data with EventClick Full Calendar
body: <p>Good afternoon guys, I need a help, I'm using Fullcalendar to create a simple calendar, I can already create events save them in the DB and display them in the calendar, now what I need is that when clicking on the event a popup ( Modal) is opened displaying the data of the event and also the option to perform an update of this data, I am already with the modal working when clicking on the event it is opened what I do not know is how to display the data saved in the BD in their respective fields Here are my codes:</p>
  
  <p>Controler(calendar2.php):</p>
  
  <p>
  
  <pre><code>class Calendar2 extends CI_controller{
  
      function __construct(){
          parent:: __construct();
          $this-&gt;load-&gt;model('calendar2Model', 'model', TRUE);
      } 
  
      public function index(){
          $this-&gt;template-&gt;set('title', 'Agenda');
          $this-&gt;template-&gt;load('layout', 'calendar_v.php');
          //$this-&gt;load-&gt;view('calendar_v.php');
      }
  
      public function getEvents(){
          $data = $this-&gt;model-&gt;get_events();
          echo json_encode($data);
      }
  
      public function updateEvents(){
          $param['id'] = $this-&gt;input-&gt;post('id');
          $param['inicio'] = $this-&gt;input-&gt;post('inicio');
          $param['fim'] = $this-&gt;input-&gt;post('fim');
          $r =  $this-&gt;model-&gt;updateEvents($param);
          echo json_encode($r);
      }
  
      public function deleteEvents(){
          $id = $this-&gt;input-&gt;post('id');
          $r = $this-&gt;model-&gt;deleteEvents($id);
          echo json_encode($r);
      }
  
      public function new_event(){
  
          $this-&gt;template-&gt;set('title', 'Nova tarefa');
  
          $this-&gt;load-&gt;library('form_validation');
  
          /* Define as tags onde a mensagem de erro será exibida na página */
          $this-&gt;form_validation-&gt;set_error_delimiters('&lt;span&gt;', '&lt;/span&gt;');
  
          /* Define as regras para validação */
          $this-&gt;form_validation-&gt;set_rules('nomeEvento', 'Nome', 'required|max_length[40]');
          $this-&gt;form_validation-&gt;set_rules('inicio', 'Data de inicio', 'trim|required|max_length[60]');
          $this-&gt;form_validation-&gt;set_rules('importancia', 'Prioridade', 'trim|required|max_length[60]');
          $this-&gt;form_validation-&gt;set_rules('descricaoEvento', 'descricaoEvento', 'trim|required|max_length[150]');
  
          /* Executa a validação e caso houver erro chama a função index do controlador */
          if ($this-&gt;form_validation-&gt;run() === FALSE) {
  
              $this-&gt;template-&gt;load('layout', 'clientes_inserir.phtml');
              /* Senão, caso sucesso: */
          } else {
  
              /* Recebe os dados do formulário (visão) */
              $data['nomeEvento'] = $this-&gt;input-&gt;post('nomeEvento');
              $data['inicio'] = $this-&gt;input-&gt;post('inicio');
              $data['fim'] = date('Y-m-d', strtotime($this-&gt;input-&gt;post('inicio'). ' + 1 day'));
              $data['user'] = $this-&gt;input-&gt;post('user'); 
              $data['importancia'] = $this-&gt;input-&gt;post('importancia');   
              $data['importancia'] = $this-&gt;input-&gt;post('descricaoEvento');   
  
  
              /* Chama a função inserir do modelo */
              if ($this-&gt;model-&gt;inserir($data)) {
                  $this-&gt;session-&gt;set_flashdata('mensagem', 'registro salvo com sucesso');
                  redirect('clientes');
              } else {
                  $this-&gt;session-&gt;set_flashdata('mensagem', 'registro nao salvo');
              }
  
          }
      }
  
  }
  </code></pre>
  
  <p>Modal(calendar2model.php):</p>
  
  <pre><code>&lt;?php
  
  class calendar2Model extends CI_Model {
  
      function __construct() {
          parent::__construct();
      }
  
      public function get_events(){
          $this-&gt;db-&gt;select('idevento id,cnome title, inicio start, fim end');
          $this-&gt;db-&gt;from('eventos');
          $this-&gt;db-&gt;join('clientes','clientes.ccod = eventos.nomeEvento');
  
          return $this-&gt;db-&gt;get()-&gt;result();
  
      }   
  
      function inserir($data) {
          return $this-&gt;db-&gt;insert('eventos', $data);
      }
  
      function updateEvents($param) {
          $campos = array(
  
                  'inicio' =&gt; $param['inicio'],
                  'fim' =&gt; $param['fim']
              );
  
          $this-&gt;db-&gt;where('idevento', $param['id']);
          $this-&gt;db-&gt;update('eventos', $campos);
  
          if($this-&gt;db-&gt;affected_rows() == 1){
              return 1;
          } else{
              return 0;
              }       
          }
  
      function deleteEvents($id){
          $this-&gt;db-&gt;where('idevento', $id);
          $this-&gt;db-&gt;delete('eventos');
          if($this-&gt;db-&gt;affected_rows() == 1){
              return 1;
          } else{
              return 0;
              }       
          }
  }
  </code></pre>
  
  <p>View(calendar_v.php):</p>
  
  <pre><code>&lt;head&gt;
  &lt;div class="row" &gt;
      &lt;div class="col-sm-2"&gt;
          &lt;a data-toggle="modal" data-target="#new_event" class="btn btn-primary"&gt;Nova Tarefa&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
  
  
  $(document).ready(function() {
  
    $.post('&lt;?php echo base_url();?&gt;calendar2/getEvents', 
    function(data){
    //alert(data);
  
      $('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,basicWeek,basicDay'
        },
        defaultDate: new Date(),
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        editable: true,
        events: $.parseJSON(data),
  
        eventDrop: function(event, delta, revertFunc){
          var id = event.id;
          var fi = event.start.format();
          var ff = event.end.format();
  
          $.post("&lt;?php echo base_url();?&gt;calendar2/updateEvents",
          {
            id:id,
            inicio:fi,
            fim:ff,
          },
          function(data){
            if(data == 1){
              alert('Evento atualizado');
            }else{
              alert('Evento Nao atualizado')
            }
          });    
        },
  
        eventResize: function(event, delta, revertFunc) {
          var id = event.id;
          var fi = event.start.format();
          var ff = event.end.format();
  
          $.post("&lt;?php echo base_url();?&gt;calendar2/updateEvents",
          {
            id:id,
            inicio:fi,
            fim:ff,
          },
          function(data){
            if(data == 1){
            //alert('Evento atualizado');
          }else{
           // alert('Evento não atualizado')
          }
  
          });  
        },
  
        // eventClick: function(event,jsEvent, view){
        //   $('#calendar').fullCalendar('removeEvents',event.id);
        //  }
  
        eventRender: function(event, element){
          var el = element.html();
          element.html("&lt;div style='width:90%;float:left;'&gt;" + el + "&lt;/div&gt;&lt;div class='closeee' style='color:red; text-align:right;'&gt;X&lt;/div&gt;");
  
          element.find('.closeee').click(function(){
            if(!confirm("Excluir registro ??")){
              revertFunc();
            }else{
                  var id = event.id
                  $.post("&lt;?php echo base_url();?&gt;calendar2/deleteEvents",
                  {
                    id:id,
                  },
                  function(data){
                    if(data == 1){
                      $('#calendar').fullCalendar('deleteEvents', event.id);
                    //alert('Tarefa Excluida');
                  }else{
                   //alert('Tarefa não Excluida')
                  }
  
                  }); 
                }
            });
        },
  
        eventClick: function(event, jsEvent, view){
          $('#mtitulo').html(event.title);
          $('#autor').val(event.id);
          $('#modalEvento').modal();
        },
  
      });
    });
  });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
      &lt;div id='calendar'&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  
  
  &lt;!-- Modal visualizar--&gt;
  
  &lt;div class="modal fade" id="modalEvento" tabindex="-1" role="dialog" aria-labelledby="mymodelLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header bg-red"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
        &lt;h4 class="modal-title" id="mymodelLabel"&gt; Editar Evento&lt;/h4&gt;
      &lt;/div&gt;
  
      &lt;div class="modal-body"&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="form-group col-md-6"&gt;
              &lt;label for="nomeEvento"&gt;Nome Cliente&lt;/label&gt; 
            &lt;div class="form-control" id="mtitulo"&gt;&lt;/div&gt;
          &lt;/div&gt;  
  
          &lt;div class="form-group col-md-6"&gt;
            &lt;label for="user"&gt;Responsavel&lt;/label&gt; 
            &lt;div class="form-control" id="autor"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt; 
  
        &lt;div class="row"&gt; 
          &lt;div class="form-group col-md-6"&gt;
            &lt;div class="input-group date"&gt;
              &lt;input type="text" class="form-control date" id="inicio" name="inicio"/&gt;
              &lt;div class="input-group-addon"&gt;
                &lt;span class="glyphicon glyphicon-th"&gt;&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group col-md-6"&gt;
              &lt;label for="importancia"&gt;Prioridade&lt;/label&gt; 
              &lt;input type="text" class="form-control" id="importancia" name="importancia"/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
         &lt;div class="row"&gt; 
          &lt;div class="form-group col-md-12"&gt;
            &lt;label for="descricaoEvento"&gt;Descrição&lt;/label&gt; 
            &lt;input type="text" class="form-control" id="descricaoEvento" name="descricaoEvento"/&gt;
          &lt;/div&gt; 
         &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" id="closeM" data-dismiss="modal"&gt;Cancelar&lt;/button&gt;
        &lt;button type="button" class="btn btn-danger" id="btnGuardar"&gt;Guardar&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.modal --&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/V9ZT5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V9ZT5.png" alt="enter image description here"></a></p>