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

Question

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

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

然而，虽然“红色”和“绿色”作为单个值适用于“背景颜色”属性，但线性渐变不会像下面的这个事件一样改变事件颜色：

{
    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不能接受渐变。 这相当于 CSS 中的background-color属性。 背景颜色值只能是名称、rgb、hsl、hex 或任何其他标准化颜色值格式。 如果要为背景设置渐变，则需要将其应用于元素的background属性。 这不是 FullCalandar 支持的属性。 在将事件呈现到日历后，您需要设置 style 属性。

您可以在eventDidMount版本 5 中使用 eventDidMount。 这是在第 5 版发布之前删除的eventRender的替代品。 这是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>