I am trying to create a calendar with “add event” and “edit event” feature using Fullcalendar.
The problem is that I am able to edit events with the codes shown below but I can’t add new events. After I hit the Add Event button the browser doesn’t show any errors, it just shows a whit blank. I was able to add new events before I changed the codes to add the “edit event” feature.
calendar.blade.php
<body>
<div id="dialog">
<div id="dialog-body">
<form id="dayClick" method="post" action="{{route('eventStore')}}">
@csrf
<div class="form-group">
<label>Event Title</label>
<input type="text" id="title" class="form-control" name="title" placeholder="Event Title">
</div>
<div class="form-group">
<label>Start Date/Time</label>
<input type="text" id="start" class="form-control" name="start" placeholder="Start date & time">
</div>
<div class="form-group">
<label>End Date/Time</label>
<input type="text" id="end" class="form-control" name="end" placeholder="End date & time">
</div>
<input type="hidden" id="eventId" name="event_id">
<div class="form-group">
<button type="submit" class="btn btn-success" id="update">Add Event</button>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
editable: true,
displayEventTime: false,
selectable: true,
selectHelper: true,
header: {
left: 'prev,next today ',
center: 'title',
right: 'myCustomButton'
},
events: "{{route('allEvent')}}",
dayClick: function(date, event, view) {
$('#start').val(date);
$('#dialog').dialog({
title: 'Add Event',
width: 600,
height: 600,
modal: true,
})
},
select: function(start, end) {
$('#start').val(start);
$('#end').val(end);
$('#dialog').dialog({
title: 'Add Event',
width: 600,
height: 600,
modal: true,
})
},
eventClick: function(event) {
$('#title').val(event.title);
$('#start').val(event.start);
$('#end').val(event.end);
$('#eventId').val(event.id);
$('#update').html('Update');
$('#dialog').dialog({
title: 'Edit Event',
width: 600,
height: 600,
modal: true,
})
}
})
});
</script>
</body>
web.php
Route::post('store', [TestController::class, 'store'])->name('eventStore');
TestController.php
public function store(Request $request)
{
try {
if (!empty($request->event_id)) {
$validator = Validator::make($request->all(), [
'title' => 'required',
'start' => 'required',
'end' => 'required'
]);
if ($validator->failed()) {
return redirect()->back();
} else {
if (empty($request->event_id)) {
Event::create($request->all());
return redirect()->back();
} else {
Event::where('id', $request->event_id)->update([
'title' => $request->title,
'start' => $request->start,
'end' => $request->end
]);
return redirect()->back();
}
}
}
} catch (Exception $e) {
return redirect()->back();
}
}
I think there’s something wrong in the web.php but I couldn’t figure out.
Any help or advice would be appreciated as I have tried multiple methods with no success.
Thank you in advance.