laravel 完整日历不适用于主题 JQuery 和 Bootstrap

Posted 2023-03-14

技术标签:

【中文标题】laravel 完整日历不适用于主题 JQuery 和 Bootstrap【英文标题】：laravel full calendar not working with theme JQuery and Bootstrap 【发布时间】：2019-12-05 14:21:01 【问题描述】：

我正在使用 laravel 完整的日历包 maddhatter/laravel-fullcalendar。这个包没有选择我的主题 jquery、bootstrap 和 moment。我已将所有这些都包含在主刀片中并在此刀片中进行了扩展。如果更改查询和引导程序，则日历可以工作，但所有其他在主题 jquery 和引导程序上工作的东西都停止工作。

将这些包含在主刀片中：

< link href=""app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"" rel="stylesheet" > < script src=""app-assets/assets/plugins/jquery/jquery.min.js""></script > < script src=""app-assets/assets/plugins/moment/moment.js""></script >

它向我显示了控制台错误

Uncaught ReferenceError: jQuery is not defined

未捕获的引用错误：$ 未定义

刀片：

@extends('layouts.master')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>



<div class="row">
    <div class="col-md-12 ">
        <div class="panel panel-default">
            <div class="panel-heading">Full Calendar Example</div>

            <div class="panel-body">
                !! $calendar->calendar() !!
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
!! $calendar->script() !!


@endsection

我的控制器：

public function weddingHallDashboardView()

    $events = [];
    $data = Booking::all();
    if($data->count()) 
        foreach ($data as $key => $value) 
            $events[] = Calendar::event(
                $value->booking_type,
                true,
                new \DateTime($value->date_from),
                new \DateTime($value->date_to),
                null,
                // Add color and link on event
                [
                    'color' => '#f05050',
                    'url' => 'pass here url and any route',
                ]
            );
        
    
    $calendar = Calendar::addEvents($events);


    return view('dashboards.wedding-hall-dashboard')
        ->with(['calendar' => $calendar]);

主刀

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href=""app-assets/assets/images/favicon.png"">
    <title>@yield('site_title') &#124; 3orrsy</title>
    <!-- Bootstrap Core CSS -->
    <link href=""app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"" rel="stylesheet">
    <!--alerts CSS -->
    <link href=""app-assets/assets/plugins/sweetalert/sweetalert.css"" rel="stylesheet" type="text/css">
    <!-- chartist CSS -->
    <link href=""app-assets/assets/plugins/chartist-js/dist/chartist.min.css"" rel="stylesheet">
    <link href=""app-assets/assets/plugins/chartist-js/dist/chartist-init.css"" rel="stylesheet">
    <link href=""app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css""
          rel="stylesheet">
    <!--This page css - Morris CSS -->
    <link href=""app-assets/assets/plugins/c3-master/c3.min.css"" rel="stylesheet">
    <!-- Bootstrap Core CSS -->
    <link href=""app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"" rel="stylesheet">
    <link href=""app-assets/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css"" rel="stylesheet">


    <!-- Date picker plugins css -->
    <link href="asset('app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')" rel="stylesheet" type="text/css" />

    <!-- Custom CSS -->
    <link href=""app-assets/css/style.css"" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href=""app-assets/css/colors/blue.css"" id="theme" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="asset('app-assets/SlimImageCropper/slim.css')">
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>

<body>

<div>
// Side Menu
</div>

<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src=""app-assets/assets/plugins/jquery/jquery.min.js""></script>
<!-- Bootstrap tether Core javascript -->
<script src=""app-assets/assets/plugins/bootstrap/js/popper.min.js""></script>
<script src=""app-assets/assets/plugins/bootstrap/js/bootstrap.min.js""></script>

<!-- slimscrollbar scrollbar JavaScript -->
<script src=""app-assets/js/jquery.slimscroll.js""></script>
<!--Wave Effects -->
<script src=""app-assets/js/waves.js""></script>
<!--Menu sidebar -->
<script src=""app-assets/js/sidebarmenu.js""></script>
<!--stickey kit -->
<script src=""app-assets/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js""></script>
<script src=""app-assets/assets/plugins/sparkline/jquery.sparkline.min.js""></script>

<!--Custom JavaScript -->
<script src=""app-assets/js/custom.min.js""></script>
<script src="asset('app-assets/SlimImageCropper/slim.kickstart.min.js')"></script>

<!-- Plugin JavaScript -->

<script src=""app-assets/assets/plugins/moment/moment.js""></script>
<script src=""app-assets/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js""></script>

<!-- Sweet-Alert  -->
<script src=""app-assets/assets/plugins/sweetalert/sweetalert.min.js""></script>
<script src=""app-assets/assets/plugins/sweetalert/jquery.sweet-alert.custom.js""></script>

<script src=""app-assets/assets/plugins/datatables/jquery.dataTables.min.js""></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->

<!-- ============web================================================== -->
<!-- chartist chart -->
--<script src=""app-assets/assets/plugins/chartist-js/dist/chartist.min.js""></script>--
--<script src=""app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js""></script>--
<!--c3 JavaScript -->

<!-- Date Picker Plugin JavaScript -->
<script src="'app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'"></script>

<script src=""app-assets/assets/plugins/d3/d3.min.js""></script>
<script src=""app-assets/assets/plugins/c3-master/c3.min.js""></script>
<!-- Chart JS -->
--<script src=""app-assets/js/dashboard1.js""></script>--
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src=""app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js""></script>

</body>

</html>

【问题讨论】：

