navLinkDayClick of FullCalendar

Question

Did anyone use navLinkDayClick of FullCalendar and call a custom event (by fetching data from database) based on the date selection?

I am using eventClick to populate the calendar data however I am unable to do so for individual dates after setting the navLinks to true.

Everything above navLinkDayClick works fine.

function FetchEventAndRenderCalendar() {method contains to fetch all event from database}

function FetchTotalAmount() { method calls a SP to get the total amount for that day of the calendar}. This also contains the method to generate the calendar which is given below.

function GenerateCalender(events) - events are the ones that are fetched in the first method.

function GenerateCalender(events) {
..................
..................
events: events,
eventClick: function (calEvent) {
var selectedCalendarEvent = calEvent;
$('#calendarModal #eventTitle').text(calEvent.title);
..................
..................
navLinks: true,
navLinkDayClick: function() {
how to use this to show the total amount for that day of the calendar when the date is selected?
}

Answer 1

navLinkDayClick in FullCalendar v3.8 -

navLinks: true,
navLinkDayClick: function (date) {
selectedDate = date.format("DD-MMM-YYYY");
selectedAmountEvent = amounts.find(item => item.paymentDate.format("DD-MMM-YYYY") === selectedDate);
var $AmountData = $('<div/>');
$AmountData.append($('<p/>').html('<b>Payment Date: </b>' + selectedAmountEvent.paymentDate.format("DD-MMM-YYYY")));
if (selectedAmountEvent.totalAmount < 0) {
    $AmountData.append($('<p/>').html('<b style="color:red;">Total Amount: ' + selectedAmountEvent.totalAmount + ' $' + '</b >'));
}
else {
    $AmountData.append($('<p/>').html('<b style="color:green;">Total Amount: ' + selectedAmountEvent.totalAmount + ' $' + '</b >'));
}
 
$('#eventModal #AmountDetails').empty().html($AmountData);

$('#eventModal').modal();
}

amounts is an array holding the data.