如何修改Full Calendar(v3.4.0)插件事件的边框颜色？

嘿，我之前折腾FullCalendar v3的时候也踩过这个边框颜色的坑，给你两个靠谱的解决思路：

方法一：通过CSS强制覆盖（注意加载顺序） #

你之前写的CSS无效，大概率是FullCalendar自带样式的优先级比你的自定义样式高，或者你的CSS文件加载在官方CSS之前被覆盖了。试试下面的写法，要么提升选择器优先级，要么用!important强制覆盖：

/* 务必把这段代码放在FullCalendar官方CSS之后加载 */
.fc-event {
  border-color: red !important;
  /* 要是想调整边框宽度也可以一起设置 */
  border-width: 3px !important;
}

如果只想针对月视图里的时间网格事件修改，也可以用更精准的选择器：

.fc-time-grid-event.fc-v-event.fc-event {
  border-color: red !important;
}

方法二：使用FullCalendar自带的eventBorderColor配置（推荐） #

你看到的eventBorderColor是FullCalendar v3的全局配置项，要在初始化日历的时候设置，不是写在CSS里。举个实际例子：

$('#calendar').fullCalendar({
  // 你的其他基础配置（比如头部导航、默认视图）
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  defaultView: 'month',
  // 全局设置所有事件的边框颜色
  eventBorderColor: '#ff0000',
  // 要是需要给单个事件单独设置边框颜色，直接在事件数据里加borderColor字段就行
  events: [
    {
      title: '团队会议',
      start: '2024-05-21T10:00:00',
      end: '2024-05-21T12:00:00',
      borderColor: 'blue' // 这个事件的边框会变成蓝色，覆盖全局设置
    },
    {
      title: '项目截止',
      start: '2024-05-25'
      // 这个事件会沿用全局的红色边框
    }
  ]
});

两种方法都能解决问题，更推荐第二种，因为符合FullCalendar的API设计，不用跟CSS优先级较劲～

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