【参考方案1】：

请执行ctrl+u 并检查jquery.min.js 的顺序是否在前。如果不在顶部添加此脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

在您的主文件中。

@stack('links') //after all link.
@stack('script') //after all script

在您的刀片文件中。

@push('script')
< script src=""app-assets/assets/plugins/jquery/jquery.min.js""></script >
< script src=""app-assets/assets/plugins/moment/moment.js""></script >
@endpush

@push('links')
< link href=""app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"" rel="stylesheet" >
@endpush

master.blade

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href=""app-assets/assets/images/favicon.png"">
    <title>@yield('site_title') &#124; 3orrsy</title>
    <!-- Bootstrap Core CSS -->
    <link href=""app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"" rel="stylesheet">
    <!--alerts CSS -->
    <link href=""app-assets/assets/plugins/sweetalert/sweetalert.css"" rel="stylesheet" type="text/css">
    <!-- chartist CSS -->
    <link href=""app-assets/assets/plugins/chartist-js/dist/chartist.min.css"" rel="stylesheet">
    <link href=""app-assets/assets/plugins/chartist-js/dist/chartist-init.css"" rel="stylesheet">
    <link href=""app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css""
          rel="stylesheet">
    <!--This page css - Morris CSS -->
    <link href=""app-assets/assets/plugins/c3-master/c3.min.css"" rel="stylesheet">
    <!-- Bootstrap Core CSS -->
    <link href=""app-assets/assets/plugins/bootstrap/css/bootstrap.min.css"" rel="stylesheet">
    <link href=""app-assets/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css"" rel="stylesheet">


    <!-- Date picker plugins css -->
    <link href="asset('app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')" rel="stylesheet" type="text/css" />

    <!-- Custom CSS -->
    <link href=""app-assets/css/style.css"" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href=""app-assets/css/colors/blue.css"" id="theme" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="asset('app-assets/SlimImageCropper/slim.css')">
    
    @stack('links')
</head>

<body>

<div>
// Side Menu
</div>

<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->


<script src=""app-assets/assets/plugins/jquery/jquery.min.js""></script>
<!-- Bootstrap tether Core JavaScript -->
<script src=""app-assets/assets/plugins/bootstrap/js/popper.min.js""></script>
<script src=""app-assets/assets/plugins/bootstrap/js/bootstrap.min.js""></script>

<!-- slimscrollbar scrollbar JavaScript -->
<script src=""app-assets/js/jquery.slimscroll.js""></script>
<!--Wave Effects -->
<script src=""app-assets/js/waves.js""></script>
<!--Menu sidebar -->
<script src=""app-assets/js/sidebarmenu.js""></script>
<!--stickey kit -->
<script src=""app-assets/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js""></script>
<script src=""app-assets/assets/plugins/sparkline/jquery.sparkline.min.js""></script>

<!--Custom JavaScript -->
<script src=""app-assets/js/custom.min.js""></script>
<script src="asset('app-assets/SlimImageCropper/slim.kickstart.min.js')"></script>

<!-- Plugin JavaScript -->

<script src=""app-assets/assets/plugins/moment/moment.js""></script>
<script src=""app-assets/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js""></script>

<!-- Sweet-Alert  -->
<script src=""app-assets/assets/plugins/sweetalert/sweetalert.min.js""></script>
<script src=""app-assets/assets/plugins/sweetalert/jquery.sweet-alert.custom.js""></script>

<script src=""app-assets/assets/plugins/datatables/jquery.dataTables.min.js""></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->

<!-- ============web================================================== -->
<!-- chartist chart -->
--<script src=""app-assets/assets/plugins/chartist-js/dist/chartist.min.js""></script>--
--<script src=""app-assets/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js""></script>--
<!--c3 JavaScript -->

<!-- Date Picker Plugin JavaScript -->
<script src="'app-assets/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js'"></script>

<script src=""app-assets/assets/plugins/d3/d3.min.js""></script>
<script src=""app-assets/assets/plugins/c3-master/c3.min.js""></script>
<!-- Chart JS -->
--<script src=""app-assets/js/dashboard1.js""></script>--
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src=""app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js""></script>

@stack('script')

</body>

</html>

刀片文件

@extends('layouts.master')
@section('content')
@push('links')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
@endpush


<div class="row">
    <div class="col-md-12 ">
        <div class="panel panel-default">
            <div class="panel-heading">Full Calendar Example</div>

            <div class="panel-body">
                !! $calendar->calendar() !!
            </div>
        </div>
    </div>
</div>
@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
!! $calendar->script() !!
@endpush



@endsection

【讨论】：

我正在使用 phpStorm，但什么也没发生这是一个大文件，让我检查一下是否可以发布 jQuery is not defined 你得到这个错误只是因为 jquery.min.js 没有被调用。或者你在所有脚本之后调用它。检查我已经发布了主刀片你能把<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>放在<title>标签后面吗。我只是想检查一下。

以上是关于laravel 完整日历不适用于主题 JQuery 和 Bootstrap的主要内容，如果未能解决你的问题，请参考以下文章

e.preventDefault 不适用于 laravel 5.7

猫头鹰旋转木马 2 不适用于 wordpress 星空主题

iCloud日历删除事件请求不适用于caldav

如何在 Laravel 8 中为完整的日历 JS 插件添加额外的字段值

来自网络的“添加到日历”的href 不适用于Android 6.0+ 上的本机谷歌日历应用程序

Google Calendar API 不适用于 Google Apps for Work 中的日历