vue - how change style of package v-calendar - css

Question

I'm currently working on a project that contains vuejs and I have a need to develop a datepicker. To do this, I've decided to use the following package v-calendar
I've been able to implement the component and works as expected out-of-the-box, however I'm trying some customization like styles (following the documentation) but it just won't work of some cases, can't figure out why.
The idea is to achieve this:
I've been able to set the header style through setupCalendar, however, when I try to apply the style to the content it won't change.
After searching further in the documentation, I've noticed that they were passing the style as attributes, to which I've tried to replicate without any success.
I also wanted to know, if it's possible to submit the received $attrs that are inherited by the father-component into the input? At the moment I'm passing 1 by 1 using input-props but I'm wondering if theres a better approach.
right now it's like this:
any suggestions?
<template>
<date-picker
:attributes="attributes"
v-model="date"
:input-props="{
id: $attrs.id,
name: $attrs.name,
class: 'input--default color--white',
autocomplete: 'nope',
readonly: true
}"
>
</date-picker>
</template>
<script>
// packages
import { setupCalendar, DatePicker } from 'v-calendar'
import 'v-calendar/lib/v-calendar.min.css';
setupCalendar({
locale: 'pt-PT',
themeStyles: {
wrapper: {
fontSize: '17px',
lineHeight: '21px',
boxShadow: '5px 5px 10px 1px rgba( 0, 0, 0, .10 )',
},
header: {
color: '#f7890b',
textTransform: 'capitalize'
},
weekdays: {
color: '#ededed'
},
},
attributes: [{
contentStyle: {
color: '#ff4d4d', // Red
fontWeight: 600,
fontSize: '10px',
},
popover: { color: 'yellow', },
highlight: {
backgroundColor: 'purple',
},
}]
});
export default {
inheritAttrs: false,
components: {
DatePicker
},
data () {
return {
date: null,
attributes: [{
contentStyle: {
color: '#ff4d4d', // Red
fontWeight: 600,
fontSize: '10px',
},
popover: { color: 'yellow', },
highlight: {
backgroundColor: 'purple',
},
}]
}
}
}
</script>
<style>
</style>

Answer 1

If using vue-datepicker you can change the css style adding this styles to your .css or in your view inside <style> ...</style>
Here an example of the elements, i already use to change the input as bootstrap style
body {
font-family: "Helvetica Neue Light", Helvetica, sans-serif;
padding: 1em 2em 2em;
}
input,
select {
padding: 0.75em 0.5em;
font-size: 100%;
border: 1px solid #ccc;
width: 100%;
}
select {
height: 2.5em;
}
.example {
background: #f2f2f2;
border: 1px solid #ddd;
padding: 0em 1em 1em;
margin-bottom: 2em;
}
code,
pre {
margin: 1em 0;
padding: 1em;
border: 1px solid #bbb;
display: block;
background: #ddd;
border-radius: 3px;
}
.settings {
margin: 2em 0;
border-top: 1px solid #bbb;
background: #eee;
}
h5 {
font-size: 100%;
padding: 0;
}
.form-group {
margin-bottom: 1em;
}
.form-group label {
font-size: 80%;
display: block;
}