vue FullCalendar 有日程事件背景色设置

是的，Vue FullCalendar 组件支持为日程事件设置背景色。你可以通过 `eventColor` 和 `eventBackgroundColor` 属性来设置。

- `eventColor`：设置事件的文本颜色
- `eventBackgroundColor`：设置事件的背景色

例如：

<FullCalendar
  :events="events"
  :event-color="'#ffffff'" // 设置事件文本颜色为白色
  :event-background-color="'#007bff'" // 设置事件背景色为蓝色
/>

你也可以在事件对象中设置 `color` 和 `backgroundColor` 属性来覆盖全局配置。例如：

{
  title: 'Event 1',
  start: '2021-09-01T10:00:00',
  end: '2021-09-01T12:00:00',
  color: '#ffffff', // 覆盖全局配置，设置文本颜色为白色
  backgroundColor: '#007bff' // 覆盖全局配置，设置背景颜色为蓝色
}

希望能帮到你。

相关问题

vue FullCalendar 有事件背景色设置

是的，Vue FullCalendar 可以通过设置事件对象的 `backgroundColor` 属性来设置事件的背景色。具体步骤如下：

1. 在 `eventSources` 中定义事件源。

eventSources: [
  {
    events: [
      {
        title: 'My Event',
        start: '2021-06-01T10:00:00',
        end: '2021-06-01T12:00:00',
        backgroundColor: '#f00' // 设置事件的背景色
      }
    ]
  }
]

2. 在 `eventRender` 回调函数中设置事件的背景色。

eventRender: function(event, element) {
  element.css('background-color', '#f00'); // 设置事件的背景色
}

其中，第一种方法是在事件对象中直接设置 `backgroundColor` 属性，第二种方法是通过 `eventRender` 回调函数动态设置事件的背景色。两种方法都可以达到相同的效果，具体选择哪种方法取决于你的需求和实际情况。

vue FullCalendar 当天日期背景色

你可以使用 FullCalendar 的 `dayRender` 属性来设置当天日期的背景色。这个属性可以让你自定义每个日期单元格的 HTML 元素。

以下是示例代码，将当前日期单元格的背景色设置为红色：

import { Calendar } from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar: Calendar
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin],
        defaultView: 'dayGridMonth',
        dayRender: function (info) {
          const today = new Date()
          if (info.date.getDate() === today.getDate() &&
              info.date.getMonth() === today.getMonth() &&
              info.date.getFullYear() === today.getFullYear()) {
            info.el.style.backgroundColor = 'red'
          }
        }
      }
    }
  }
}

在上面的代码中，我们使用了 FullCalendar 的 `dayRender` 回调函数来检查当前日期是否与今天一致。如果是，我们设置单元格的背景色为红色。

注意，`info.el` 表示日期单元格的 HTML 元素，你可以在这里为单元格设置任何 CSS 样式。