How to update Bootstrap modal calendar events

Question

I am attempting to set up a selectable FullCalendar demo with bootstrap input modals. I found a demo on Codepen with bootstrap modals in place of prompt boxes, which allows the user to enter information into multiple fields. After creating an event, I should be able to update calendar events by clicking on the event to bring back up the modal window, and then edit the existing information in the fields. However, it doesn't look like this demo has been set up to enable event updating using the fields in the bootstrap modal. Is there a way to modify the eventClick callback to enable editing of existing events?

Here is the code:

HTML

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) {
      //dynamically prepend close button to event
      element
        .find(".fc-content")
        .prepend("");
      element.find(".closeon").on("click", function() {
        $("#calendar").fullCalendar("removeEvents", event._id);
      });
    },

    eventClick: function(calEvent) {
      // Display the modal and set event values.
      $(".modal").modal("show");
    var title = $(".modal")
        .find("#title")
        .val(calEvent.title);

   var start = $(".modal")
        .find("#starts-at")
        .val(calEvent.start);

    var end = $(".modal")
        .find("#ends-at")
        .val(calEvent.end);
        $("#save-event").show();
      $("input").prop("readonly", false);
    }
  });

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

  //click to save event
  $("#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");
  });
});

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

/*info btn*/
.dropbtn {
  /*background-color: #4CAF50;*/
  background-color: #eee;
  margin: 10px;
  padding: 8px 16px 8px 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left: 100px;
  margin-top: -300px;
}

.dropdown-content p {
  color: black;
  padding: 4px 4px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: grey;
}

.dropdown:hover .dropbtn span {
  color: white;
}

These are the dependencies:

How to update Bootstrap modal calendar events

Answers (1)

Related Questions