Application de gestion des événements ب laravel 6 & fullcalendarjs الجزء الثالت
فهاد الجزء الثالت من 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