Editing Fields in Event Modal with FullCalendar + Javascript

Question

Editing Fields in Event Modal with FullCalendar + Javascript

Navigation

#1 by (0 votes)

1

Good afternoon, I'm creating a simple calendar using the FullCalendar plugin, I'm almost ready, but now I need to click on the desired event to display the information of the event and the option to update the image below you can see how it is currently:

Nowfollowmycodesuptothispoint,however,noticethatIhavealreadydefinedthebuttontoupdatethemethodthatshouldbeused,butevensowhenclicking,itisnotarrivingatthismethod.WhatIneedistofindouthowinadditiontodisplayingtheoriginaleventdata,givetheusertheabilitytochangethemandsaveitinthedatabase.

View:

<head><divclass="row" >
    <div class="col-sm-2">
        <a data-toggle="modal" data-target="#new_event" class="btn btn-primary">Nova Tarefa</a>
    </div>
</div>


<script>



$(document).ready(function() {

  $.post('<?php echo base_url();?>calendar2/getEvents', 
  function(data){
  alert(data);

    $('#calendar').fullCalendar({
      locale: 'pt-br',
      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("<?php echo base_url();?>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("<?php echo base_url();?>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,data){
        var el = element.html();
        element.html("<div style='width:90%;float:left;'>" + el + "</div><div class='closeee' style='color:red; text-align:right;'>X</div>");

        element.find('.closeee').click(function(){
          if(!confirm("Excluir registro ??")){
            revertFunc();
          }else{
                var id = event.id
                $.post("<?php echo base_url();?>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').html(event.autor);
        $('#inicioEdit').val(event.start);
        $('#importanciaEdit').val(event.impor);
        $('#descricaoEventoEdit').val(event.text);
        $('#modalEvento').modal();
      },

    });
  });
});

</script>

</head>


<body>

    <div id='calendar'></div>

</body>


<!-- Modal visualizar-->

<div class="modal fade" id="modalEvento" tabindex="-1" role="dialog" aria-labelledby="mymodelLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header bg-red">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="mymodelLabel"> Editar Evento</h4>
    </div>

    <div class="modal-body">

      <div class="row">
        <div class="form-group col-md-6">
            <label for="nomeEvento">Nome Cliente</label> 
          <div class="form-control" id="mtitulo"></div>
        </div>  

        <div class="form-group col-md-6">
          <label for="user">Responsavel</label> 
          <div class="form-control" id="autor"></div>
        </div>
      </div> 

      <div class="row"> 
        <div class="form-group col-md-6">
          <div class="input-group date">
            <input type="text" class="form-control date" id="inicioEdit" />
            <div class="input-group-addon">
              <span class="glyphicon glyphicon-th"></span>
            </div>
          </div>
        </div>

        <div class="form-group col-md-6">
            <label for="importancia">Prioridade</label> 
            <input type="text" class="form-control" id="importanciaEdit" />
        </div>
      </div>

       <div class="row"> 
        <div class="form-group col-md-12">
          <label for="descricaoEvento">Descrição</label> 
          <input type="text" class="form-control" id="descricaoEventoEdit" />
        </div> 
       </div>

    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-default" id="closeM" data-dismiss="modal">Cancelar</button>
      <input href="http://localhost/sistema/calendar2/updateEvents2"  type="submit" class="btn btn-primary" name="btsalvar" value="Atualizar" />
    </div>
    </div>
  </div>
</div>
<!-- /.modal -->

Controller:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Calendar2 extends CI_controller{

    function __construct(){
        parent:: __construct();
        $this->load->model('calendar2Model', 'model', TRUE);
    } 

    public function index(){
        $this->template->set('title', 'Agenda');
        $this->template->load('layout', 'calendar_v.php');
        //$this->load->view('calendar_v.php');
    }

    public function getEvents(){
        $data = $this->model->get_events();
        echo json_encode($data);
    }

    public function updateEvents(){
        $param['id'] = $this->input->post('id');
        $param['inicio'] = $this->input->post('inicio');
        $param['fim'] = $this->input->post('fim');
        $r =  $this->model->updateEvents($param);
        echo json_encode($r);
    }

    public function updateEvents2(){
        die('');
    }

    public function deleteEvents(){
        $id = $this->input->post('id');
        $r = $this->model->deleteEvents($id);
        echo json_encode($r);
    }

Modal:

<?php

class calendar2Model extends CI_Model {

    function __construct() {
        parent::__construct();
    }

    public function get_events(){
        $this->db->select('idevento id, inicio start, fim end,descricaoEvento text, user autor,importancia impor ,cnome title');
        $this->db->from('eventos');
        $this->db->join('clientes','clientes.ccod = eventos.nomeEvento');
        return $this->db->get()->result();

    }   

    function inserir($data) {
        return $this->db->insert('eventos', $data);
    }

    function updateEvents($param) {
        $campos = array(
                'inicio' => $param['inicio'],
                'fim' => $param['fim']
            );

        $this->db->where('idevento', $param['id']);
        $this->db->update('eventos', $campos);

        if($this->db->affected_rows() == 1){
            return 1;
        } else{
            return 0;
            }       
        }

    function deleteEvents($id){
        $this->db->where('idevento', $id);
        $this->db->delete('eventos');
        if($this->db->affected_rows() == 1){
            return 1;
        } else{
            return 0;
            }       
        }
}

javascript fullcalendar codeigniter

asked by anonymous 06.06.2017 / 19:56

1 answer

Configure dns Bind9 Debian [closed] know how much a process is consuming from i / o disk

score 0 · Answer 1

Take a look at the documentation in eventRender, I include custom fields like this:

    eventRender: function(event, element, view) {
        if (event.allDay === 'true') {
            event.allDay = true;
        } else {
            event.allDay = false;
        }

        element.attr("autor",event.IdAutor);
        element.attr("descricao",event.EventoDescricao);
    },



    eventClick: function(event) {

        $('#event-modal #id').val(event.id);
        $('#event-modal #title').val(event.title);
        $('#event-modal #start').val(event.start.format("DD-MM-YYYY HH:MM:SS"));
        $('#event-modal #end').val(event.end.format("DD-MM-YYYY HH:MM:SS"));
        $('#event-modal #autor').val(event.autor);
        $('#event-modal #descricao').val(event.descricao);
        $('#event-modal').modal('show');
        return false;


        // change the border color just for fun
        //$(this).css('border-color', 'red');

    }

To pass the value to the form field, just assign the id