CODEWITHSUNDEEP
javascripthtmlfullcalendarlaravel-blade
Irvan Fadillah
Irvan Fadillah

Reputation: 1

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

Upvotes: 0

Views: 44

Answers (1)

ADyson
ADyson

Reputation: 61784

You can just remove

plugins: ['dayGrid', 'interaction']

This line is not needed when you are loading fullCalendar with script tags - any plugins you want to use can either be included in your main global bundle JS file, or added via separate <script tags.

The plugins option is only used when you are loading fullCalendar via an ES6 build system or as an ESM module.

This mistake usually causes an error such as

Uncaught TypeError: e is not iterable

which should be visible in your browser's console. In your question you did not mention whether you had checked the console for errors, or what you saw there. This should always be the first thing to do when you have problems with JavaScript code, and it's important information to share when asking a question about a problem with some JavaScript code.

Upvotes: 0

Related Questions