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>