堆栈内存溢出
  繁体   English   中英

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

[英]laravel full calendar not working with theme JQuery and Bootstrap

 原文  2019-07-27 15:32:46  7   1    javascript/ jquery/ laravel/ laravel-5/ bootstrap-4

问题描述

我正在使用 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 >

它向我显示控制台错误

未捕获的 ReferenceError：未定义 jQuery

未捕获的 ReferenceError: $ 未定义

刀刃：

@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 个解决方案

解决方案1
 1 已采纳  2019-07-27 15:37:54

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

主刀片

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 引导模态不适用于完整日历中的eventClick功能 使用PHP的Bootstrap模式在jQuery Full Calendar中添加事件 jquery完整的日历 Laravel中的Vue引导日历 Ajax无法使用完整日历 单元格上的BootStrap完整日历CSS 完整日历和Laravel加载错误 Bootstrap jQuery日历 jQuery Full Calendar更新/过滤日历 JS，jQuery，完整日历，学生
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM