javascript - FullCalendar 在 laravel 中不起作用？-6ren

javascript - FullCalendar 在 laravel 中不起作用？

转载作者：行者123 更新时间：2023-11-30 00:14:47

我正在尝试在 laravel 框架中设置 fullCalendar，但由于某种原因它不起作用。

我制作了一个单独的原型(prototype)(没有框架，只有一个 index.html 文件)，当我复制该代码时，它突然不再工作了......
我遇到了一个 Uncaught TypeError: $(...).fullCalendar is not a function 错误。

谁能告诉我我做错了什么？

拉拉维尔:应用程序.blade.php

<!DOCTYPE html>
<html lang="<!DOCTYPE html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Larabase</title>

    <script src="{{ asset('bower/jquery/dist/jquery.js') }}"></script>
    <script src="{{ asset('bower/moment/moment.js') }}"></script>
    <script src="{{ asset('bower/moment/locale/nl.js') }}"></script>
    <script src="{{ asset('bower/fullcalendar/dist/fullcalendar.js') }}"></script>
    <script src="{{ asset('bower/fullcalendar/dist/lang/nl.js') }}"></script>

    <link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.print.css') }}"/>


    @stack('scripts_head_before')

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    {{-- Font Awesome --}}
    {{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}

    @stack('scripts_head_after')

</head>

<body>

@include('partials.nav')

<div class="container" style="margin-top: 30px;">

    @include('partials.alert')

    @yield('content')

</div><!-- /.container -->

@stack('scripts_footer_before')

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{!! HTML::script('js/global.js') !!}

@stack('scripts_footer_after')



</body>
</html>

laravel: home.blade.php

@extends('app')

@section('content')

    <div id='calendar'></div>

    <script type="text/javascript">
        var events = [

            {
                title: 'Meeting',
                start: '2016-01-12T10:30:00',
                end: '2016-01-12T11:30:00'
            },
            {
                title: 'Meeting',
                start: '2016-01-12T11:30:00',
                end: '2016-01-12T12:30:00'
            },
            {
                title: 'Meeting',
                start: '2016-01-12T12:30:00',
                end: '2016-01-12T13:30:00'
            }
        ];

        $(document).ready(function () {

            // page is now ready, initialize the calendar...

            $('#calendar').fullCalendar({
                // put your options and callbacks here
                lang: 'nl',
                eventLimit: true,
                weekends: true,
                firstDay: 1,
                weekNumbers: true,
                businessHours: {
                    start: '10:00', // a start time (10am in this example)
                    end: '18:00', // an end time (6pm in this example)

                    dow: [1, 2, 3, 4, 5]
                    // days of week. an array of zero-based day of week integers (0=Sunday)
                    // (Monday-Thursday in this example)
                },
                events,
                dayClick: function (date, jsEvent, view) {

                    alert('Clicked on: ' + date.format());

                    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

                    alert('Current view: ' + view.name);

                    // change the day's background color just for fun
                    $(this).css('background-color', 'red');

                },
                eventClick: function (calEvent, jsEvent, view) {

//                alert('Event: ' + calEvent.title);
//                alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
//                alert('View: ' + view.name);

                    console.log('event', calEvent);
                    console.log('jsEvent', jsEvent);
                    console.log('View', view);

                    // change the border color just for fun
                    $(this).css('border-color', 'red');
                }
            });
        });

    </script>

@stop

index.html 原型(prototype)(有效):

<html>
<head>
    <title>Fullcalendar prototype</title>
    <link rel='stylesheet' href='bower_components/fullcalendar/dist/fullcalendar.css'/>
    <script src='bower_components/jquery/dist/jquery.min.js'></script>
    <script src='bower_components/moment/min/moment.min.js'></script>
    <script src='bower_components/fullcalendar/dist/fullcalendar.js'></script>
    <script src='bower_components/fullcalendar/dist/lang/nl.js'></script>
    <script src='bower_components/bootstrap/dist/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>
<h1>Fullcalendar prototype&nbsp;
    <button id="addbutton" class="btn btn-default">+</button>
</h1>
<div id='calendar'></div>

<script type="text/javascript">
    var events = [

        {
            title: 'Meeting',
            start: '2016-01-12T10:30:00',
            end: '2016-01-12T11:30:00'
        },
        {
            title: 'Meeting',
            start: '2016-01-12T11:30:00',
            end: '2016-01-12T12:30:00'
        },
        {
            title: 'Meeting',
            start: '2016-01-12T12:30:00',
            end: '2016-01-12T13:30:00'
        }
    ];

    $(document).ready(function () {

        // page is now ready, initialize the calendar...

        $('#calendar').fullCalendar({
            // put your options and callbacks here
            lang: 'nl',
            eventLimit: true,
            weekends: true,
            firstDay: 1,
            weekNumbers: true,
            businessHours: {
                start: '10:00', // a start time (10am in this example)
                end: '18:00', // an end time (6pm in this example)

                dow: [1, 2, 3, 4, 5]
                // days of week. an array of zero-based day of week integers (0=Sunday)
                // (Monday-Thursday in this example)
            },
            events,
            dayClick: function (date, jsEvent, view) {

                alert('Clicked on: ' + date.format());

                alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

                alert('Current view: ' + view.name);

                // change the day's background color just for fun
                $(this).css('background-color', 'red');

            },
            eventClick: function (calEvent, jsEvent, view) {

//                alert('Event: ' + calEvent.title);
//                alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
//                alert('View: ' + view.name);

                console.log('event', calEvent);
                console.log('jsEvent', jsEvent);
                console.log('View', view);

                // change the border color just for fun
                $(this).css('border-color', 'red');
            }
        });
    });

</script>
</body>
</html>

最佳答案

编写如下代码:-

app.blade.php

<!DOCTYPE html>
<html lang="<!DOCTYPE html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Larabase</title>

    <script src="{{ asset('bower/jquery/dist/jquery.js') }}"></script>
    <script src="{{ asset('bower/moment/moment.js') }}"></script>
    <script src="{{ asset('bower/moment/locale/nl.js') }}"></script>
    <script src="{{ asset('bower/fullcalendar/dist/fullcalendar.js') }}"></script>
    <script src="{{ asset('bower/fullcalendar/dist/lang/nl.js') }}"></script>

    <link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bower/fullcalendar/dist/fullcalendar.print.css') }}"/>


    @stack('scripts_head_before')

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    {{-- Font Awesome --}}
    {{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--}}

    @stack('scripts_head_after')

</head>

<body>

@include('partials.nav')

<div class="container" style="margin-top: 30px;">

    @include('partials.alert')

    @yield('content')

</div><!-- /.container -->

@stack('scripts_footer_before')

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{!! HTML::script('js/global.js') !!}

@stack('scripts_footer_after')

// ADD another yield section here.
@yield('external_script')
</body>
</html>

home.blade.php

@extends('app')

@section('content')
     <!-- Add only div here -->
    <div id='calendar'></div>    
@stop

@section('external_script')
 <!-- Here is your script-->
<script type="text/javascript">
        var events = [

            {
                title: 'Meeting',
                start: '2016-01-12T10:30:00',
                end: '2016-01-12T11:30:00'
            },
            {
                title: 'Meeting',
                start: '2016-01-12T11:30:00',
                end: '2016-01-12T12:30:00'
            },
            {
                title: 'Meeting',
                start: '2016-01-12T12:30:00',
                end: '2016-01-12T13:30:00'
            }
        ];

        $(document).ready(function () {

            // page is now ready, initialize the calendar...

            $('#calendar').fullCalendar({
                // put your options and callbacks here
                lang: 'nl',
                eventLimit: true,
                weekends: true,
                firstDay: 1,
                weekNumbers: true,
                businessHours: {
                    start: '10:00', // a start time (10am in this example)
                    end: '18:00', // an end time (6pm in this example)

                    dow: [1, 2, 3, 4, 5]
                    // days of week. an array of zero-based day of week integers (0=Sunday)
                    // (Monday-Thursday in this example)
                },
                events,
                dayClick: function (date, jsEvent, view) {

                    alert('Clicked on: ' + date.format());

                    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

                    alert('Current view: ' + view.name);

                    // change the day's background color just for fun
                    $(this).css('background-color', 'red');

                },
                eventClick: function (calEvent, jsEvent, view) {

//                alert('Event: ' + calEvent.title);
//                alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
//                alert('View: ' + view.name);

                    console.log('event', calEvent);
                    console.log('jsEvent', jsEvent);
                    console.log('View', view);

                    // change the border color just for fun
                    $(this).css('border-color', 'red');
                }
            });
        });

    </script>

@stop

希望对你有帮助:)

