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>

[Sovai]

any update? 3.0.3 still cannot has scrope slot events or disabled

[nebojsa91markovic]

I successfully customized arrow icons in my Vue application using SCSS. Here's a breakdown of the steps I took:

1. Hide Polylines: I concealed the polyline since it wasn't being overwritten.
2. Import SVG Icon: I incorporated my SVG icon using the background-image property. Optionally, you can specify colors directly using properties like fill, stroke, and stroke-width.
3. Apply Filter for Current Color: To allow dynamic coloring of the SVG icon across the app, I used the filter property. This ensured that the fill="currentColor" attribute in my icon would adapt to different colors set elsewhere in the application. If your icon already has a fixed color, using the filter might not be necessary.
4. Adjust Disabled Icon Color: By default, the library set the color of disabled icons to opacity: 0.25. I wanted a different color, so I overrode it to opacity: 1. Additionally, I applied a filter to maintain consistency with the color theme.

Here's the refined SCSS code:

  :deep(.vc-header .vc-prev .vc-base-icon polyline) {
    display: none;
  }
  :deep(.vc-header .vc-next .vc-base-icon),
  :deep(.vc-header .vc-prev .vc-base-icon) {
    width: 24px;
    height: 9px;
    background-image: url('../../assets/icons/forwardArrow.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(21%) sepia(94%) saturate(2450%) hue-rotate(188deg) brightness(96%) contrast(118%);
  }

  :deep(.vc-header .vc-prev .vc-base-icon) {
    transform: rotate(180deg);
  }

  :deep(.vc-header .vc-arrow:disabled) {
    opacity: 1;
    filter: invert(16%) sepia(12%) saturate(15%) hue-rotate(94deg) brightness(94%) contrast(87%);
  } ```