Looking to customize the appearance of weekends in your calendar by changing their colors? I have a component for the v-calendar that can help with that. Here's the code:
<div id='app'>
<v-date-picker
title-position="left"
:columns="layout.columns"
:rows="layout.rows"
:is-expanded="layout.isExpanded"
:attributes="attributes"
:masks="{ title: 'YYYY年 MMM' }"
:model-config="modelConfig"
:disabled-dates="disabledDates"
:first-day-of-week = 2
@dayclick = "clickCalendar"
v-model = "selectedDate"
></v-date-picker>
<p v-if="calendarIsClicked">The selected date is "{{ selectedDate }}"</p>
And here is the Vue.js code:
<script>
new Vue({
el: '#app',
data() {
return {
calendarIsClicked: false,
selectedDate: null,
attributes: [{
key: "today",
highlight: {
style: {
backgroundColor: "#000",
opacity: 0.5
}
},
}],
disabledDates: {
weekdays: this.fetchClosedDates()
},
modelConfig: {
type: "string",
mask: "YYYY-MM-DD"
}
}
},
methods: {
clickCalendar(day) {
this.calendarIsClicked = true
},
fetchClosedDates() {
return [1, 7]
}
},
computed: {
layout() {
return this.$screens({
// Mobile Layout
default: {
columns: 1,
rows: 1,
isExpanded: true,
},
// PC Layout
lg: {
columns: 2,
rows: 2,
isExpanded: false,
},
});
}
}
})
Currently able to disable dates, but looking to also add colors and potentially change cursor behavior when hovering over them.