我已经为我的应用程序使用了fullCalendar插件。在执行过程中,我得到一个错误,
未捕获的错误typeerror calendar.fullcalendar不是函数
我已经推荐了uncaught-typeerror-fullcalendar-is-not-a-function,但对我没有帮助。
我在页面顶部整理了我的库文件
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
<title>Preclinic - Medical & Hospital - Bootstrap 4 Admin Template</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/calender/fullcalendar.css">
<link href='assets/packages/daygrid/main.css' rel='stylesheet' />
<link href='assets/packages/timegrid/main.css' rel='stylesheet' />
<link href="assets/packages/jqueryui/custom-theme/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
<link href='assets/packages/datepicker/datepicker.css' rel='stylesheet' />
<link href='assets/packages/colorpicker/bootstrap-colorpicker.min.css' rel='stylesheet' />
<link href="assets/packages/jqueryui/custom-theme/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
JavaScript
库位于页面底部
<script src="assets/ajax/jquery-3.4.1.min.js"></script>
<script src="assets/ajax/jquery.min.js"></script>
<script src="assets/calender/moment.min.js"></script>
<script src="assets/calender/jquery-ui.min.js"></script>
<script src="assets/calender/fullcalendar.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/select2.min.js"></script>
<script src="assets/js/app.js"></script>
<script src='assets/packages/daygrid/main.js'></script>
<script src='assets/packages/timegrid/main.js'></script>
<script src='assets/packages/list/main.js'></script>
<script src='assets/packages/interaction/main.js'></script>
<script src='assets/packages/datepicker/datepicker.js'></script>
<script src='assets/packages/colorpicker/bootstrap-colorpicker.min.js'></script>
这里是query
,
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
// put your options and callbacks here
editable:true,
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay,dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
eventSources: [
{
url: 'api/load.php',
}
],
})
$('#submitButton').on('click', function(e){
var startDate = $('#startDate').val();
var title = $('#title').val();
var endDate = $('#endDate').val();
var text_color = $('#text_color').val();
var color = $('#color').val();
// process the form
$.ajax({
type : "POST",
url : 'api/insert.php',
data : {
startDate:startDate,
title:title,
endDate:endDate,
text_color:text_color,
color:color,
},
success:function()
{
calendar.fullCalendar('refetchEvents');
if(data){
$('input[id=sumb]').prop('disabled',true);
} else {
//our handled error
}
},
});
doSubmit();
});
function doSubmit(){
$("#event-modal").modal('hide');
$("#calendar").fullCalendar('renderEvent',
{
title: $('#eventName').val(),
start: new Date($('#eventDueDate').val()),
},
true);
}
});
我不知道哪里出了问题。任何帮助都将不胜感激