未捕获的错误类型错误calendar.fullcalendar不是函数

时间:2020-09-30 02:22:09

标签: javascript jquery fullcalendar fullcalendar-3

我已经为我的应用程序使用了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);
     }
});

我不知道哪里出了问题。任何帮助都将不胜感激

0 个答案:

没有答案