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
JavaScript
x
6
1
public function index()2
{3
$data = K_Jadwal::all();4
return view('kkalender.index', compact('data'));5
}6
index.blade.php
JavaScript
1
165
165
1
<head>2
<meta charset="utf-8">3
<meta name="viewport" content="width=device-width, initial-scale=1">4
<title>Kalender | Inform</title>5
<meta name="csrf-token" content="{{ csrf_token() }}" />6
7
<!-- Google Font: Source Sans Pro -->8
<link rel="stylesheet"9
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">10
<!-- Font Awesome -->11
<link rel="stylesheet" href="{{ asset('AdminLte/plugins/fontawesome-free/css/all.min.css') }}">12
<!-- DataTables -->13
<link rel="stylesheet" href="{{ asset('AdminLte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">14
<link rel="stylesheet"15
href="{{ asset('AdminLte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">16
<link rel="stylesheet" href="{{ asset('AdminLte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">17
<!-- Theme style -->18
<link rel="stylesheet" href="{{ asset('AdminLte/dist/css/adminlte.min.css') }}">19
<link rel="stylesheet" href="{{ asset('plugins/fullcalendar/css/fullcalendar.min.css') }}">20
21
<meta name="csrf-token" content="{{ csrf_token() }}">22
23
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />24
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>25
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />26
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>27
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>28
29
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>30
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />31
32
</head>33
34
<body>35
<section class="content">36
<div class="container-fluid">37
<div class="row">38
<div class="col-12">39
<div class="card">40
<div class="card-header">41
<h3 class="card-title">Daftar Data Kalender</h3>42
</div>43
<!-- /.card-header -->44
<div class="card-body">45
<div id="calendar">46
47
48
</div>49
</div>50
<!-- /.card-body -->51
</div>52
<!-- /.card -->53
54
</div>55
<!-- /.col -->56
</div>57
<!-- /.row -->58
</div>59
<!-- /.container-fluid -->60
</section>61
62
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"63
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">64
</script>65
<script>66
$(document).ready(function() {67
68
var SITEURL = "{{ url('/') }}";69
70
$.ajaxSetup({71
headers: {72
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')73
}74
});75
76
77
78
var bg_task = ["bg-teal", "bg-purple", "bg-warning", "bg-muted",79
"bg-primary", "bg-success", "bg-brown", "bg-pink", "bg-info"80
];81
var calendar = $('#calendar').fullCalendar({82
header: {83
left: 'prev, next today',84
center: 'title',85
right: 'month, agendaWeek, agendaDay',86
},87
editable: true,88
events: "{{ route('kkalender.index') }}",89
displayEventTime: true,90
eventRender: function(event, element, view) {91
if (event.allDay === 'true') {92
event.allDay = true;93
} else {94
event.allDay = false;95
}96
},97
98
selectable: true,99
selectHelper: true,100
select: function(start, end, allDay) {101
$('#dari').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));102
$('#sampai').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));103
$('#addModal').modal('toggle');104
105
},106
eventDrop: function(event, delta) {107
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD");108
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD");109
110
$.ajax({111
url: SITEURL + '/fullcalenderAjax',112
data: {113
title: event.title,114
start: start,115
end: end,116
id: event.id,117
type: 'update'118
},119
type: "POST",120
success: function(response) {121
displayMessage("Event Updated Successfully");122
}123
});124
},125
126
events: [127
@foreach ($data as $value)128
{129
kategori: '{{ $value->kategori }}',130
judul: '{{ $value->judul }}',131
dari: '{{ $value->dari }}',132
sampai: '{{ $value->sampai }}',133
className: bg_task[Math.floor(Math.random() * bg_task.length)],134
},135
@endforeach136
],137
138
eventClick: function(event) {139
var deleteMsg = confirm("Do you really want to delete?");140
if (deleteMsg) {141
$.ajax({142
type: "POST",143
url: SITEURL + '/fullcalenderAjax',144
data: {145
id: event.id,146
type: 'delete'147
},148
success: function(response) {149
calendar.fullCalendar('removeEvents', event.id);150
displayMessage("Event Deleted Successfully");151
}152
});153
}154
}155
156
});157
158
});159
160
function displayMessage(message) {161
toastr.success(message, 'Event');162
}163
</script>164
</body>165
this is my route
JavaScript
1
2
1
Route::get('/kkalender', [K_JadwalController::class ,'index']);2
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 :
JavaScript
1
29
29
1
public function store(Request $request)2
{3
$model = new K_Jadwal;4
$model->kategori = $request->kategori;5
$model->judul = $request->judul;6
$model->keterangan = $request->keterangan;7
$model->dari = $request->dari;8
$model->sampai = $request->sampai;9
$model->save();10
11
return redirect('kkalender');12
}13
14
public function ajax(Request $request)15
{16
17
switch ($request->type) {18
case 'delete':19
$event = K_Jadwal::find($request->id)->delete();20
21
return response()->json($event);22
break;23
24
default:25
# code...26
break;27
}28
}29
my index.blade.php :
JavaScript
1
294
294
1
<head>2
<meta charset="utf-8">3
<meta name="viewport" content="width=device-width, initial-scale=1">4
<title>Asset | Inform</title>5
<meta name="csrf-token" content="{{ csrf_token() }}">6
<link rel="stylesheet"7
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">8
<!-- Font Awesome -->9
<link rel="stylesheet" href="{{ asset('AdminLte/plugins/fontawesome-free/css/all.min.css') }}">10
<!-- DataTables -->11
<link rel="stylesheet" href="{{ asset('AdminLte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">12
<link rel="stylesheet"13
href="{{ asset('AdminLte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">14
<link rel="stylesheet" href="{{ asset('AdminLte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">15
<!-- Theme style -->16
<link rel="stylesheet" href="{{ asset('AdminLte/dist/css/adminlte.min.css') }}">17
<link href="{{ URL::asset('assets/plugins/fullcalendar/css/fullcalendar.min.css') }}" rel="stylesheet" />18
</head>19
20
<body>21
<div class="card-body">22
<div class="row clearfix">23
<div id='calendar'></div>24
25
<div style='clear:both'></div>26
<br>27
28
</div>29
<!-- /.card-body -->30
</div>31
</body>32
<script src="{{ URL::asset('assets/plugins/moment/moment.js') }}"></script>33
<script src="{{ URL::asset('assets/plugins/fullcalendar/js/fullcalendar.min.js') }}"></script>34
<!-- <script src="{{ URL::asset('assets/pages/calendar-init.js') }}"></script> -->35
<script>36
$(document).ready(function() {37
// alert("hai");38
var SITEURL = "{{ url('/kkalender') }}";39
$.ajaxSetup({40
headers: {41
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')42
}43
});44
45
var date = new Date();46
var d = date.getDate();47
var m = date.getMonth();48
var y = date.getFullYear();49
50
/* className colors51
52
className: default(transparent), important(red), chill(pink), success(green), info(blue)53
54
*/55
56
57
/* initialize the external events58
-----------------------------------------------------------------*/59
60
$('#external-events div.external-event').each(function() {61
62
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)63
// it doesn't need to have a start or end64
var eventObject = {65
title: $.trim($(this).text()) // use the element's text as the event title66
};67
68
// store the Event Object in the DOM element so we can get to it later69
$(this).data('eventObject', eventObject);70
71
// make the event draggable using jQuery UI72
$(this).draggable({73
zIndex: 999,74
revert: true, // will cause the event to go back to its75
revertDuration: 0 // original position after the drag76
});77
78
});79
80
81
/* initialize the calendar82
-----------------------------------------------------------------*/83
var bg_task = ["bg-teal", "bg-purple", "bg-warning", "bg-muted",84
"bg-primary", "bg-success", "bg-brown", "bg-pink", "bg-info"85
];86
var calendar = $('#calendar').fullCalendar({87
header: {88
left: 'title',89
center: 'agendaDay,agendaWeek,month',90
right: 'prev,next today'91
},92
editable: true,93
firstDay: 0, // 1(Monday) this can be changed to 0(Sunday) for the USA system94
selectable: true,95
defaultView: 'month',96
fixedWeekCount: false,97
aspectRatio: 2.2,98
axisFormat: 'h:mm',99
columnFormat: {100
month: 'ddd', // Mon101
week: 'ddd d', // Mon 7102
day: 'dddd M/d', // Monday 9/7103
agendaDay: 'dddd d'104
},105
titleFormat: {106
month: 'MMMM YYYY', // September 2009107
week: "MMMM YYYY", // September 2009108
day: 'MMMM YYYY' // Tuesday, Sep 8, 2009109
},110
allDaySlot: true,111
selectHelper: true,112
select: function(start, end, allDay) {113
$('#from_Datetime').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));114
$('#to_Datetime').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));115
$('#addModal').modal();116
117
var title = $('#title').val();118
$("#course_add").click(function() {119
if (title) {120
calendar.fullCalendar('renderEvent', {121
title: title,122
batch: batch,123
language: language,124
level: level,125
partner: partner,126
start: start,127
end: end,128
allDay: allDay129
},130
true // make the event "stick"131
);132
}133
});134
135
calendar.fullCalendar('unselect');136
},137
droppable: true, // this allows things to be dropped onto the calendar !!!138
drop: function(date, allDay) { // this function is called when something is dropped139
140
// retrieve the dropped element's stored Event Object141
var originalEventObject = $(this).data('eventObject');142
143
// we need to copy it, so that multiple events don't have a reference to the same object144
var copiedEventObject = $.extend({}, originalEventObject);145
146
// assign it the date that was reported147
copiedEventObject.start = date;148
copiedEventObject.allDay = allDay;149
150
// render the event on the calendar151
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)152
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);153
154
// is the "remove after drop" checkbox checked?155
if ($('#drop-remove').is(':checked')) {156
// if so, remove the element from the "Draggable Events" list157
$(this).remove();158
}159
160
},161
162
events: [163
@foreach ($data as $course)164
{165
id: '{{ $course->id }}',166
title: '{{ $course->kategori }}',167
partner: '{{ $course->judul }}',168
batch: '{{ $course->keterangan }}',169
start: '{{ $course->dari }}',170
end: '{{ $course->sampai }}',171
className: bg_task[Math.floor(Math.random() * bg_task.length)],172
},173
@endforeach174
],175
176
eventClick: function(event) {177
var deleteMsg = confirm("Do you really want to delete?");178
if (deleteMsg) {179
$.ajax({180
type: "POST",181
url: SITEURL + '/fullcalenderAjax',182
data: {183
id: event.id,184
type: 'delete'185
},186
success: function(response) {187
calendar.fullCalendar('removeEvents', event.id);188
displayMessage("Event Deleted Successfully");189
}190
});191
}192
}193
194
});195
196
197
});198
</script>199
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">200
<div class="modal-dialog">201
<div class="modal-content">202
<div class="modal-header">203
<h5 class="modal-title" id="exampleModalLabel">Modal title204
</h5>205
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>206
</div>207
<div class="modal-body">208
<form method="POST" action="{{ url('kkalender/') }}" enctype="multipart/form-data">209
@csrf210
<div>211
<div class="form-group">212
<label>Kategori</label>213
</div>214
</div>215
<div>216
<div class="form-group">217
<input type="text" name="kategori" class="form-control" placeholder="Info kategori"218
id="kategori" value="{{ old('kategori') }}">219
@foreach ($errors->get('kategori') as $msg)220
<p class="text-danger">{{ $msg }}221
</p>222
@endforeach223
</div>224
</div>225
<div>226
<div class="form-group">227
<label>Judul</label>228
</div>229
</div>230
<div class="col-md-12">231
<div class="form-group">232
<input type="text" name="judul" class="form-control" placeholder="judul"233
id="judul" value="{{ old('judul') }}">234
@foreach ($errors->get('judul') as $msg)235
<p class="text-danger">{{ $msg }}236
</p>237
@endforeach238
</div>239
</div>240
<div>241
<div class="form-group">242
<label>Keterangan</label>243
</div>244
</div>245
<div class="col-md-12">246
<div class="form-group">247
<input type="text" name="keterangan" class="form-control" placeholder="keterangan"248
id="keterangan" value="{{ old('keterangan') }}">249
@foreach ($errors->get('keterangan') as $msg)250
<p class="text-danger">{{ $msg }}251
</p>252
@endforeach253
</div>254
</div>255
<div>256
<div class="form-group">257
<label>Waktu Dari</label>258
</div>259
</div>260
<div class="col-md-12">261
<div class="form-group">262
<input type="datetime-local" name="dari" class="form-control" placeholder="dari"263
id="dari" value="{{ old('dari') }}">264
@foreach ($errors->get('dari') as $msg)265
<p class="text-danger">{{ $msg }}266
</p>267
@endforeach268
</div>269
</div>270
<div>271
<div class="form-group">272
<label>Waktu Sampai</label>273
</div>274
</div>275
<div class="col-md-12">276
<div class="form-group">277
<input type="datetime-local" name="sampai" class="form-control" placeholder="sampai"278
id="sampai" value="{{ old('sampai') }}">279
@foreach ($errors->get('sampai') as $msg)280
<p class="text-danger">{{ $msg }}281
</p>282
@endforeach283
</div>284
</div>285
<br>286
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>287
288
<button type="submit" class="btn btn-primary">Simpan</button>289
</form>290
</div>291
</div>292
</div>293
</div>294
my route :
JavaScript
1
3
1
Route::resource('/kkalender', K_JadwalController::class);2
Route::post('/kkalender/fullcalenderAjax', [K_JadwalController::class, 'ajax']);3
thanks