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

Question

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

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

但是，虽然“red”和“green”作为单个值可以很好地用于“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 你有一个例子 - 第二个事件，“长事件”应该有两种颜色。

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

有人知道线性渐变如何在 backgroundColor 中用于 FullCalendar 事件吗？

非常感谢，

弗兰克

Answer 1

元素的backgroundColor cannot accept a gradient. This is equivalent to the background-color property in CSS. Background color values can only be name, rgb, hsl, hex or any other standardized color value format. If you want to set a gradient for the background, you will need to apply it to the background属性。这在 FullCalandar 中不受支持属性。在事件呈现到日历后，您需要设置样式属性。

您可以使用 eventDidMount in version 5 of FullCalendar. This is a replacement for eventRender that was removed prior to version 5's release. This was the suggested solution in the following issue on 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>

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

fullCalendar: set event background color to linear-gradient not working

javascript

fullcalendar

演示