使用FullCalendar + Javascript在事件模式下编辑字段

时间:2017-06-07 18:47:23

标签: javascript codeigniter fullcalendar

下午好,我正在使用FullCalendar插件创建一个简单的日历,我差不多完成了,但现在我需要点击所需的事件来显示事件的信息,并且有一个在下图中更新了选项,您可以看到当前的

Example

现在,继续我的代码到目前为止,请注意我已经定义了一个更新的按钮和使用的方法,但仍未达到方法。我需要的是找出如何显示事件的原始数据,并让用户可以更改并将其保存在数据库中。

查看:

<head>
<div class="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 -->

的Controler:

<?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);
    }

模态:

<?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;
            }       
        }
}

1 个答案:

答案 0 :(得分:0)

<input href="http://localhost/sistema/calendar2/updateEvents2"  type="submit" class="btn btn-primary" name="btsalvar" value="Atualizar" />

&#39; HREF&#39;不是输入标记的属性 尝试通过提供操作和方法

将表单提交给服务器
<input type="submit" >