Working with fullcalendar jQuery

Question

Good need to release the click on the event, when clicking, I will have to give option to edit the event, the information of it, plus the option to delete this event.

Fullcalendar Website

On the site ascima has some examples but even with them I’m not able to do what I need it is:

Add/Remove/Edit the entire event, text and time.

Answer 1

You came to see the renderEvent?

I made a very simple example code to show the insertion of a new event. Hence editing and deleting you can follow the same logic.

Feel free to use the code however you wish.

I hope I’ve helped.

UPDATE

As requested, the code was edited and the version of EDIT AN EVENT was placed. For this I used the method updateEvent.

Look at the example I coded.

The logic to delete an event is as easy as the others. For that reason, read.

Hugs.

$(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>