关于javascript - FullCalendar 在 laravel 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35151117/

文章推荐： android - 显示 child 的值(value)

文章推荐： javascript - 如何在 c3js 图表中动态更改 x 轴日期格式？

文章推荐： javascript - 从 jQuery 创建动态 div 时 Masonry.js 不工作

文章推荐： android - 蓝牙问题 : myUserId = 0

fullcalendar - FullCalendar 中的动态事件模板
有没有办法在 FullCalendar 中动态更改事件模板？更新。我想要的是指定新的事件 html(例如在 eventRender 回调中)并使 FullCalendar 将其用于我的事件渲染。像
fullcalendar - Fullcalendar 的彩色周末
我正在使用 FullCalendar 组件，我需要为周末、周五和周六着色。我已经按照这里的建议使用了以下内容: Can I set a different color for the weekend
fullcalendar - FullCalendar 中放置事件的时区
我正在实现 fullcalendar 并在时区问题上苦苦挣扎。这是代码: $('#calendar').fullCalendar({ //re-initialize the calendar
fullcalendar - 动态重新绘制 fullCalendar
我希望 fullCalendar 在不重新加载页面的情况下重绘自身(所有结构和事件)。场景: 我正在使用支持 Resource View 的 fullCalendar 补丁。 .对于一些用户操作，我
fullcalendar - 单个页面上的多个 FullCalendar
我想在同一页面上添加多个 FullCalendars(可选)以安排不同类型的事件并将信息保存在数据库中，但查看演示/示例代码，我似乎每页只能添加一个日历，因为它由呈现。 .您能否让我知道是否有办法
jquery - Fullcalendar:可拖动对象拒绝将 fullcalendar 视为可放置，即使 fullcalendar 接受放置
我已将 FullCalendar 设置为接受 drop，确实如此。但是我用 revert:'invalid' 构造的可拖动对象似乎无法将 FullCalendar 上的日期识别为可放置的，并恢复回来。
fullcalendar - 在页面中隐藏 FullCalendar schedulerLicenseKey
我公司最近购买了 Full-Calendar Scheduler 插件。有没有正确的方法在代码中隐藏许可证 key ？对此有哪些好的做法？最佳答案你是对的，没有办法完全隐藏 schedulerLi
fullcalendar-scheduler - FullCalendar 资源可点击
在 FullCalendar如何使资源可点击？我已经检查了 API，但我看不到任何相关内容，我是否遗漏了什么？我在找 resource-click -事件就像我们对事件一样？最佳答案在 res
fullcalendar - 在 fullCalendar 中将数据添加到每天的单元格中
我有额外的数据(在我的例子中是一个数字)，它是通过一个 javascript 函数获得的——我想在每天的单元格中显示它。例如 - 如果天数在右上角，我希望它显示在左上角 - 每天自动显示。我看到有
fullcalendar - 如何从 fullcalendar 对象中读取选项
我在单个页面上创建多个 fullcalendar，我想编写一个事件渲染回调，以便它可以从调用它的 fullcalendar 实例中读取选项，例如 minTime 和 maxTime，不知道如何做这个。
fullcalendar - 可以在 FullCalendar 中设置默认时隙高度吗？
看起来默认值为 20 像素，但我希望将其提高，因此长度为 1 个时隙的事件将能够显示事件标题和正文。当前，当事件长度为 1 个时隙时，仅显示事件标题。最佳答案任何仍在寻找新版本答案的人。在新版本
fullcalendar - 在 Fullcalendar 中更改过去事件的颜色
我正在尝试实现 this solution在 Fullcalendar 中“变灰”过去的事件，但我没有任何运气。不过，我不太精通 Javascript，所以我认为我犯了一些愚蠢的错误。我已经将建议的
fullcalendar - 如何取消 fullCalendar 中的旧选择？
我使用 jQuery fullCalendar (http://arshaw.com/fullcalendar/docs/selection/unselectAuto/) 我使用这个日历的可选版本 (
fullcalendar - 如何在 FullCalendar 中编辑事件的宽度？
这看起来非常简单，但我花了半天时间把头撞在墙上，试图弄清楚为什么我的全日历事件只显示在 77 像素，而单元格(月 View )的宽度似乎是 90 像素或更高。我曾尝试修改 fc-event css 规
fullcalendar - 如何更改 fullcalendar 中的列时间格式？
我正在尝试在全日历中将时间格式更改为 24 小时制。我试图找到它 here但我无法弄清楚。这里的代码片段: jQuery('#calendar').fullCalendar({ heade
fullcalendar - 如何防止 fullcalendar 在事件标题中显示开始时间？
在月 View 中 fullcalendar 有一个很好的功能，可以在非全天事件的顶行显示开始时间。如果您不想在事件标题中提供更多详细信息，这可能很有用。我想在月 View 中显示几个详细信息，例如
fullcalendar - 如何在 fullcalendar 中显示事件的描述
如何在 fullcalendar 中显示事件的描述？我有具有标题和描述的事件。那么如何显示描述呢？最佳答案当您添加标题和描述时，它将连接起来。使用以下代码，您可以连接标题: eventRen
fullcalendar - 访问 FullCalendar 中的日历事件数据
我正在尝试使用 FullCalendar 在网页上呈现 Google 日历中的事件。我想要开始日期/时间、描述和地点。 future 事件在一个 div 中，过去事件在另一个 div 中。现在，我的
fullcalendar - 在 FullCalendar 中突出显示所选日期
我正在尝试突出显示 FullCalender.io 中的选定日期(与当前日期类似)。已关注 FullCalendar - Highlight a particular day in week vie
fullcalendar - 如何向 FullCalendar 的单元格添加按钮和链接
我是 FullCalendar 新手。在我的项目中，我需要显示带有时间范围的日历以及每天为每个培训中心分配的参与者。更准确地说，一天可以有很多个培训时段，由培训中心进行。因此，我想展示哪个培训中心分配

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - FullCalendar 在 laravel 中不起作用？