V-calendar: Styling of date picker

[SaraLindberg91]

I have problems with styling of the date picker.

I have highlighted available dates to choose from and I'm using tint-color for the selected date. I don't want the selected date to have a border-radius as it is now.

Am I missing something or is it not possible?

HTML:
<v-date-picker v-model='booking.arrivalDate' mode='single' :from-page="fromPage" :attributes="attrsArrivalDates" tint-color="#188c33" :pane-width='330' :input-props='{ class: "date-picker", placeholder: "{% trans %}YYYY-MM-DD{% endtrans %}" }' popover-visibility="focus" :available-dates='availableArrivalDates'> </v-date-picker>

js:

`
 computed: {
attrsArrivalDates: function () {
          var vue = this;

          vue.booking.arrivalDate = d;

          if (vue.periods && vue.periods.length > 0) {

            return vue.periods.map(function (o) {
              return {
                firstDayOfWeek: 2,
                highlight: {
                  backgroundColor: '#1ebb42',
                  borderRadius: '0'
                },

                contentStyle: {
                  borderRadius: '0',
                  color: '#ffffff',
                },

                dates: o.arrivalDates,
              }
            });
          }
        },
 },`

[mrcat323]

Hi, just put borderWidth and set that 0, something like this:

borderWidth: 0

[SaraLindberg91]

Hi,
I doesn't help the tint-color, only the highlight and content style. The tint-color is still 50% in border-radius.

I can solve it with CSS, but it would be a nice feature to be able to set the border-radius on tint-color as well.

[mrcat323]

Have you tried to change borderRadius & borderWidth not to 0, but to 5px and borderColor to your color ?
Like this:

        highlight: {
            backgroundColor: '#1ebb42',
            borderRadius: '5px',
            borderColor: '#1ebb42',
            borderWidth: '4px'
          },
          contentStyle: {
            color: '#fff',
            borderWidth: '4px',
            borderRadius: '5px'
          },

For me, this stuff 100% works

[mrcat323]

It's the same, your should just set borderColor to your color. Try both examples.

[mrcat323]

Let me know, if everything is :ok_hand:

[clnc]

If you want to overwrite the tint-color property, you should use the select-attribute prop.

So in your case, the select-attribute would be:

{
                highlight: {
                  backgroundColor: '#1ebb42',
                  borderRadius: '0'
                },

                contentStyle: {
                  borderRadius: '0',
                  color: '#ffffff',
                  backgroundColor: 'transparent'
                },
}

Let me know if that worked for you :)

[Jeremy-JM]

If you want to overwrite the tint-color property, you should use the select-attribute prop.

So in your case, the select-attribute would be:

{
                highlight: {
                  backgroundColor: '#1ebb42',
                  borderRadius: '0'
                },

                contentStyle: {
                  borderRadius: '0',
                  color: '#ffffff',
                  backgroundColor: 'transparent'
                },
}

Let me know if that worked for you :)

It's not working on the (type = calendar) ?

Seems, it's only work the v-date-picker, but I was use the calendar.

[nathanreyes]

Closing this issue due to inactivity. The highlight.style, highlight.contentStyle props are available for use if needed.

https://vcalendar.io/attributes.html#highlights