I'm using Laravel Backpack 4.1 for my project. On my Dashboard page I'm using several jQuery plugins such as:

• bootstrap-daterangepicker
• select2

They are working fine for me.

Now I want to empliment FullCalendar jQuery plugin. All I want to do is showing calendar events. The problem is that controls are not working in the calendar (I can not switch between months, can not switch betwee layouts (month, week, day) etc.). If calenrad events are in the current month the are displayd properly.

No any errors on browser console.

I'm using this plugin in my another project (Lalavel, but not Backpack) and everything is OK.

By the way, jQuery plugin ChartJs not working too and not generates any console errors (charts appears for a second and disapperars).

May it be conflicts with enternal Backpack's js-files? Has anyone met this problem?

My pretty simple view file (resources/views/vendor/backpack/base/dashboard.blade.php):

@extends(backpack_view('blank'))

@section('content')
    <div class="card">
        <div class="card-header">
            <h4>Bookings calendar</h4>
        </div>
        <div class="card-body">
            <div id='calendar'></div>
        </div>
    </div>
@endsection

@section('after_styles')
    <link href="{{ asset('packages/fullcalendar/main.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('after_scripts')
    <script src="{{ asset('packages/fullcalendar/main.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let calendarEl = document.getElementById('calendar');

            let calendar = new FullCalendar.Calendar(calendarEl, {
                initialDate: "2022-03-01",
                events: {!! $bookingsForCalendar !!}
            });

            calendar.render();
        });
    </script>
@endsection

Screenshot:

EDIT: the reason is my VueJS application. Question can by closed.