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

Question

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

我打算怎么做：

setState 选定日期。
将它作为道具传递给 fullcalendar 的事件对象。
通过设置事件对象的显示背景更改所选日期单元格的颜色属性。

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

这里是link to calendar

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

我想做的是改变那个单元格的背景颜色。

表现得很好 here on the right side demo

这是完整日历的代码：-

<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 搞乱了全日历 css。

我的 css 中有以下内容：

html,
body,
div {
  position: relative;
}

导致fc-bg-event class继承其父级class的高度，其值为0px，这使得背景看起来像没有颜色。

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

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

Changing background colour of clicked date (Fullcalendar) React + Typescript

javascript

fullcalendar

npm

typescript

reactjs