vue FullCalendar 背景色

要设置 FullCalendar 的背景色，您可以使用 FullCalendar 的 `eventBackgroundColor` 选项。您可以将此选项设置为颜色名称、十六进制颜色代码或 RGB 值。

例如，以下代码将设置事件的背景色为红色：

$('#calendar').fullCalendar({
  // 其他选项...
  eventBackgroundColor: 'red'
});

您还可以为每个事件设置不同的背景色。这可以通过为每个事件设置 `backgroundColor` 属性来实现。例如：

$('#calendar').fullCalendar({
  events: [
    {
      title: '事件1',
      start: '2022-07-01',
      backgroundColor: 'red'
    },
    {
      title: '事件2',
      start: '2022-07-05',
      backgroundColor: 'blue'
    }
  ]
});

在这个例子中，事件1的背景色为红色，事件2的背景色为蓝色。

相关问题

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 样式。