更改点击日期的背景颜色（Fullcalendar）React + Typescript

Question

我正在使用 Fullcalendar 并尝试更改所选日期的颜色。

我打算如何做：

• setState 选择日期。
• 将其作为 props 传递给 fullcalendar 的事件对象。
• 通过设置事件对象的显示背景属性来更改所选日期单元格的颜色。

除了背景颜色部分之外，我都能得到所需的结果。

这是日历链接

如您所见，有一个关于您单击的日期的小检查。

我想做的是更改该单元格的背景颜色。

几乎显示了右侧演示

这是完整日历的代码：-

<FullCalendar
  timeZone="Asia/Tokyo"
  plugins={[dayGridPlugin, interactionPlugin]}
  initialView="dayGridMonth"
  headerToolbar={{
    start: "prev",
    center: "title",
    right: "next",
  }}
  height="100%"
  locale="ja"
  aspectRatio={0.7}
  dateClick={(dateArg: DateClickArg) => {
    this.props.dateSelect(dateArg.date);
  }}
  longPressDelay={1}
  dayCellContent={function (arg: DayCellContentArg) {
    return arg.date.getDate().toString();
  }}
  events={[
    {
      title: "✔️",
      allDay: true,
      start: this.getSelectedDate(),
      end: this.getSelectedDate(),
      borderColor: "white",
      backgroundColor: "pink",
      display: "background",
    },
  ]}
  editable={false} 
  selectable={true} 
/> 

任何帮助将不胜感激。

Answer 1

要更改事件颜色，只需在事件对象中提供颜色选项

<FullCalendar
  timeZone="Asia/Tokyo"
  plugins={[dayGridPlugin, interactionPlugin]}
  initialView="dayGridMonth"
  headerToolbar={{
    start: "prev",
    center: "title",
    right: "next",
  }}
  height="100%"
  locale="ja"
  aspectRatio={0.7}
  dateClick={(dateArg: DateClickArg) => {
    this.props.dateSelect(dateArg.date);
  }}
  longPressDelay={1}
  dayCellContent={function (arg: DayCellContentArg) {
    return arg.date.getDate().toString();
  }}
  events={[
    {
      title: "✔️",
      allDay: true,
      start: this.getSelectedDate(),
      end: this.getSelectedDate(),
      color: "red",
    },
  ]}
  editable={false} 
  selectable={true} 
/> 

下面的事件对象示例

events={[
    {
      title: "✔️",
      allDay: true,
      start: this.getSelectedDate(),
      end: this.getSelectedDate(),
      color: "red",//This will set the color
    }
]}

这将改变您不需要特殊CSS或任何东西的事件的背景颜色

如果您想以编程方式更改事件的背景颜色，然后使用 eventDidMount 回调在每个事件上绑定一个事件处理程序，则该函数将在附加每个事件元素后被触发，以便您可以简单地以编程方式更改事件 css 或元素。

<FullCalendar
  eventDidMount={(dateArg: DateClickArg) => {
     console.log(dateArg.el); //this will return event element
  }},
  events={[
    {
      title: "✔️",
      allDay: true,
      start: this.getSelectedDate(),
      end: this.getSelectedDate(),
      color: "red",
    },
  ]}
/> 

Answer 2

谢谢大家的热心回复。

正如 @ADyson 指出的那样，这是我的 css 与 fullcalendar css 搞混了。

我的 CSS 中有以下内容：

html,
body,
div {
  position: relative;
}

导致fc-bg-event类继承了其父类的高度为0px，导致背景看起来没有颜色。

从上面的代码中删除 div 后，一切正常。

Answer 3

这对于尝试更改点击日期或事件的人来说可能有用：

<FullCalendar
  ...
  // Could be `dateClick`
  eventClick={async (selected) => {
    const event = selected.event

    event.setProp("backgroundColor", "red")
  }}
/>