fullcalender不调用按钮点击和内部的任何函数 - fullcalnder not calls on button click and inside any function

我使用的是fullcalendar。当我的页面加载完整日历加载正常。现在，我想从表中检索新数据，并将其显示在日历上。为此，我调用ajax按钮点击，ajax将检索表中的新数据，并显示在完整的日历。

但是我在firebug控制台得到一个错误。

TypeError: $(…)。fullCalendar不是一个函数

它在页面加载时工作，但当我在函数或任何点击事件中使用它时，它不会工作。

这是我的代码。请检查并推荐给我。

<script>
 $(document).ready(function() {
    var today = new Date();
    // This works because it calls on page load
    $('#calendars').fullCalendar({
        header: {
            right: 'month,agendaWeek,agendaDay,prev,next today'
        },
        defaultDate: today,
        editable: true,
        navLinks: true, // can click day/week names to navigate views
        eventLimit: true, // allow "more" link when too many events
        events: {
            url: 'fullcalendar/demos/php/get-events.php',
            error: function(eee) {
                $('#script-warning').show();
            }
        },
        loading: function(bool) {
            $('#loading').toggle(bool);
        }
    });

  // This doesn't works because it calls on button click. It gives me  TypeError: $(...).fullCalendar is not a function
  $("#clickme").click(function(){
  var timezone = localStorage.getItem("timezone");
  var start = "2016-10-16";
  var end = "2016-10-21";
  $('#calendars').fullCalendar({
      events: function(start, end, timezone, callback) {
  $.ajax({
      url: "fullcalendar/demos/php/get-events.php?mode=customdate&start=" + start + "&end=" + end,
  type: 'json',
  success: function(doc) {
          var events = [];
          $(doc).find('event').each(function() {
          events.push({
           title: $(this).attr('title'),
       start: $(this).attr('start') // will be parsed
      });
         });
         callback(events);
      }
     });
     }
     });
   });
});
</script>
 <div id='script-warning'>
    <code>php/get-events.php</code> must be running.
</div>
<div id='loading'>loading...</div>
 <div>
<div class="row" style="border-top:2px solid">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border-right:1px solid"> 
        <div id='overviewDatePicker' style='margin-bottom:10px;margin-top:90px'></div>
        <div><b>Filter By Eventname</b></div>
        <div>
            <input type="text" placeholder="Search"/>
        </div>
        <div><b>Filter By Stage</b></div>
        <ul style="list-style:none">
            <li><span class="glyphicon glyphicon-flag" style="margin:3px"></span>Tentative Booking</li>
            <li><span class="glyphicon glyphicon-ok" style="margin:3px"></span>Complete Booking</li>
        </ul>
        <br><br><br>
    </div>
    <div  class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventcalendar">
        <button id="clickme"> Click</button>
        <div id="calendars"></div>
    </div>
</div>
 </div>

我已经根据你的代码更新了我的代码。请检查点击功能，我已经做了更改，修改了你的代码，让我知道结果

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.css" />
<script>
$(document).ready(function() {
    var today = new Date();
    // This works because it calls on page load
    $('#calendars').fullCalendar({
        header: {
            right: 'month,agendaWeek,agendaDay,prev,next today'
        },
        defaultDate: today,
        editable: true,
        navLinks: true, // can click day/week names to navigate views
        eventLimit: true, // allow "more" link when too many events
        events: {
            url: 'fullcalendar/demos/php/get-events.php',
            error: function(eee) {
                $('#script-warning').show();
            }
        },
        loading: function(bool) {
            $('#loading').toggle(bool);
        }
    });

  // Please check this part only 
    $("#clickme").click(function(){
        var timezone = localStorage.getItem("timezone");
        var start = "2016-10-16";
        var end = "2016-10-21";
        $.ajax({
            url: "fullcalendar/demos/php/get-events.php?mode=customdate&start=" + start + "&end=" + end,
            type: 'json',
            success: function(doc) {
                var events = [];
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start') // will be parsed
                    });
                });
                //$("#calendars").fullCalendar('removeEvents'); //If you want to remove existing events from calender
                $("#calendars").fullCalendar('addEventSource', events); 
            }
        }); 
    });
});
</script>
</head>
<body>
<div id='script-warning'>
    <code>php/get-events.php</code> must be running.
</div>
<div id='loading'>loading...</div>
 <div>
<div class="row" style="border-top:2px solid">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border-right:1px solid"> 
        <div id='overviewDatePicker' style='margin-bottom:10px;margin-top:90px'></div>
        <div><b>Filter By Eventname</b></div>
        <div>
            <input type="text" placeholder="Search"/>
        </div>
        <div><b>Filter By Stage</b></div>
        <ul style="list-style:none">
            <li><span class="glyphicon glyphicon-flag" style="margin:3px"></span>Tentative Booking</li>
            <li><span class="glyphicon glyphicon-ok" style="margin:3px"></span>Complete Booking</li>
        </ul>
        <br><br><br>
    </div>
    <div  class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventcalendar">
        <button id="clickme"> Click</button>
        <div id="calendars"></div>
    </div>
</div>
 </div>
</body>
</html>