V-calendar: Overriding header arrow font (DatePicker component)

[amadeann]

Is there a 'native' way to override the font used in the header arrow? I would like to use consistent arrows across the page, and the only way I came up with was to hardcode it this way in my stylesheet:

.vc-angle-left::before {
    content: "my_new_arrow" !important;
}

I know I can customize e.g. the font size using the headerArrows property of themeStyles, but how can I style the pseudo element ::before with it?

[nathanreyes]

To replace the arrows, I would use the header-left-button and header-right-button slots. Be sure to call the provided page methods on click. You can then style your arrows any way you like.

Here is a fiddle that might help.

<v-calendar>
  <a
    slot='header-left-button'
    slot-scope='{ page }'
    @click='page.movePrevMonth()'>
    Prev
  </a>
  <a
    slot='header-right-button'
    slot-scope='{ page }'
    @click='page.moveNextMonth()'>
    Next
  </a>
</v-calendar>

[amadeann]

Thank you for your answer @nathanreyes.

I forgot to mention that I am using DatePicker component, not the calendar (I edited the issue title). Unfortunately, it doesn't work. Here's a slightly changed fiddle:

https://jsfiddle.net/y0t3fznc/

I think the problem is that DatePicker component doesn't implement Calendar component directly, but delegates it to either SingleDatePicker, MultipleDatePicker, or DateRangePicker. Slots don't seem to be passed down to 'grandchildren'.

[nathanreyes]

Ah, yes, slots aren't currently passed down for the date picker. To get back to your original question, you can't target pseudo-elements with inline styes. That is one of the drawbacks to using them.

Your original hard-coded approach will have to suffice for now until the date picker supports passing down slots.

[nathanreyes]

Thinking I may just implement v-date-picker using render functions to make this possible.

[ezhkov]

Hello. Thank you for great component!

Is there any progress implementing DatePicker slots customization?

[nathanreyes]

Yes, this is in the works. Been busy the last few weeks but will most likely be in the next revision.

[amadeann]

Thank you for fixing this in 0.7.0. (Somehow this issue wasn't linked to the mention in changelog).

[amadeann]

Also, just realized, the example you posted needs to be tweaked a bit to work (removed object destructuring):

<v-calendar>
    <a
        slot='header-left-button'
        slot-scope='page'
        @click='page.movePrevMonth()'>
        Prev
    </a>
    <a
        slot='header-right-button'
        slot-scope='page'
        @click='page.moveNextMonth()'>
        Next
    </a>
</v-calendar>