fullCalendar：将事件背景颜色设置为线性渐变不起作用

Question

（最新）FullCalendar 文档概述，“您可以使用任何 CSS 颜色格式，例如 #f00、#ff0000、rgb(255,0,0) 或红色。” 作为事件背景颜色（https://fullcalendar.io/docs/eventBackgroundColor）。

现在我需要将事件的颜色分为绿色和红色，使事件持续时间的前 80% 为绿色，其余 20% 为红色。我找到了一个线性梯度解决方案，由于另一个 SO 主题，它工作得很好，这将是一个很好的解决方案。

然而，虽然“红色”和“绿色”作为单个值适用于“backgroundColor”属性，但线性渐变不会改变事件颜色，如下例所示：

{
    title: 'Long Event',
    start: '2020-09-07',
    end: '2020-09-10',
    backgroundColor : 'linear-gradient(90deg, pink 80%, cyan 0%)'
  }

在https://codepen.io/fendrikat/pen/mdPqjJq你有一个例子 - 第二个事件“长事件”应该有两种颜色。

使用类是没有意义的，因为每个事件的实际百分比和颜色都会有所不同（一个可能是 30% 黄色和 70% 绿色，另一个 20% 绿色和 80% 红色，另一个 27% 和 73%，.. .等等），所以我需要在javascript代码中控制它。

任何人都知道线性渐变如何适用于 backgroundColor 中的 FullCalendar 事件？

多谢，

坦率

Answer 1

不能backgroundColor接受渐变。这相当于background-colorCSS中的属性。背景颜色值只能是名称、RGB、HSL、十六进制或任何其他标准化颜色值格式。如果要为背景设置渐变，则需要将其应用于background元素的属性。这不是 FullCalandar 中支持的属性。在事件呈现到日历后，您需要设置样式属性。

您可以eventDidMount在 FullCalendar 版本 5 中使用。eventRender这是版本 5 发布之前删除的替代品。这是Gitlab 上的以下问题中建议的解决方案。

/**
 * FullCalandar v5+
 *
 * Where `background` is a non-standard event property,
 * supplied by the event.
 */
eventDidMount: function (info) {
  if (info.event.extendedProps.background) {
    info.el.style.background = info.event.extendedProps.background;
  }
}

演示

document.addEventListener("DOMContentLoaded", function () {
  const calendarEl = document.getElementById("calendar");
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    initialDate: "2020-09-12",
    events: [
      {
        title: "All Day Event",
        start: "2020-09-01"
      }, {
        title: "Long Event",
        start: "2020-09-07",
        end: "2020-09-10",
        // Non-standard property below
        background: "linear-gradient(90deg, pink 80%, cyan 0%)"
      }
    ],
    eventDidMount: function (info) {
      if (info.event.extendedProps.background) {
        info.el.style.background = info.event.extendedProps.background;
      }
    }
  });
  calendar.render();
});

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.js"></script>
<div id='calendar'></div>