I’m trying to save events created in a Calendar to my database using Laravel. I have a route, controller, and AJAX request set up, but the event data doesn’t seem to be reaching the controller or getting saved in the database.
here is my code
my route
Route::post('/save-calender-event-endpoint', [CalenderController::class, 'saveEvent']) -> name('save-calender-event-endpoint');
my controller
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppModelsCalenderEvent;
class CalenderController extends Controller
{
public function saveEvent(Request $request) {
print_r("hellow from calander controller");
$request->validate([
'event_name' => 'required|string|max:100',
'Start_time' => 'required|date|before:End_time',
'End_time' => 'required|date|after:Start_time',
'Category' => 'required|string|max:100',
'event_postedby' => 'required|string|max:255',
]);
try {
$event = CalenderEvent::create([
'event_name' => $request->event_name,
'Start_time' => $request->Start_time,
'End_time' => $request->End_time,
'Category' => $request->Category,
'event_postedby' => $request->event_postedby,
]);
return response()->json(['success' => true, 'event' => $event],201);
} catch (Exception $e) {
return response()->json(['success' => false, 'message' => 'Failed to save event.'], 500);
}
}
}
Javascript
function convertTo12HourFormat(time24) {
// Assuming input is in HH:mm format, split the time into hours and minutes
const [hours, minutes] = time24.split(':');
// Create a new Date object based on the hours and minutes
const date = new Date();
date.setHours(hours);
date.setMinutes(minutes);
// Use toLocaleTimeString to convert the time to 12-hour format
const options = { hour: '2-digit', minute: '2-digit', hour12: true };
const time12 = date.toLocaleTimeString('en-US', options);
return time12;
}
! function(e) {
"use strict";
var t = function() {
this.$body = e("body"), this.$modal = e("#event-modal"), this.$event = "#external-events div.external-event", this.$calendar = e("#calendar"), this.$saveCategoryBtn = e(".save-category"), this.$categoryForm = e("#add-category form"), this.$extEvents = e("#external-events"), this.$calendarObj = null
};
t.prototype.onDrop = function(t, n) {
var a = t.data("eventObject"),
o = t.attr("data-class"),
i = e.extend({}, a);
i.start = n, o && (i.className = [o]), this.$calendar.fullCalendar("renderEvent", i, !0), e("#drop-remove").is(":checked") && t.remove()
}, t.prototype.onEventClick = function(t, n, a) {
var o = this,
i = e("<form></form>");
i.append("<label>Change event name</label>"),
i.append("<div class='input-group'><input class='form-control' type=text value='" + t.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success waves-effect waves-light'><i class='fa fa-check'></i> Save</button></span></div>"),
i.append("<label>Category</label>");
i.append("<div class='form-group'><select class='form-control' name='category'></select></div>");
// Populate the category dropdown
var categorySelect = i.find("select[name='category']");
categorySelect
.append("<option value='bg-danger'>Red</option>")
.append("<option value='bg-success'>Green</option>")
.append("<option value='bg-dark'>Dark</option>")
.append("<option value='bg-primary'>Blue</option>")
.append("<option value='bg-pink'>Teal</option>")
.append("<option value='bg-info'>Mint</option>")
.append("<option value='bg-warning'>Yellow</option>");
// Pre-select the event's category based on the event's className (category)
categorySelect.val(t.className); // Assuming className stores the category like bg-danger
// Start time input (using a date-time picker or plain text input)
i.append("<label>Start time</label>");
i.append("<input type='text' class='form-control' value='" + moment(t.start).format('YYYY-MM-DD h:mm A') + "' />");
// End time input (using a date-time picker or plain text input)
i.append("<label>End time</label>");
i.append("<input type='text' class='form-control' value='" + moment(t.end).format('YYYY-MM-DD h:mm A') + "' />");
o.$modal.modal({
backdrop: "static"
}),
o.$modal.find(".delete-event").show().end().find(".save-event").hide().end().find(".modal-body").empty().prepend(i).end().find(".delete-event").unbind("click").on("click", function() {
o.$calendarObj.fullCalendar("removeEvents", function(e) {
return e._id == t._id
}), o.$modal.modal("hide")
}), o.$modal.find("form").on("submit", function() {
return t.title = i.find("input[type=text]").val(), o.$calendarObj.fullCalendar("updateEvent", t), o.$modal.modal("hide"), !1
})
}, t.prototype.onSelect = function(t, n, a) {
var o = this;
o.$modal.modal({
backdrop: "static"
});
var i = e("<form></form>");
i.append("<div class='row'></div>"),
i.find(".row")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>")
.find("select[name='category']")
.append("<option value='bg-danger'>Red</option>")
.append("<option value='bg-success'>Green</option>")
.append("<option value='bg-dark'>Dark</option>")
.append("<option value='bg-primary'>Blue</option>")
.append("<option value='bg-pink'>Teal</option>")
.append("<option value='bg-info'>Mint</option>")
.append("<option value='bg-warning'>Yellow</option></div></div>"),
i.find(".row")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Start Time</label><input class='form-control' type='datetime-local' name='beginning'/></div></div>")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>End Time</label><input class='form-control' type='datetime-local' name='ending'/></div></div>");
o.$modal.find(".delete-event").hide().end()
.find(".save-event").show().end()
.find(".modal-body").empty().prepend(i).end()
.find(".save-event").unbind("click").on("click", function() {
i.submit()
}),
/* o.$modal.find("form").on("submit", function() {
var e = i.find("input[name='title']").val(),
a = (i.find("input[name='beginning']").val(),
i.find("input[name='ending']").val(),
i.find("select[name='category'] option:checked").val()); */
o.$modal.find("form").on("submit", function () {
var e = i.find("input[name='title']").val(); // Event name
var a = i.find("select[name='category'] option:checked").val(); // Category (color)
var beginning = i.find("input[name='beginning']").val(); // Start time
var ending = i.find("input[name='ending']").val(); // End time
console.log('Start time:', beginning); // Check the output here
console.log('End time:', ending); // Check the output here
if (!beginning || !ending) {
alert("Please select valid start and end times.");
return false;
}
// Ensure the end time is after the start time
if (new Date(ending) <= new Date(beginning)) {
alert("End time must be after the start time.");
return false;
}
//send data through AJAX
// Save changes to event using AJAX
o.$modal.find(".save-event").unbind("click").on("click", function() {
// Gather event data
var eventData = {
event_name: i.find("input[name='title']").val(),
category: i.find("select[name='category']").val(),
start_time: moment(i.find("input[name='start_time']").val(), 'YYYY-MM-DD h:mm A').toISOString(), // Convert to ISO string
end_time: moment(i.find("input[name='end_time']").val(), 'YYYY-MM-DD h:mm A').toISOString(), // Convert to ISO string
event_postedby: "default_user"
};
console.log("Save Event button clicked");
// Display data in an alert (for testing purposes)
alert("Hello, World! Data sent: nTitle: " + eventData.title + "nCategory: " + eventData.category);
// Send the event data to the server via AJAX
$.ajax({
url: '/save-calender-event-endpoint',
type: 'POST',
data: eventData,
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
success: function(response) {
if (response.success) {
// Event saved successfully
alert("Event saved successfully");
} else {
alert("Error saving event: " + response.message);
}
},
error: function(xhr, status, error) {
alert("An error occurred while saving the event: " + error);
}
});
});
// Extract time (HH:mm) part from the full datetime string
var startTime24 = beginning.split('T')[1].substring(0, 5); // Extract "HH:mm" from "YYYY-MM-DDTHH:mm"
var endTime24 = ending.split('T')[1].substring(0, 5); // Extract "HH:mm" from "YYYY-MM-DDTHH:mm"
// Convert the extracted 24-hour time to 12-hour format
var startTime = convertTo12HourFormat(startTime24); // 12-hour format with AM/PM
var endTime = convertTo12HourFormat(endTime24); // 12-hour format with AM/PM
console.log('Formatted Start time:', startTime);
console.log('Formatted End time:', endTime);
return null !== e && 0 != e.length ? (o.$calendarObj.fullCalendar("renderEvent", {
title: e,
start: beginning,
end: ending,
allDay: false,
className: a
}, !0), o.$modal.modal("hide")) : alert("You have to give a title to your event"), !1
}), o.$calendarObj.fullCalendar("unselect")
}, t.prototype.enableDrag = function() {
e(this.$event).each(function() {
var t = {
title: e.trim(e(this).text())
};
e(this).data("eventObject", t), e(this).draggable({
zIndex: 999,
revert: !0,
revertDuration: 0
})
})
}, t.prototype.init = function() {
this.enableDrag();
var t = new Date,
n = (t.getDate(), t.getMonth(), t.getFullYear(), new Date(e.now())),
o = this;
o.$calendarObj = o.$calendar.fullCalendar({
slotDuration: "00:15:00",
minTime: "08:00:00",
maxTime: "19:00:00",
defaultView: "month",
handleWindowResize: !0,
height: e(window).height() - 100,
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
events: [],
editable: !0,
droppable: !0,
eventLimit: !0,
selectable: !0,
drop: function(t) {
o.onDrop(e(this), t)
},
select: function(e, t, n) {
o.onSelect(e, t, n)
},
eventClick: function(e, t, n) {
o.onEventClick(e, t, n)
}
}), this.$saveCategoryBtn.on("click", function() {
var e = o.$categoryForm.find("input[name='category-name']").val(),
t = o.$categoryForm.find("select[name='category-color']").val();
null !== e && 0 != e.length && (o.$extEvents.append('<div class="external-event bg-' + t + '" data-class="bg-' + t + '" style="position: relative;"><i class="fa fa-move"></i>' + e + "</div>"), o.enableDrag())
})
}, e.CalendarApp = new t, e.CalendarApp.Constructor = t
}(window.jQuery),
function(e) {
"use strict";
e.CalendarApp.init()
}(window.jQuery);
the html modal
<div class="modal fade none-border" id="event-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add New Event</strong></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success save-event waves-effect waves-light" >Create event</button>
<button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
when i click create event i want it to create the event and store it in the database. I notice the print_r statement is not even being reached so I am unsure where i went wrong or what I overlooked . please help
