FullCalendar：鼠标悬停某事件时修改另一事件颜色的实现

其实你完全不用费劲去追踪jsEvent里的内容，FullCalendar本身就提供了直接定位事件的API，完美适配你的需求！下面是具体的实现思路和代码示例：

核心思路 #

利用FullCalendar的getEventById()方法，在鼠标悬停触发事件时精准获取目标事件并修改其颜色，同时在鼠标移出时恢复原颜色，保证交互的合理性。

具体实现步骤 #

1. 确保事件有唯一ID：你的事件必须配置id属性（比如你提到的58335、58345），这是我们定位目标事件的关键。
2. 监听eventMouseover事件：当鼠标悬停在触发事件（58335）上时，获取目标事件（58345）并修改其背景色。
3. 监听eventMouseout事件：鼠标移出触发事件时，将目标事件的颜色恢复为原来的橙色。

完整代码示例 #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events: [
      {
        id: 58335, // 注意如果是数字类型，判断时要保持一致
        title: '事件58335',
        start: '2024-05-20',
        backgroundColor: '#808080'
      },
      {
        id: 58345,
        title: '事件58345',
        start: '2024-05-22',
        backgroundColor: '#ffa500' // 初始橙色
      }
      // 其他事件配置...
    ],
    eventMouseover: function(info) {
      // 判断当前悬停的是触发事件58335
      if (info.event.id === 58335) {
        // 通过ID获取目标事件
        const targetEvent = calendar.getEventById(58345);
        if (targetEvent) {
          // 临时保存原颜色，用于后续恢复
          targetEvent._originalBgColor = targetEvent.backgroundColor;
          // 修改为蓝色
          targetEvent.setProp('backgroundColor', '#0000ff');
          // 如果需要修改边框色，可以再加一行
          // targetEvent.setProp('borderColor', '#0000ff');
        }
      }
    },
    eventMouseout: function(info) {
      if (info.event.id === 58335) {
        const targetEvent = calendar.getEventById(58345);
        if (targetEvent && targetEvent._originalBgColor) {
          // 恢复原橙色
          targetEvent.setProp('backgroundColor', targetEvent._originalBgColor);
          // 清除临时存储的颜色值
          delete targetEvent._originalBgColor;
        }
      }
    }
  });

  calendar.render();
});

关键API说明 #

• getEventById(id)：FullCalendar提供的实例方法，通过事件的唯一ID直接获取对应的事件对象，高效又精准。
• setProp(propName, value)：用于修改事件的属性，这里我们修改的是backgroundColor，你也可以根据需求修改borderColor、textColor等样式属性。

注意事项 #

• 如果你的事件ID是数字类型，判断时要和配置的类型保持一致（比如不要用字符串'58335'去匹配数字58335）。
• 一定要在eventMouseout里恢复颜色，否则目标事件会一直保持修改后的颜色，影响用户体验。

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