V-calendar: Color of selected range in DatePicker

[eafomi4ev]

Is it possible to change the color of the selected range?

Now it is blue, but I want to make it highlighted by some custom color. The same result I may do by redefinition of css classes:

.vc-bg-blue-200 {
    background-color: rgba(42, 42, 42, 0.15);
  }

.vc-bg-blue-600 {
    background-color: rgba(42, 42, 42, 0.9);
  }

But I don't like this way. Is it possible to do this by setting some props?

[fram03]

Hi! I'm customizing the stylesheet for a project and I am using theme prop.
Here you can see all available customizations:
https://github.com/nathanreyes/v-calendar/blob/next/src/utils/defaults/theme.js

For your needed you can use theme.bgAccentHigh and theme.bgAccentLow

[nathanreyes]

You can customize the select and drag attributes.
http://vcalendar.io/datepicker.html#customize-attributes

Reference here to see how to apply classes or styles to a specific region of a highlight (start, end, base).
http://vcalendar.io/attributes.html#highlights

[niktsanov]

For people who are struggling like me, you can simply use the :select-attribute and :drag-attribute like @nathanreyes mentions above, here's an example:

<date-picker
        mode="date"
        :columns="2"
        :is-range="true"
        ...
        :select-attribute="attribute"
        :drag-attribute="attribute"
    >
...
</date-picker>

data() {
        return {
            attribute: {
                highlight: {
                    start: {
                        style: {
                            backgroundColor: '#3dafcc', // blue
                        },
                        contentStyle: {
                            color: '#ffffff' // color of the text
                        }
                    },
                    base: {
                        style: {
                            backgroundColor: '#D3EAF1', // light blue
                        }
                    },
                    end: {
                        style: {
                            backgroundColor: '#3dafcc', // blue
                        },
                        contentStyle: {
                            color: '#ffffff' // color of the text
                        }
                    }
                }
            },
        }
    },

This results in a slightly different blue for the highlight: