Обновление событий FullCalendar Bootstrap

Question

Я недавно построил демонстрацию по выбору FullCalendar с многопольными блоками подсказок на основе Bootstrap.Пользователь вводит название события, время начала и окончания / дату, а затем нажимает кнопку «Сохранить», чтобы создать событие.Пользователь может щелкнуть по тому же событию еще раз, чтобы отредактировать его, используя 3 отдельных окна запроса на основе браузера для заголовка, начала и конца, в отличие от исходного модуса начальной загрузки, который использовался для создания события в первую очередь.Я хочу настроить эту демонстрацию таким образом, чтобы при щелчке на существующем событии для повторного редактирования DOES фактически запрашивался многопольный режим начальной загрузки вместо 3 отдельных окон приглашения.Любые рекомендации?

JS:

$(document).ready(function() {
  $("#calendar").fullCalendar({
    header: {
      left: "prev,next today",
      center: "title",
      right: "month,agendaWeek,agendaDay"
    },

    defaultView: "month",
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectHelper: true,
    editable: true,
    eventLimit: true, // allow "more" link when too many events

    select: function(start, end) {
      // Display the modal.
      // You could fill in the start and end fields based on the parameters
      $(".modal").modal("show");
      $(".modal")
        .find("#title")
        .val("");
      $(".modal")
        .find("#starts-at")
        .val("");
      $(".modal")
        .find("#ends-at")
        .val("");
      $("#save-event").show();
      $("input").prop("readonly", false);
    },

    eventRender: function(event, element) {
      /*add onclick functionality here*/
      element
        .find(".fc-content")
        .prepend("<span class='closeon material-icons'>&#xe5cd;</span>");
      element.find(".closeon").on("click", function() {
        $("#calendar").fullCalendar("removeEvents", event._id);
      });
    },

    eventClick: function(calEvent, jsEvent) {
      /*event title*/
      var title = prompt("Update Event Title/Description:", calEvent.title, {
        buttons: {
          Ok: true,
          Cancel: false
        }
      });
      if (title) {
        calEvent.title = title;
        $("#calendar").fullCalendar("updateEvent", calEvent);
      } else if (title == "") {
        calEvent.title = "";
        $("#calendar").fullCalendar("updateEvent", calEvent);
      }

      /*event start*/
      var start = prompt("Edit Start Time:", calEvent.start, {
        buttons: {
          Ok: true,
          Cancel: false
        }
      });
      if (start) {
        calEvent.start = start;
        $("#calendar").fullCalendar("updateEvent", calEvent);
      } else if (start == "") {
        calEvent.start = "";
        $("#calendar").fullCalendar("updateEvent", calEvent);
      }

      /*event end*/
      var end = prompt("Edit End Time:", calEvent.end, {
        buttons: {
          Ok: true,
          Cancel: false
        }
      });
      if (end) {
        calEvent.end = end;
        $("#calendar").fullCalendar("updateEvent", calEvent);
      } else if (end == "") {
        calEvent.end = "";
        $("#calendar").fullCalendar("updateEvent", calEvent);
      }

      $(".modal").modal("show");
      $(".modal")
        .find("#title")
        .val(calEvent.title);
      $(".modal")
        .find("#starts-at")
        .val(calEvent.start);
      $(".modal")
        .find("#ends-at")
        .val(calEvent.end);
      $("#save-event").hide();
      $("input").prop("readonly", true);
    }
  });

  // Bind the dates to datetimepicker.
  $("#starts-at, #ends-at").datetimepicker();

  // Whenever the user clicks on the "save" button on the dialog
  $("#save-event").on("click", function(event) {
    var title = $("#title").val();
    if (title) {
      var eventData = {
        title: title,
        start: $("#starts-at").val(),
        end: $("#ends-at").val()
      };
      $("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true
    }
    $("#calendar").fullCalendar("unselect");

    // Clear modal inputs
    $(".modal")
      .find("input")
      .val("");
    // hide modal
    $(".modal").modal("hide");
  });

  $("textarea").autosize();
});

HTML:

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

<div id='datepicker'></div>

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4><input class="modal-title" type="text" name="title" id="title" placeholder="Event Title/Description" /></h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12">
            <label class="col-xs-4" for="starts-at">Starts at</label>
            <input type="text" name="starts_at" id="starts-at" />
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <label class="col-xs-4" for="ends-at">Ends at</label>
            <input type="text" name="ends_at" id="ends-at" />
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="save-event">Save</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

CSS:

body {
  margin: 40px 10px;
  padding: 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

#calendar {
  width: 900px;
  margin: 0 auto;
}

#wrap {
  width: 1100px;
  margin: 0 auto;
}

.closeon {
  border-radius: 5px;
}

input {
  width: 50%;
}

input[type="text"][readonly] {
  border: 2px solid rgba(0, 0, 0, 0);
}

Зависимости:

<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.0.1/fullcalendar.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>