0

Bom preciso liberar o click no evento, quando clicar, terei que dar opção de editar o evento, as informações do mesmo, além da opção de excluir este evento.

FullCalendar Website

No site ascima tem alguns exemplos porém mesmo com eles não estou conseguindo fazer o que preciso que é:

Adicionar/Remover/Editar o evento de forma completa, texto e horários.

2
  • O que seria adicionar o evento de forma completa?
    – BrTkCa
    Commented 6/01/2017 às 9:12
  • @LucasCosta Dados de uma reunião, sendo data e hora, tema, e descrição Commented 6/01/2017 às 10:05

1 Resposta 1

3

Você chegou a ver o renderEvent?

Fiz um código de exemplo bem simples pra mostrar a inserção de um novo evento. Dai a edição e exclusão você pode seguir a mesma lógica.

Sinta-se livre para utilizar o código da maneira que desejar.

Espero ter ajudado.

UPDATE

Como solicitado, foi editado o código e colocado a versão de EDITAR UM EVENTO. Para isso utilizei o método updateEvent.

Veja o exemplo que eu codifiquei.

A lógica para excluir um evento é tão fácil quantos as outras. Para isso, leia.

Abraços.

$(document).ready(function() {

  // page is now ready, initialize the calendar...

  $('#calendar').fullCalendar({
    // put your options and callbacks here
    selectable: true,
    editable: true,
    select: function(start, end, allDay) {
      $("#addEvent").show();
      $("#editEvent").hide();
      $("#addNew-event").modal("show");
      $("#addNew-event input:text").val("");
      $("#getStart").val(start);
      $("#getEnt").val(end);
    },
    eventClick: function(event, element) {
      $("#addEvent").hide()
      $("#editEvent").show().data("ev", event);
      $("#addNew-event").modal("show");
      $("#addNew-event input:text").val("");
      $("#eventName").val(event.title);
    }
  });

  $("body").on("click", "#addEvent", function() {
    var eventName = $("#eventName").val();
    $("#calendar").fullCalendar("renderEvent", {
      title: eventName,
      start: $("#getStart").val(),
      end: $("#getEnd").val()
    }, true);

    $("#addNew-event form")[0].reset();
    $("#addNew-event").modal("hide");
  });
  $("body").on("click", "#editEvent", function() {
    var eventName = $("#eventName").val();
    var ev = $(this).data("ev");
    ev.title = eventName;
    $("#calendar").fullCalendar("updateEvent", ev);

    $("#addNew-event form")[0].reset();
    $("#addNew-event").modal("hide");
  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" />

<div id='calendar'></div>
<div class="modal fade" id="addNew-event" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Adicionar evento</h4>
      </div>
      <div class="modal-body">
        <form class="addEvent" role="form">
          <div class="form-group has-error">
            <label for="eventName">Nome do evento</label>
            <div class="fg-line">
              <input type="text" class="input-sm form-control" id="eventName" placeholder="exemplo: Reunião">
            </div>
          </div>
          <input type="hidden" id="getStart">
          <input type="hidden" id="getEnd">
        </form>
      </div>

      <div class="modal-footer">
        <button type="submit" class="btn btn-primary btn-sm" id="addEvent">Adicionar</button>
        <button type="submit" class="btn btn-primary btn-sm" id="editEvent">Editar</button>
        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

5
  • Amigo o que eu estava precisando mesmo não veio que é o editar, esta parte de inserir eu consegui, porém está faltando editar Commented 7/01/2017 às 13:02
  • Você quase nunca irá receber código pronto daqui. O objetivo é te ajudar nas dúvidas, não programar pra você. Coloca qual é sua dúvida exata em editar um event que poderemos te ajudar. Commented 9/01/2017 às 1:21
  • Não preciso todo, justamente o que preciso não sei fazer, que é capitar o evento do click em cima da atividade, hoje eu so consigo arrastar a atividade, preciso que quando clico posso editar ela, este é o problema Commented 9/01/2017 às 10:22
  • Vou modificar editar a resposta fazendo um "editar" evento. Commented 9/01/2017 às 10:34
  • Você é o melhor !kkkkk Commented 9/01/2017 às 17:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .