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

Question

the (newest) FullCalendar docu outlines, that "You can use any of the CSS color formats such #f00, #ff0000, rgb(255,0,0), or red." as event background color ( https://fullcalendar.io/docs/eventBackgroundColor ).

Now I need to split the colors of the event into eg green and red, making green for the first 80% and red for the remaining 20% of the event duration. I found a linear-gradient solution, which works fine thanks to another SO topics and that would be a nice solution.

However while "red" and "green" as single values work fine for the "backgroundColor" attribute, the linear-gradient does not change the event color like in this event below:

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

At https://codepen.io/fendrikat/pen/mdPqjJq you have an example - the second event, "Long event" should be with two colors.

To use a class would not make sense, as the actual percentage and colors will differ for every event (one may be 30% yellow and 70% green, another 20% green and 80% red, another 27% and 73%, ...and so on), so I need to control this in the javascript code.

Anyone any thoughts how the linear-gradient can work for a FullCalendar event in backgroundColor ?

Thanks a lot,

Frank

Answer 1

The 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 property of the element. This is not a supported property in FullCalandar. You will need to set the style property after the event is rendered to the calandar.

You can use 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;
  }
}

Demo

 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>