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 时间视图 背景色

要为 FullCalendar 的时间视图设置背景色，可以使用 FullCalendar 提供的 `eventRender` 回调函数。在该函数中，您可以检查事件是否属于时间视图，并为其设置背景色。

以下是示例代码：

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'timeGrid' ],
  defaultView: 'timeGridWeek',
  events: [
    {
      title: 'Event 1',
      start: '2021-09-01T08:00:00',
      end: '2021-09-01T12:00:00'
    },
    {
      title: 'Event 2',
      start: '2021-09-03T10:00:00',
      end: '2021-09-03T14:00:00'
    }
  ],
  eventRender: function(info) {
    var view = calendar.view;
    if (view.type === 'timeGridWeek' && info.event.backgroundColor === '') {
      info.el.style.backgroundColor = 'lightblue';
    }
  }
});

calendar.render();

在这个例子中，我们将 FullCalendar 的默认视图设置为 `timeGridWeek`，并添加了两个事件。在 `eventRender` 回调函数中，我们首先获取当前视图类型并检查是否为时间网格视图。接下来，我们检查事件是否已经设置了背景色，如果没有，我们将背景色设置为 `lightblue`。

请注意，如果您想在所有视图中设置背景色，可以省略 `if` 语句中的 `view.type === 'timeGridWeek'` 部分。

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