Skip to content
Advertisement

code event[] calendar in laravel 8 not working

I created a calendar with laravel 8 and PHP 8,it is running ok in php 7 but I have to upgrade to php 8 because of the demands of the times I have successfully saved data in the database but the data in mysql does not appear in the calendar, even though I have used event[], I have checked that the data from mysql can come out but the data does not appear in the calendar, I can’t find error message, I sent my code for you to check, please help me, thx

K_JadwalController

public function index()
    {
        $data = K_Jadwal::all();
        return view('kkalender.index', compact('data'));
    }

index.blade.php

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kalender | Inform</title>
    <meta name="csrf-token" content="{{ csrf_token() }}" />

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ asset('AdminLte/plugins/fontawesome-free/css/all.min.css') }}">
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('AdminLte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet"
        href="{{ asset('AdminLte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('AdminLte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{ asset('AdminLte/dist/css/adminlte.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/fullcalendar/css/fullcalendar.min.css') }}">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />

</head>

<body>
<section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Daftar Data Kalender</h3>
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <div id="calendar">


                                    </div>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <!-- /.card -->

                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container-fluid -->
            </section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
    </script>
    <script>
        $(document).ready(function() {

            var SITEURL = "{{ url('/') }}";

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            

            var bg_task = ["bg-teal", "bg-purple", "bg-warning", "bg-muted",
                "bg-primary", "bg-success", "bg-brown", "bg-pink", "bg-info"
            ];
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev, next today',
                    center: 'title',
                    right: 'month, agendaWeek, agendaDay',
                },
                editable: true,
                events: "{{ route('kkalender.index') }}",
                displayEventTime: true,
                eventRender: function(event, element, view) {
                    if (event.allDay === 'true') {
                        event.allDay = true;
                    } else {
                        event.allDay = false;
                    }
                },

                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    $('#dari').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
                    $('#sampai').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
                    $('#addModal').modal('toggle');

                },
                eventDrop: function(event, delta) {
                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD");
                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD");

                    $.ajax({
                        url: SITEURL + '/fullcalenderAjax',
                        data: {
                            title: event.title,
                            start: start,
                            end: end,
                            id: event.id,
                            type: 'update'
                        },
                        type: "POST",
                        success: function(response) {
                            displayMessage("Event Updated Successfully");
                        }
                    });
                },

                events: [
                    @foreach ($data as $value)
                        {
                            kategori: '{{ $value->kategori }}',
                            judul: '{{ $value->judul }}',
                            dari: '{{ $value->dari }}',
                            sampai: '{{ $value->sampai }}',
                            className: bg_task[Math.floor(Math.random() * bg_task.length)],
                        },
                    @endforeach
                ],

                eventClick: function(event) {
                    var deleteMsg = confirm("Do you really want to delete?");
                    if (deleteMsg) {
                        $.ajax({
                            type: "POST",
                            url: SITEURL + '/fullcalenderAjax',
                            data: {
                                id: event.id,
                                type: 'delete'
                            },
                            success: function(response) {
                                calendar.fullCalendar('removeEvents', event.id);
                                displayMessage("Event Deleted Successfully");
                            }
                        });
                    }
                }

            });

        });

        function displayMessage(message) {
            toastr.success(message, 'Event');
        }
    </script>
</body>

this is my route

Route::get('/kkalender', [K_JadwalController::class ,'index']);

your help means a lot to me, thx

Advertisement

Answer

I have got the answer, I hope it helps if you want to make a calendar in Laravel

my controller :

public function store(Request $request)
    {
        $model = new K_Jadwal;
        $model->kategori = $request->kategori;
        $model->judul = $request->judul;
        $model->keterangan = $request->keterangan;
        $model->dari = $request->dari;
        $model->sampai = $request->sampai;
        $model->save();
        
        return redirect('kkalender');
    }

public function ajax(Request $request)
    {
 
        switch ($request->type) {
           case 'delete':
              $event = K_Jadwal::find($request->id)->delete();
  
              return response()->json($event);
             break;
             
           default:
             # code...
             break;
        }
    }

my index.blade.php :

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Asset | Inform</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ asset('AdminLte/plugins/fontawesome-free/css/all.min.css') }}">
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('AdminLte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet"
        href="{{ asset('AdminLte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('AdminLte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{ asset('AdminLte/dist/css/adminlte.min.css') }}">
    <link href="{{ URL::asset('assets/plugins/fullcalendar/css/fullcalendar.min.css') }}" rel="stylesheet" />
</head>

<body>
<div class="card-body">
                                    <div class="row clearfix">
                                        <div id='calendar'></div>

                                        <div style='clear:both'></div>
                                        <br>

                                    </div>
                                    <!-- /.card-body -->
                                </div>
</body>
<script src="{{ URL::asset('assets/plugins/moment/moment.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fullcalendar/js/fullcalendar.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/pages/calendar-init.js') }}"></script> -->
    <script>
        $(document).ready(function() {
            // alert("hai");
            var SITEURL = "{{ url('/kkalender') }}";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            /*  className colors

             className: default(transparent), important(red), chill(pink), success(green), info(blue)

             */


            /* initialize the external events
             -----------------------------------------------------------------*/

            $('#external-events div.external-event').each(function() {

                // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                // it doesn't need to have a start or end
                var eventObject = {
                    title: $.trim($(this).text()) // use the element's text as the event title
                };

                // store the Event Object in the DOM element so we can get to it later
                $(this).data('eventObject', eventObject);

                // make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex: 999,
                    revert: true, // will cause the event to go back to its
                    revertDuration: 0 //  original position after the drag
                });

            });


            /* initialize the calendar
             -----------------------------------------------------------------*/
            var bg_task = ["bg-teal", "bg-purple", "bg-warning", "bg-muted",
                "bg-primary", "bg-success", "bg-brown", "bg-pink", "bg-info"
            ];
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'title',
                    center: 'agendaDay,agendaWeek,month',
                    right: 'prev,next today'
                },
                editable: true,
                firstDay: 0, //  1(Monday) this can be changed to 0(Sunday) for the USA system
                selectable: true,
                defaultView: 'month',
                fixedWeekCount: false,
                aspectRatio: 2.2,
                axisFormat: 'h:mm',
                columnFormat: {
                    month: 'ddd', // Mon
                    week: 'ddd d', // Mon 7
                    day: 'dddd M/d', // Monday 9/7
                    agendaDay: 'dddd d'
                },
                titleFormat: {
                    month: 'MMMM YYYY', // September 2009
                    week: "MMMM YYYY", // September 2009
                    day: 'MMMM YYYY' // Tuesday, Sep 8, 2009
                },
                allDaySlot: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    $('#from_Datetime').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
                    $('#to_Datetime').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
                    $('#addModal').modal();

                    var title = $('#title').val();
                    $("#course_add").click(function() {
                        if (title) {
                            calendar.fullCalendar('renderEvent', {
                                    title: title,
                                    batch: batch,
                                    language: language,
                                    level: level,
                                    partner: partner,
                                    start: start,
                                    end: end,
                                    allDay: allDay
                                },
                                true // make the event "stick"
                            );
                        }
                    });

                    calendar.fullCalendar('unselect');
                },
                droppable: true, // this allows things to be dropped onto the calendar !!!
                drop: function(date, allDay) { // this function is called when something is dropped

                    // retrieve the dropped element's stored Event Object
                    var originalEventObject = $(this).data('eventObject');

                    // we need to copy it, so that multiple events don't have a reference to the same object
                    var copiedEventObject = $.extend({}, originalEventObject);

                    // assign it the date that was reported
                    copiedEventObject.start = date;
                    copiedEventObject.allDay = allDay;

                    // render the event on the calendar
                    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                    // is the "remove after drop" checkbox checked?
                    if ($('#drop-remove').is(':checked')) {
                        // if so, remove the element from the "Draggable Events" list
                        $(this).remove();
                    }

                },

                events: [
                    @foreach ($data as $course)
                        {
                            id: '{{ $course->id }}',
                            title: '{{ $course->kategori }}',
                            partner: '{{ $course->judul }}',
                            batch: '{{ $course->keterangan }}',
                            start: '{{ $course->dari }}',
                            end: '{{ $course->sampai }}',
                            className: bg_task[Math.floor(Math.random() * bg_task.length)],
                        },
                    @endforeach
                ],

                eventClick: function(event) {
                    var deleteMsg = confirm("Do you really want to delete?");
                    if (deleteMsg) {
                        $.ajax({
                            type: "POST",
                            url: SITEURL + '/fullcalenderAjax',
                            data: {
                                id: event.id,
                                type: 'delete'
                            },
                            success: function(response) {
                                calendar.fullCalendar('removeEvents', event.id);
                                displayMessage("Event Deleted Successfully");
                            }
                        });
                    }
                }

            });


        });
    </script>
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ url('kkalender/') }}" enctype="multipart/form-data">
                        @csrf
                        <div>
                            <div class="form-group">
                                <label>Kategori</label>
                            </div>
                        </div>
                        <div>
                            <div class="form-group">
                                <input type="text" name="kategori" class="form-control" placeholder="Info kategori"
                                    id="kategori" value="{{ old('kategori') }}">
                                @foreach ($errors->get('kategori') as $msg)
                                    <p class="text-danger">{{ $msg }}
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <div class="form-group">
                                <label>Judul</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" name="judul" class="form-control" placeholder="judul"
                                    id="judul" value="{{ old('judul') }}">
                                @foreach ($errors->get('judul') as $msg)
                                    <p class="text-danger">{{ $msg }}
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <div class="form-group">
                                <label>Keterangan</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" name="keterangan" class="form-control" placeholder="keterangan"
                                    id="keterangan" value="{{ old('keterangan') }}">
                                @foreach ($errors->get('keterangan') as $msg)
                                    <p class="text-danger">{{ $msg }}
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <div class="form-group">
                                <label>Waktu Dari</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="datetime-local" name="dari" class="form-control" placeholder="dari"
                                    id="dari" value="{{ old('dari') }}">
                                @foreach ($errors->get('dari') as $msg)
                                    <p class="text-danger">{{ $msg }}
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <div class="form-group">
                                <label>Waktu Sampai</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="datetime-local" name="sampai" class="form-control" placeholder="sampai"
                                    id="sampai" value="{{ old('sampai') }}">
                                @foreach ($errors->get('sampai') as $msg)
                                    <p class="text-danger">{{ $msg }}
                                    </p>
                                @endforeach
                            </div>
                        </div>
                        <br>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        &nbsp;&nbsp;&nbsp;
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

my route :

Route::resource('/kkalender', K_JadwalController::class);
Route::post('/kkalender/fullcalenderAjax', [K_JadwalController::class, 'ajax']);

thanks