Working with fullcalendar jQuery

Question

Working with fullcalendar jQuery

Navigation

#1 by (3 votes)

0

I need to release the click on the event, when I click, I will have to give the option to edit the event, its information, and the option to delete this event.

FullCalendar Website

In the above site there are some examples but even with them I can not do what I need to be:

Add / Remove / Edit event completely, text and times.

javascript jquery

asked by anonymous 06.01.2017 / 03:15

1 answer

query query mysql autocomplete Effect on navbar bootstrap [closed]

score 3 · Accepted Answer

Have you ever seen renderEvent ?

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

Feel free to use the code any way you like.

I hope I have helped.

UPDATE

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

See the example I coded.

The logic to delete one event is as easy as the others. For this, 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><scriptsrc="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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>