代码之家 › 专栏 › 技术社区 › Prafulla Kumar Sahu umang naik

在Laravel中使用时,fullcalendar不是函数

fullcalendar laravel-5 html jquery javascript

Prafulla Kumar Sahu umang naik · 技术社区 · 6 年前

我正在尝试在我的laravel应用程序中使用fullcalendar。

脚本

    <script src="http://127.0.0.1:8000/js/vendors/moment.js"></script>
    <script src="http://127.0.0.1:8000/js/vendors/jquery.min.js"></script>
    <script src="http://127.0.0.1:8000/js/vendors/fullcalendar.min.js"></script>
    <script src="http://127.0.0.1:8000/js/script.js"></script>
</body>
</html>

代码输入 script.js脚本

$(function() {
    $('#calendar').fullCalendar({
      editable: true,
      eventLimit: true,
    });
});

我的页面中有日历div,控制台显示错误

Uncaught TypeError: $(...).fullCalendar is not a function
    at HTMLDocument.<anonymous> (script.js:2)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)
(anonymous) @ script.js:2
l @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
w.readyException @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
l @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
_ @ jquery.min.js:2

我的刀片文件

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">Menu</div>
                <div class="card-body">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('calendar') }}">Calendar</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body full-calendar">
                    <div id='calendar'></div>
                </div>
            </div>
        </div>
    </div>
</div>

正如@Leo所建议的,我试着用 https ngrok 创造 https协议 在里面 localhost

1 回复 | 直到 6 年前

Prafulla Kumar Sahu umang naik 6 年前

我发现问题是Laravels app.js,也就是创建错误,我会给它添加一个合适的解决方案。

npm 和 webpack 和管理依赖项您将不会得到此错误。不用依赖关系管理器。

另一个解决方案是使用defer,

您可以在所有其他脚本上使用defer属性,错误就消失了。

<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/vendors/moment.js') }}" defer></script>
<script src="{{ asset('js/vendors/fullcalendar.min.js') }}" defer></script>-->
<script src="{{ asset('js/script.js') }}" defer></script>

推荐文章