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

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 e.g. 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

The docs state that it can only be a standard color value: "You can use any of the CSS color formats such #f00, #ff0000, rgb(255,0,0), or red." There is no mention of gradients. Furthermore, the background-color CSS rule cannot hold a gradient; that is up to the background. A user mentions, in a closed Github ticket, that you could provide your own rendering. — Mr. Polywhirl
...thanks a lot, @Mr.Polywhirl, I interpreted that "any of the CSS color formats" includes everything like gradients, background-pictures etc., as this is what I experienced with other libraries. One could discuss if gradients are a "color format" or not - I would have thought so. Again, thanks a lot for your support, I will see if the ticket can help. — Frank E
I ported the eventRender solution from arshaw's comment in the Github issue. — Mr. Polywhirl

Mr. Polywhirl Mr. Polywhirl · Accepted Answer · 2020-09-04T14:49:19

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/[email protected]/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<div id='calendar'></div>

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

1 Answers

Demo