V-calendar: Question: caps and highlight customization for date picker

[maksnester]

Hi there. I spent some time with v-calendar recently and I probably gave up in trying to finish customization, so decided to ask for help.

On my project I have such css :root { font-size: 62.5% } for handy rem usage. But v-calendar also based on rems and it turns out that I need many customizations for it just because of font-sizes. And there is one I can't finish - caps.

https://jsfiddle.net/fz7cteca/6/ - this fiddle illustrates the problem.

All I need is actually a default caps styling as shown on your landing https://vcalendar.netlify.com/ but because of font-size I had to do my own changes in styles, and probably I did something wrong or missing something. I tried to use some defaults but without success.

How can I set the same caps as defaults but with height customization?

[maksnester]

By the way I noticed today that your .min.css brings * { box-size: content-box } don't you think that it's too opinionated for plugin to add some global css rules?

[nathanreyes]

There is an undocumented attribute type called highlightCaps. It follows the same rules as a normal highlight object. See if that works for you.

Also, I agree on the global styles. Those should probably get scoped.

[maksnester]

Great, thanks! I'll check it.

[maksnester]

Or wait, I actually tried to use highlightCaps but it affects all each selected day, not only the first/last selected. I even used it in fiddle.

UPD: https://jsfiddle.net/fz7cteca/10/ - nope, it works fine now. Yesterday it just didn't work, perhaps update to 0.9 fixed this issue.

[nathanreyes]

Ok good deal. Closing this issue for now. Also, there will be a patch to remove the single global style.

[payalord]

Is it possible to set custom text colors for highlight & highlightCaps separately? Because right now there is only available contentStyle.color with which is possible to set only 1 common text color for them both.