How to update Bootstrap modal calendar events

问题: 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...

问题:

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

<body>
<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>
  </div>
</div>
</body>

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("<span class='closeon material-icons'>&#xe5cd;</span>");
      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:

<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'>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.js'></script>

<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js'></script>

回答1:

Did you try using updateEvent instead of renderEvent when you click #save-event ? because renderEvent renders a new event while updateEvent edits an existing event.

For further informations, I advice you to go take a look at the docs for those events :

https://fullcalendar.io/docs/updateEvent

https://fullcalendar.io/docs/renderEvent

  • 发表于 2019-02-26 03:08
  • 阅读 ( 314 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除