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

【问题标题】：Changing background colour of clicked date (Fullcalendar) React + Typescript更改点击日期的背景颜色（Fullcalendar）React + Typescript
【发布时间】：2021-01-11 06:18:45
【问题描述】：

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

我打算怎么做：

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

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

这里是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} 
/>

任何帮助将不胜感激。

【问题讨论】：

在您的事件中，您可以提供颜色选项，也可以使用 eventClick 来检测事件上的事件它返回当前事件及其元素，您可以相应地对其进行更改
如果您使用“选择”功能而不是 dateClick，那么它会自动在所选区域上放置背景。见fullcalendar.io/docs/date-clicking-selecting
@ADyson，谢谢您的回复。我有你所说的工作版本，选择日期的背景颜色将通过为 --fc-highlight-color 设置 css 来设置。但由于某种原因，背景属性停止工作。（很可能在我将高度设置为 100% 之后）此外，选择的日期需要在页面渲染上突出显示，这不会通过选择功能发生。
"所选日期需要在页面渲染中突出显示"...肯定在页面渲染时，还没有人选择日期？我误解了吗？而且我不确定设置高度会如何影响选择的背景颜色......你确定这是问题吗？你是不是又把高度去掉了测试一下？
@ADyson，是的，我试图移除高度，但没有运气。当我尝试更改页面的布局时，问题就开始了。再次感谢您的回复。

标签： javascript reactjs typescript npm fullcalendar

【解决方案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",
    },
  ]}
/>

【讨论】：

感谢您的回答。您的答案改变了“事件”的背景颜色，它恰好具有块属性，因此只有包含事件的日期单元格的一部分被着色。我需要的是为包含事件的日期单元格的背景着色。如右侧演示中的 [此处] (fullcalendar.io/docs/background-events) 所示。该事件还具有背景属性，它应该按照此处所需的方式工作，但它不起作用。

【解决方案2】：

感谢大家的热心回复。

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

我的 css 中有以下内容：

html,
body,
div {
  position: relative;
}

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

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

【讨论】：