samedi 27 juillet 2019

laravel full calendar not working with theme JQuery and Bootstrap

I am using laravel full calender package maddhatter/laravel-fullcalendar. This package is not picking up my theme jquery, bootstrap and moment. I have included all these in master blade and extends in this blade. I if change query and bootstrap then calendar works but all others things which are working on theme jquery and bootstrap stops working.

Including these in master blade:

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

It shows me console error that

Uncaught ReferenceError: jQuery is not defined

Uncaught ReferenceError: $ is not defined

Blade:

@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  


My Controller:

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]);
}

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="" 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="">
    <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=""></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>--}}
"></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>--}}
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="app-assets/assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>

</body>

</html>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire