个人中心
gpt4 book ai didi

javascript - fullcalendar 不会在按钮单击和任何函数内调用

转载 作者：行者123 更新时间：2023-12-01 05:25:08 25 4
gpt4 key购买 nike

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

但是我在 Firebug 控制台中收到错误。

TypeError: $(...).fullCalendar is not a function

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

这是我的代码。请检查并建议我。 

<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>

关于javascript - fullcalendar 不会在按钮单击和任何函数内调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40298565/

25 4 0
文章推荐： java - Zimbra Java 客户端 - 入门？
文章推荐： scripting - 在 ClearCase 中查找指向某个版本的合并箭头
文章推荐： scala - 如何在 Scala 中覆盖 Java varargs 方法？
文章推荐： spring - 如何绕过重置 session 的到期时间
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com