嗨，我可能有这个问题，我有这个文件，当我尝试编辑事件时，我会在最后添加一个事件脚本，以便在日历上显示事件，一旦我这样做，左侧的事件我就不能再删除它们了 在此处输入图像描述
正如您在图片上看到的，在我将此脚本添加到文件末尾之前，此事件工作正常：
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event ',
start: '2018-09-01'
},
]
});
});
</script>
所以这是我的文件：
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon.png">
<title></title>
<!-- Custom CSS -->
<link href="../../assets/libs/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" />
<link href="../../assets/extra-libs/calendar/calendar.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="../../dist/css/style.min.css" rel="stylesheet">
</head>
<body>
<div id="main-wrapper">
<aside class="left-sidebar">
<!-- Sidebar scroll-->
<div class="scroll-sidebar">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<li class="sidebar-item">
<a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)
" aria-expanded="false">
<i class="icon-Error-404Window"></i>
<span class="hide-menu">Error Pages</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
</ul>
</li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-5 align-self-center">
<h4 class="page-title">Calendar</h4>
<div class="d-flex align-items-center">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="">
<div class="row">
<div class="col-lg-3 border-right p-r-0">
<div class="card-body border-bottom">
<h4 class="card-title m-t-10">Drag & Drop Event</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div id="calendar-events" class="">
<div class="calendar-events m-b-20" data-class="bg-info"><i class="fa fa-circle text-info m-r-10"></i>Event One</div>
<div class="calendar-events m-b-20" data-class="bg-success"><i class="fa fa-circle text-success m-r-10"></i> Event Two</div>
<div class="calendar-events m-b-20" data-class="bg-danger"><i class="fa fa-circle text-danger m-r-10"></i>Event Three</div>
<div class="calendar-events m-b-20" data-class="bg-warning"><i class="fa fa-circle text-warning m-r-10"></i>Event Four</div>
</div>
<!-- checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="drop-remove">
<label class="custom-control-label" for="drop-remove">Remove after drop</label>
</div>
<a href="javascript:void(0)" data-toggle="modal" data-target="#add-new-event" class="btn m-t-20 btn-info btn-block waves-effect waves-light">
<i class="ti-plus"></i> Add New Event
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card-body b-l calender-sidebar">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BEGIN MODAL -->
<div class="modal none-border" id="my-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add Event</strong></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success save-event waves-effect waves-light">Create event</button>
<button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
<!-- Modal Add Category -->
<div class="modal fade none-border" id="add-new-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add</strong> a category</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-6">
<label class="control-label">Category Name</label>
<input class="form-control form-white" placeholder="Enter name" type="text" name="category-name" />
</div>
<div class="col-md-6">
<label class="control-label">Choose Category Color</label>
<select class="form-control form-white" data-placeholder="Choose a color..." name="category-color">
<option value="success">Success</option>
<option value="danger">Danger</option>
<option value="info">Info</option>
<option value="primary">Primary</option>
<option value="warning">Warning</option>
<option value="inverse">Inverse</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect waves-light save-category" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- END MODAL -->
</div>
</div>
</div>
<script src="../../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../../assets/extra-libs/taskboard/js/jquery.ui.touch-punch-improved.js"></script>
<script src="../../assets/extra-libs/taskboard/js/jquery-ui.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="../../assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- apps -->
<script src="../../dist/js/app.min.js"></script>
<script src="../../dist/js/app.init.boxed.js"></script>
<script src="../../dist/js/app-style-switcher.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="../../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="../../assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="../../dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="../../dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="../../dist/js/custom.min.js"></script>
<!--This page JavaScript -->
<script src="../../assets/libs/moment/min/moment.min.js"></script>
<script src="../../assets/libs/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="../../dist/js/pages/calendar/cal-init.js"></script>
<script>
</script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-09-01'
},
]
});
});
</script>
</body>
</html>所以这是我的代码对不起，我不知道如何将我的本地文件放在 snipet 上，我只是想也许有人在看到代码时会有一个想法并帮助我，我将不胜感激
尝试使用此代码(取自 https://fullcalendar.io/docs/external-dragging-demo，我只是根据您的ID和类名对其进行了更新(：
$(function() {
// initialize the external events
// -----------------------------------------------------------------
$('#calendar-events .calendar-events').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
// initialize the calendar
// -----------------------------------------------------------------
$(document).ready(function() {
$('#calendar').fullCalendar({
// defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
droppable: true,
events: [
{
title: 'All Day Event ',
start: '2018-09-01'
},
]
});
});
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});