I am currently working on an application that utilizes AJAX with FullCalendar functionality.
My goal is to enable users to click on a specific item on the calendar, prompting a dialog box with a "View Details" button. Clicking on this button should redirect the user to the corresponding Event Page.
Although I have successfully implemented the dialog, I am facing challenges in extracting the ID from the AJAX call and passing it into a JavaScript function for redirection purposes.
While I believe I have a solution for directing it to the action, the process of retrieving the ID from the AJAX call remains unclear to me.
Below is my functional FullCalendar script:
$(document).ready(function () {
var events = [];
$.ajax({
type: "GET",
url: "/Appointments/GetEvents",
success: function (data) {
//code snippet for pushing event details into 'events' array
GenerateCalender(events);
},
error: function (error) {
alert("failed");
console.log(error);
}
})
function GenerateCalender(events) {
$('#calendar').fullCalendar({
//calendar configuration parameters
events: events,
eventClick: function (calEvent, jsEvent, view) {
//event click functionality implementation
},
eventDrop: function (event) {
var data = {
AppointmentID: event.id,
};
}
})
}
})
$('#viewDetails').click(function (id) {
window.location.href = '/Appointments/Details/' + id;
});
Despite its apparent simplicity, I find myself stuck at this juncture.
EDIT Adding the modal button for reference:
<!-- Modal Button -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span id="eventTitle"></span></h4>
</div>
<div class="modal-body">
<p id="pDetails"></p>
<button id="viewDetails" class="btn btn-default" style="margin-right:5px;">
View Details
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>