Calendar component "lightening" effect on event background

Support
#1

On the setup screen for visit types, I’d like to show an example of how things will actually look, so I need to figure how to apply the “lightening” effect that the Calendar applies to the background color of events.

In this example you can see what I mean - the thin bar on the right side of the event blocks is the “real” background color, but the body of the event’s background is a lightened version of it.

I’ve poked into the CSS a little bit but as it’s several thousand lines I haven’t been able to find how it’s applied so that I can figure out how to do it in code on the visit type editor screen.

example-lightening-effect

#3

Hello Jon!

Please, correct me if I did not understand you right. Do you want to change the background color when the cursor is moved to an event?

#4

No. What I’m asking is - how is the framework altering the color set on the event, making it lighter for the event “body?” In the screenshot fragment I posted, the colors set for the events are the ones shown in the tiny strip on the right side of the events. But the event “body” (where it says for example “12:00 PM Jon Craig…”) is a lighter version of that color. The framework is doing that automatically; I’m guessing somewhere buried in the CSS.

I need to know how that value is calculated or done so I can replicate it on the screen where users configure the visit type colors.

#5

Unfortunately, I did not find any code in the framework that can change the color of the event’s body. It is supposed that event background and text colors will be changed by styles like in the live demo.

In general, it can be done using SCSS functions in the extended theme, for instance:

  $event-color-blue: #0300e0;
  $event-background-color-blue: lighten($event-color-blue, 50%);

  .v-calendar-event.event-blue {
    background-color: $event-background-color-blue;
    color: $event-color-blue;
  }
#7

But yet…something is doing it! Do you see the screenshot fragment I posted? That is an example of what I am talking about; the framework (or more correctly, probably the theme’s CSS) is doing it already.

Look at the two blue appointments. Do you see the thin bar on the right edge of them? That is the actual color (style) I have set on them, it’s #0000ff - pure blue. But look at the event’s body… that is a lighter version of it; it has the same style class applied but somehow the framework/theme is lightening it. It’s the same for the green appointment above it, and the red one you can see a tiny portion of just above that.

Here’s another screenshot showing it in full applied to red, green, blue, and an orange color. Again, the actual style I’ve applied is the one depicted in the tiny strips on the right edge of the appointments. The framework/theme is doing that strip all automatically, as well as the lighter version used for the event body!

fullsched
fullsched1683×1043 57 KB

#8

Could you share example of styles? Do you use Page.getCurrent().getStyles().add()?

#9

Indeed. Sure, here:

.v-calendar-event-vtcolor-Blue {
 background-color: #0000ff;
}

That’s the blue one.

.v-calendar-event-vtcolor-Orange {
 background-color: #fa6d00;
}

The orange one.

They’re simply named vtcolor-(name of visit type), and the framework of course prepends the v-calendar-event- when you set it.

#10

I see, your style is applied for v-calendar-event element.

image

But this element has content element and other elements which cover it. Content element (v-calendar-event-content) has its own background-color with alpha = 0.8.

image

In summary these colors give such “lightening” effect.

image

To make background color the same you can change your styles like this:

.hover .v-calendar-week-wrapper .v-calendar-event-vtcolor-Orange .v-calendar-event-content {
    background-color: #fa6d00;
}
#11

Well, I have styleNameProperty of the Calendar set to a transient field that returns the needed CSS selector based on the visit type, so I suppose the Calendar itself is setting things up this way.

Yeah, I found out it’s because over overlayed DIV’s some of which have alpha set. (Lots of DIVs!)

#12

Oddly, that didn’t work - it seemed to have no effect at all. Some complicated DIV nesting going on here.

#13

Actually - scratch that - it seems -calender- != -calendar- :smiley: