Application de gestion des événements ب laravel 6 & fullcalendarjs الجزء الرابع والأخير


فهاد الجزء الرابع والاخير من Application de gestion des événements ب laravel 6 & fullcalendarjs غادي نشوفوا كيفاش نعرضوا تفاصيل événement ضغطنا عليه وأخيرا غادي نشوفوا كيفاش نحذفوا événement إختاريناه وممكن انك تزيد أشياء أخرى من عندك فل application قابلة للتطوير ولإضافة خصائص جديدة.

نظرة سريعة بالفيديو


1- عرض événement ضغطنا عليه


سبق وزدنا فل fonction show الكود لي كيرجع événement ب title ديالو ومنبعد كنرسلوه للملف show.blade.php المكلف بالعرض ديالو.

دبا غادي نزيدو الملف ديالنا ف dossier views ولي غادي يكون فيه الكود لي كيعرض تفاصيل événement.

الكود ديال الملف show.blade.php هو :

                                    
                                        @extends('layouts.main')

@section('content')
    <div class="row">
        <div class="col-md-8 mx-auto my-4">
            <div class="card">
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <span class="text-primary font-weight-bold">Titre : {{$event->title}}</span>
                        </li>
                        <li class="list-group-item">
                            <span class="text-success font-weight-bold">Date début : {{$event->start_date}}</span>
                        </li>
                        <li class="list-group-item">
                            <span class="text-danger font-weight-bold">Date fin : {{$event->end_date}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection
                                    
                                

2- عرض événement ضغطنا عليه تتمة و حذف événement


عندي property eventClick لي كتوفرهالي fullcalendarjs ولي كتاخد fonction ولي فاش كنضغط على event  كنعرض modal فيها إختيارين إما مشهادة ال événement أو حذفه يلا إختاريت المشاهدة كنسترجع العنوان وكنرسلوا لل fonction show ديال ل EventController لي كتوجهني للملف الخاص بعرض événement.

أما يلا إختاريت الحذف كنسترجع العنوان وكنرسلوا لل fonction destroy ديال ل EventController لي كتحذف ل événement وكنعرض رسالة نجاح.

الكود النهائي ديال home.balde.php  هو  :

                                    
                                        @extends('layouts.main')

@section('content')
    <div class="row">
        <div class="col-md-10 mx-auto my-4">
            <div id='calendar'></div>  
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');//your dive id of calendar
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'interaction', 'dayGrid' ],
                header: {
                    left: 'prevYear,prev,next,nextYear today',
                    center: 'title',
                    right: 'dayGridMonth,dayGridWeek,dayGridDay'
                },
                defaultDate: '{{ date('Y-m-d') }}',
                navLinks: true, // can click day/week names to navigate views
                editable: true,
                selectable: true,
                eventLimit: true, // allow "more" link when too many events
                events :  '/events',
                select : function(selectionInfo){
                    let title = prompt("Veuillez entrer le titre de l'événement ");
                    let formatted_start_date = selectionInfo.start.getFullYear() + "-" + (selectionInfo.start.getMonth() + 1) + "-" + selectionInfo.start.getDate() + " " + selectionInfo.start.getHours() + ":" + selectionInfo.start.getMinutes() + ":" + selectionInfo.start.getSeconds();
                    let formatted_end_date = selectionInfo.end.getFullYear() + "-" + (selectionInfo.end.getMonth() + 1) + "-" + selectionInfo.end.getDate() + " " + selectionInfo.end.getHours() + ":" + selectionInfo.end.getMinutes() + ":" + selectionInfo.end.getSeconds();
                    $.ajaxSetup({
                        headers : {
                            'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type : 'POST',
                        url : '/events',
                        data : {
                            title : title,
                            start : formatted_start_date,
                            end : formatted_end_date
                        },
                        success : function(){
                            Swal.fire({
                                position : 'center',
                                icon : 'success',
                                title : 'Evénement Ajouté',
                                showConfirmationButton : false,
                                timer : 1500
                            });
                            location.reload();
                        }
                    })
                },
                eventDrop : function(info){
                    let formatted_start_date = info.event.start.getFullYear() + "-" + (info.event.start.getMonth() + 1) + "-" + info.event.start.getDate() + " " + info.event.start.getHours() + ":" + info.event.start.getMinutes() + ":" + info.event.start.getSeconds();
                    let formatted_end_date = info.event.end.getFullYear() + "-" + (info.event.end.getMonth() + 1) + "-" + info.event.end.getDate() + " " + info.event.end.getHours() + ":" + info.event.end.getMinutes() + ":" + info.event.end.getSeconds();
                    $.ajaxSetup({
                        headers : {
                            'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type : 'PUT',
                        url : '/events/' + info.event.title,
                        data : {
                            start : formatted_start_date,
                            end : formatted_end_date
                        },
                        success : function(){
                            Swal.fire({
                                position : 'center',
                                icon : 'success',
                                title : 'Evénement modifié',
                                showConfirmationButton : false,
                                timer : 1500
                            });
                        }
                    })
                },
                eventResize : function(eventResizeInfo){
                    let formatted_start_date = eventResizeInfo.event.start.getFullYear() + "-" + (eventResizeInfo.event.start.getMonth() + 1) + "-" + eventResizeInfo.event.start.getDate() + " " + eventResizeInfo.event.start.getHours() + ":" + eventResizeInfo.event.start.getMinutes() + ":" + eventResizeInfo.event.start.getSeconds();
                    let formatted_end_date = eventResizeInfo.event.end.getFullYear() + "-" + (eventResizeInfo.event.end.getMonth() + 1) + "-" + eventResizeInfo.event.end.getDate() + " " + eventResizeInfo.event.end.getHours() + ":" + eventResizeInfo.event.end.getMinutes() + ":" + eventResizeInfo.event.end.getSeconds();
                    $.ajaxSetup({
                        headers : {
                            'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type : 'PUT',
                        url : '/events/' + eventResizeInfo.event.title,
                        data : {
                            start : formatted_start_date,
                            end : formatted_end_date
                        },
                        success : function(){
                            Swal.fire({
                                position : 'center',
                                icon : 'success',
                                title : 'Evénement modifié',
                                showConfirmationButton : false,
                                timer : 1500
                            });
                        }
                    })
                },
                eventClick : function(info){
                    const swalWithBootstrapButtons = Swal.mixin({
                        customClass: {
                            confirmButton: 'btn btn-info',
                            cancelButton: 'btn btn-danger'
                        },
                        buttonsStyling: false
                    })

                    swalWithBootstrapButtons.fire({
                            title: 'Veuillez choisir une action :',
                            icon: 'info',
                            showCancelButton: true,
                            confirmButtonText: 'Voir',
                            cancelButtonText: 'Supprimer',
                            reverseButtons: false
                    }).then((result) => {
                            if (result.value) {
                                //
                                const link = `http://127.0.0.1:8000/events/${info.event.title}`;
                                window.location.href = link;
                            } else{
                                $.ajaxSetup({
                                    headers : {
                                        'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                                    }
                                });
                                $.ajax({
                                    type : 'DELETE',
                                    url : '/events/' + info.event.title,
                                    success : function(){
                                        Swal.fire({
                                            position : 'center',
                                            icon : 'success',
                                            title : 'Evénement Supprimé',
                                            showConfirmationButton : false,
                                            timer : 1500
                                        });
                                        location.reload();
                                    }
                                })
                            }
                        })
                },
            });
            calendar.setOption('locale', 'fr');           
            calendar.render();
            document.querySelector('.fc-dayGridMonth-button').innerHTML = "Mois";
            document.querySelector('.fc-dayGridWeek-button').innerHTML = "Semaine";
            document.querySelector('.fc-dayGridDay-button').innerHTML = "Jour";
            document.querySelector('.fc-today-button').innerHTML = "Ajourd'hui";
        });
    </script>
@endsection
                                    
                                

كلمات مفاتيح :