How to change the colors of weekends in v-calendar (different colors for saturdays and sundays respectively)

Question

As the title suggests, I'd like to change the colors of the weekends in my calendar (and different colors for both weekends..)

this is my component for the v-calendar

<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">押された日は "{{ selectedDate }}"</p>

and this 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,
        },
      });
    }
  }
})

at the moment, it was possible to disable the dates but I'd like to disable AND add colors to them.. and maybe add some disabled cursor when hovered over them..

Answer 1

Can you inspect HTML element? Just change CSS for column Saturday and Sunday