如何点击日期在FullCalendar中展示对应渲染的事件

我明白你的问题了——现在点击日历日期时，你能获取到该时间段的所有事件，但只能传递第一个事件的金额到弹窗里，而你需要的是被点击的那个日期对应的事件金额对吧？咱们来调整一下代码，核心就是根据点击的日期从返回的事件列表里精准筛选出匹配的那一个（或多个）事件。

首先先看一下你当前的代码（格式化后）：

handleDateClick($event) { 
  let DateStart = this.convertDate($event.view.currentStart); 
  let DateEnd = this.convertDate($event.view.currentEnd); 
  this.TradePerformanceServ.getCalendarTradePerformance(this.user, DateStart, DateEnd).then(res => { 
    this.calendarEvents = res.performance; 
    for (var i = 0;i < res.performance.length;i++){ 
      console.log('Amount: ', res.performance[i].title); 
    } 
    console.log('Server response ', this.calendarEvents); 
    const dialogRef = this.dialog.open(ModalCalendarGainLossComponent, { 
      maxWidth: '100vw', 
      width: '300px', 
      maxHeight: '100vh', 
      data: { amount: res.performance[0].title, date: $event.dateStr } 
    }); 
  })
};

问题出在你直接取了res.performance[0].title，这只会拿到列表里第一个事件的金额，而不是和点击日期匹配的那个。下面是修改后的代码，我加上了详细注释：

handleDateClick($event) { 
  let DateStart = this.convertDate($event.view.currentStart); 
  let DateEnd = this.convertDate($event.view.currentEnd); 
  
  this.TradePerformanceServ.getCalendarTradePerformance(this.user, DateStart, DateEnd)
    .then(res => { 
      this.calendarEvents = res.performance; 
      const clickedDate = $event.dateStr; // 拿到用户点击的日期字符串
      
      // 关键步骤：从事件列表中筛选出和点击日期匹配的事件
      // 👉 这里要注意：你需要根据自己事件对象的实际结构调整匹配逻辑！
      // 比如如果你的事件里存储日期的字段是`eventDate`，就改成event.eventDate === clickedDate
      const matchedEvent = res.performance.find(event => {
        // 假设事件对象里的日期字段和$event.dateStr格式完全一致（比如都是'YYYY-MM-DD'）
        return event.date === clickedDate; 
      });
      
      // 容错处理：如果没有找到对应日期的事件，给个默认值避免报错
      const targetAmount = matchedEvent ? matchedEvent.title : 'No transaction';
      
      console.log('Matched amount for date', clickedDate, ': ', targetAmount);
      
      const dialogRef = this.dialog.open(ModalCalendarGainLossComponent, { 
        maxWidth: '100vw', 
        width: '300px', 
        maxHeight: '100vh', 
        data: { 
          amount: targetAmount, // 传入匹配到的金额
          date: clickedDate 
        } 
      }); 
    });
};

几个需要注意的细节： #

1. 日期格式匹配：确保$event.dateStr的格式和你事件对象里的日期格式完全一致（比如都是YYYY-MM-DD），如果格式不一样，你需要先把两者转换成统一格式再比较（比如用原生Date对象处理格式）。
2. 多事件场景：如果同一个日期可能有多个事件，你可以把find改成filter，然后根据需求处理：
   • 比如累加所有金额：

     const matchedEvents = res.performance.filter(event => event.date === clickedDate);
     const totalAmount = matchedEvents.reduce((total, event) => total + parseFloat(event.title), 0);
     

   • 或者把所有事件列表传入弹窗，让弹窗自己展示多个条目。
3. 字段名称对应：如果你的事件里存储金额的不是title字段，记得换成实际的字段名（比如amount）。

这样修改后，点击特定日期时，弹窗就会显示该日期对应的事件金额啦～

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