How to add calendar using fullcalendar js in content section blade

I want to create a booking list using full calendar js, but I have a problem that makes the calendar not appear.

enter image description here

This is the code I used..

@extends('layouts.main')

@section('konten')
    <div class="konten-layout py-3 px-2">
        <div class="text-center mb-10">
            <h2 class="font-semibold text-lg lg:text-2xl">Daftar Pesanan</h2>
        </div>
        <div class="my-10 lg:px-10">
            <span>
                <a class="bg-primary text-white px-2 py-1 rounded-lg hover:bg-primary/50"
                   href="/pesan-lapangan/create/{{auth()->user()->id}}">
                    Pesanan Baru +
                </a>
            </span>
        </div>
        <div class="px-[2px] lg:px-10 mb-[100px] lg:mb-[143px]">
            <!-- Elemen kalender -->
            <div id="calendar"></div>
        </div>
    </div>
@endsection

@section('scripts')
    <!-- FullCalendar CSS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['dayGrid', 'interaction'],
                initialView: 'dayGridMonth',
                events: [
                    @foreach ($pesanan as $psn)
                        {
                            title: '{{ $psn->kode . $psn->numInvoice }} - {{ $psn->status == "1" ? "Belum Bayar" : ($psn->status == "2" ? "Sedang diproses" : ($psn->status == "3" ? "Berhasil" : "Gagal")) }}',
                            start: '{{ $psn->tanggal }}',
                            url: '{{ $psn->status == "1" ? "/pesan-lapangan/konfirmasi-pembayaran/" . $psn->numInvoice : "/detail-pesanan/" . $psn->numInvoice }}',
                            backgroundColor: '{{ $psn->status == "1" ? "#fbbf24" : ($psn->status == "2" ? "#94a3b8" : ($psn->status == "3" ? "#14b8a6" : "#f87171")) }}',
                            borderColor: '#ffffff',
                        },
                    @endforeach
                ],
                dateClick: function (info) {
                    alert('Anda mengklik tanggal: ' + info.dateStr);
                },
            });

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

I have followed various tutorials but the problem is still not solved. Can anyone tell me where my mistake is

I want to use the calendar in the content section to display the order list, please help me