'Show year in vuetify calendar

I'm using vuetify calendar but I cant find any option for showing the year.

I'm searching into the documentation... https://vuetifyjs.com/en/components/calendars/

In this CodePen I have written YEAR where I want to show the year

<v-select
    v-model="weekday"
    :items="weekdays"
    dense
    outlined
    hide-details
    label="weekdays"
    class="ma-2"
>
</v-select>
YEAR

https://codepen.io/nachotugesto/pen/VwebKGw

Is this possible?

Thank you!

Solution 1:^[1]

Use @change to show months and year

<v-toolbar-title>{{ title }}</v-toolbar-title>
    <v-calendar
      ref="calendar"
      v-model="focus"
      color="primary"
      :events="events"
      event-color="blue"
      :type="type"
      @click:event="showEvent"
      @click:more="viewDay"
      @click:date="viewDay"
      @change="updateRange"
    ></v-calendar>

Then in methods:{} Under Script Add this code

    updateRange({ start, end }) {
  this.start = start;
  this.end = end;

  let yr = this.start.year;
  let mn = this.start.month;

  const mNames = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];

  this.title = mNames[mn-1] + ", " + yr;

Solution 2:^[2]

Use an array of monthly calendars...

<v-row>
  <v-col cols="4" v-for="(m,idx) in months ">
    <v-sheet>
      <h3 class="text-center">
          {{ getMonthName(months[idx+1]) }}
      </h3>
      <v-calendar
        ref="calendar[m]"
        v-model="value"
        :start="m"
        :type="type"
      ></v-calendar>
    </v-sheet>
  </v-col>
</v-row>

Demo: https://codeply.com/p/FTb0kOh2zY

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Praveen Kumar
Solution 2	Zim

'Show year in vuetify calendar

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]