如何在FullCalendar的listMonth视图中按event.status修改事件行背景色

嘿，我来帮你搞定在FullCalendar的listMonth视图里根据事件状态设置背景色的需求！其实靠eventRender这个回调钩子就能轻松实现，它会在每个事件渲染到页面时触发，刚好适合我们做自定义样式修改。

具体实现步骤 #

首先，我们需要在你的原有代码里补全eventRender函数，核心思路是：

1. 先判断当前视图是不是listMonth（如果只需要在这个视图生效的话）
2. 根据event.status的取值，找到事件对应的行容器，给它设置背景色

下面是补全后的完整代码示例：

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'listMonth, month,agendaWeek,agendaDay'
  },
  defaultView: 'listMonth',
  locale: 'fr',
  contentHeight: 600,
  navLinks: true,
  selectable: false,
  eventRender: function(event, element, view) {
    // 仅在listMonth视图下应用样式
    if (view.name === 'listMonth') {
      // 找到整个事件行的DOM容器（list视图里每个事件对应一个.fc-list-item）
      const eventRow = $(element).closest('.fc-list-item');
      
      // 根据status值设置不同背景色
      switch(event.status) {
        case 'approved':
          eventRow.css('background-color', '#d4edda'); // 浅绿：已批准
          break;
        case 'pending':
          eventRow.css('background-color', '#fff3cd'); // 浅黄：待处理
          break;
        case 'rejected':
          eventRow.css('background-color', '#f8d7da'); // 浅红：已拒绝
          break;
        default:
          eventRow.css('background-color', '#ffffff'); // 默认白色
      }
    }
  },
  // 示例事件数据（记得确保你的事件里包含status字段）
  events: [
    {
      title: 'Réunion équipe',
      start: '2024-05-10',
      status: 'approved'
    },
    {
      title: 'Soumission projet',
      start: '2024-05-15',
      status: 'pending'
    }
  ]
});

更推荐的CSS类管理方式 #

如果想让样式和逻辑分离（后续改样式更方便），可以用CSS类来代替内联样式：

1. 先定义CSS类：

.fc-list-item.approved {
  background-color: #d4edda;
}
.fc-list-item.pending {
  background-color: #fff3cd;
}
.fc-list-item.rejected {
  background-color: #f8d7da;
}

2. 再修改eventRender函数：

eventRender: function(event, element, view) {
  if (view.name === 'listMonth') {
    const eventRow = $(element).closest('.fc-list-item');
    // 先移除旧的状态类，避免样式冲突
    eventRow.removeClass('approved pending rejected');
    // 添加对应状态的类
    if (event.status) {
      eventRow.addClass(event.status);
    }
  }
}

这样后续要调整颜色或者样式，直接修改CSS就行，不用动JS代码，维护起来更省心～

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