如何更新Bootstrap模态日历事件
[英]How to update Bootstrap modal calendar events
问题描述
我正在尝试使用bootstrap输入模式设置可选择的FullCalendar演示。 我在Codepen上发现了一个带有引导模式的演示代替提示框，允许用户在多个字段中输入信息。 创建事件后，我应该能够通过单击事件来更新日历事件以恢复模态窗口，然后编辑字段中的现有信息。 但是，看起来这个演示看起来并不像使用bootstrap模式中的字段来启用事件更新。 有没有办法修改eventClick回调以启用现有事件的编辑？
这是代码：
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">×</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'></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;
}
这些是依赖项：
<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 个解决方案
解决方案1
1 2019-02-25 10:49:36
当您单击#save-event时，您是否尝试使用updateEvent而不是renderEvent ？ 因为renderEvent在updateEvent编辑现有事件时呈现新事件。
有关进一步的信息，我建议您去看看这些事件的文档：
添加或更新事件后，Angular Bootstrap日历不会更新视图
[英]Angular bootstrap calendar doesnt update view after adding or updating events
如何在angular-bootstrap-calendar中获取当天的所有事件
[英]how to get all the events of the day in angular-bootstrap-calendar
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.