search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

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

Asked by Anonymous
25 days 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]
25 days ago.

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

See also:
https://api.daypilot.org/daypilot-event-data/

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
24 days ago.

Thank you for your answer. This works very well.

Comment posted by Anonymous
24 days 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]
21 days 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
21 days ago.

This is really cool. Thank you very much!

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):