Scheduler - How to use linear-gradient() in event's backColor property

Asked by Anonymous
2 years ago.

If the backColor property is not set, then the background color is set to this CSS property:

.scheduler_default_event_inner {
    background: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(238, 238, 238));
}

This gives the event a better look. However, if I set the event to any other color using the backColor property, then I'm just having a flat background color.

If I set the backColor to transparent and use the event's active area, I should be able to have the non flat background.

backColor: 'transparent',
areas: [{
          left: 0, right: 0, top: 0, bottom: 0,
          style: "background: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(238, 238, 238));"
}],

I tried it and it works basically. However, how can I use the standard version linear-gradient instead of the -webkit- variante and how can I use it for any other color than just white?

Answer posted by Dan Letecky [DayPilot]
2 years ago.

You can set the gradient using the "backColor" property.

This example uses DayPilot.ColorUtil.lighter() and DayPilot.ColorUtil.darker() helpers to calculate the stop colors from a single input color value:

onBeforeEventRender = args => {
  const color = "#3c78d8";
  const from = DayPilot.ColorUtil.lighter(color, 0.5);
  const to = DayPilot.ColorUtil.darker(color, 0.5);
  args.data.backColor = `linear-gradient(to bottom, ${from} 0%, ${to}`;
  args.data.fontColor = "#ffffff";
}

The default event background is defined using "background" style (as you have noticed). The "args.data.backColor" property translates to "background" inline style when defined.

Comment posted by Anonymous
2 years ago.

Thank you for your answer. This works very well.

Comment posted by Anonymous
2 years ago.

I'm just wondering, if you would have also a solution to set the event text color (fontColor) depending on the event background color. E. g. if the background color is black, then the text color would be white etc. So, basically inverting the text color to match the background color.

Comment posted by Dan Letecky [DayPilot]
2 years ago.

The latest sandbox build (2022.4.5460+) includes DayPilot.ColorUtil.contrasting() method which you can use to choose a contrasting color (white/black) depending on the source color.

// ...
args.data.fontColor = DayPilot.ColorUtil.contrasting(color);

By default, it uses "#ffffff" and "#000000" as output but you can specify different shades (light/dark):

// ...
args.data.fontColor = DayPilot.ColorUtil.contrasting(color, "#f0f0f0", "#050505");

Comment posted by Anonymous
2 years ago.

This is really cool. Thank you very much!

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Scheduler - How to use linear-gradient() in event's backColor property

Products

Learn

Get Support

DayPilot Pro