javascript - 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你有一个例子 - 第二个事件，“长事件”应该有两种颜色。

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

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

非常感谢，

弗兰克

Answer 1

backgroundColor不能接受渐变。这相当于 background-color CSS 中的属性。背景颜色值只能是 name、rgb、hsl、hex 或任何其他标准化颜色值格式。如果你想为背景设置渐变，你需要将它应用到background。元素的属性。这不是 FullCalandar 中受支持的属性。在事件呈现到日历后，您需要设置样式属性。

您可以使用 eventDidMount在 FullCalendar 的第 5 版中。这是 eventRender 的替代品在版本 5 发布之前被删除。这是以下建议的解决方案 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>