如何在FullCalendar的navLinkDayClick中调用自定义事件获取单日数据？

核心修改点 #

FullCalendar的navLinkDayClick回调会默认接收点击的日期对象作为参数，利用这个参数传递给FetchTotalAmount方法，即可实现点击日期查询当日总金额的功能。

步骤1：修改FetchTotalAmount函数，支持接收日期参数 #

调整函数，让它能接收目标日期，并格式化为存储过程需要的格式（比如YYYY-MM-DD），再发起请求：

function FetchTotalAmount(targetDate) {
  // 将FullCalendar的Moment日期对象转为存储过程需要的格式
  const queryDate = targetDate.format('YYYY-MM-DD');

  // 调用存储过程的逻辑（示例用AJAX，根据你的实际实现调整）
  $.ajax({
    url: '你的接口地址', // 替换为实际调用存储过程的接口
    method: 'POST',
    data: { date: queryDate },
    success: function(res) {
      // 假设接口返回的总金额字段为totalAmount，根据实际调整
      const total = res.totalAmount;
      // 展示总金额：可选择弹窗、更新页面元素等方式
      alert(`当日总金额：${total}`);
      // 示例：更新页面指定元素
      // $('#totalAmountContainer').text(`当日总金额：¥${total}`);
    },
    error: function() {
      alert('获取当日总金额失败，请稍后重试');
    }
  });
}

步骤2：完善navLinkDayClick回调逻辑 #

在日历配置中，给navLinkDayClick传入日期参数，并调用FetchTotalAmount：

function GenerateCalender(events) {
  // ...其他日历配置代码...
  events: events,
  eventClick: function (calEvent) {
    var selectedCalendarEvent = calEvent;
    $('#calendarModal #eventTitle').text(calEvent.title);
    // ...你的eventClick原有逻辑...
  },
  navLinks: true,
  navLinkDayClick: function(date) {
    // 调用FetchTotalAmount，传入点击的日期
    FetchTotalAmount(date);
  }
  // ...其他日历配置代码...
}

说明 #

• navLinkDayClick的第一个参数date是FullCalendar封装的Moment日期对象，使用format()方法可以轻松转换为你需要的日期格式。
• 如果你的FetchTotalAmount原本已有其他逻辑，只需添加参数接收和日期格式化的部分即可，无需完全重写。

内容的提问来源于stack exchange，提问作者Subhrajit Roy