Application de gestion des événements ب laravel 6 & fullcalendarjs الجزء الثالت

imadbelasri Laravel
LA

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


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


1- عرض les événements فل calendrier

باش نعرض les événements لي عندي فقاعدة البيانات فسبق وزدنا route لي كيدي ل fonction index ديال ل controller EventController و route هو events/ ولي كيرجعنا les données على شكل json.

فكيكفي باش نعطي route ل fullcalendarjs  بهاد الطريقة :

- 'events :  '/events

الكود ديال 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'
            });
            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
                                                    
                                                

2- إضافة événement عن طريق إختيار يوم أو أيام

دبا يلا مشيتي للمتصفح ودرتي تحديث غادي تلقى les événements معروضين فل calendrier دبا يلا بغينا نزيدو event كاين بزاف ديال الطرق أولها select يعني فاش كن séléctionner شي نهار أو أيام.

عندي property select لي كتوفرهالي fullcalendarjs  ولي كتاخد fonction ولي فاش كن séléctionner شي نهار أو أيام كتطلع للمستخدم واحد ل modal كيدخل فيها العنوان ديال ل événement ومنبعد كنسترجعوا هو وتاريخ البداية والنهاية وكنرسلهم لل fonction store ديال ل EventController لي كتزيدهم فقاعدة البيانات.

من بعد كنعرض رسالة نجاح وكندير تحديث للصفحة باش يبان ل event لي زدت فل calendrier.

هادشي كامل خدمناه ب ajax ممكن تخدم ب vue js يلا بغيتي.

الكود ديال 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();
                        }
                    })
                },
            });
            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
                                                        
                                                    

3- تعديل événement عن طريق السحب

عندي property eventDrop لي كتوفرهالي fullcalendarjs ولي كتاخد fonction ولي فاش كنحرك event لشي نهار آخر كنسترجعوا هو وتاريخ البداية والنهاية الجديد وكنرسلهم لل fonction update ديال ل EventController لي كتدير التعديل والقيم الجديدة كتزيدهم فقاعدة البيانات.

من بعد كنعرض رسالة نجاح التعديل.

الكود ديال 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
                            });
                        }
                    })
                },
            });
            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
                                                        
                                                    

4- تعديل événement عن طريق إضافة أو حذف أيام

عندي property eventResize لي كتوفرهالي fullcalendarjs ولي كتاخد fonction ولي فاش كنزيد أيام أو كنقصها من event كنسترجعوا هو وتاريخ البداية والنهاية الجديد وكنرسلهم لل fonction update ديال ل EventController لي كتدير التعديل والقيم الجديدة كتزيدهم فقاعدة البيانات.

من بعد كنعرض رسالة نجاح التعديل.

الكود ديال 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
                            });
                        }
                    })
                }
            });
            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