I've recently started a project that involves Vue.js, and I needed to create a datepicker for it. After some research, I opted to utilize the v-calendar package.
The implementation of the component went smoothly and functioned as expected right out of the box. However, when I attempted to customize the styles according to the documentation, I encountered some issues in certain cases, and I'm struggling to identify the cause.
The goal is to achieve a design similar to this:
https://i.stack.imgur.com/LEJBW.png
While I managed to style the header using setupCalendar, applying the same style to the content has proven unsuccessful. Upon further inspection of the documentation, I noticed that they were passing the style as attributes. I tried replicating this method without success.
Additionally, I am curious if there is a way to automatically pass on the received $attrs from the parent-component to the input field? Currently, I am manually assigning each attribute using input-props. Is there a more efficient approach for this task?
Presently, my code structure looks like this:
https://i.stack.imgur.com/0G2zM.png
<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>