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>
<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