I am using laravel full calender package maddhatter/laravel-fullcalendar. This package is not picking up my theme bootstrap I have included all these in master blade and extends in this blade. I if change bootstrap then calendar works but all others things which are working on theme jquery and bootstrap stops working.
I have posted image which shows bootstrap is not working with theme. I am using theme which have bootstrap 4.
Calendar Image issue http://mashghol.com/3orrsy/public/images/Event_Images/1564260848Calendarissue.jpg
Blade:
@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
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') | 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="">
@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=""></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>--}}
"></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>
@stack('script')
</body>
</html>
[1]: https://i.stack.imgur.com/8mgIb.jpg
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire