vue.jsvuejs2vue-componentvuetify.jsvcalendar

how to make today date (v-present) always the middle column in vuetify calendar


vuetify v-calendar has specific days order (sun to sat) in Type week, then moving class v-present from left to right according today date, how to make today date that has (v-present) in the middle column enter image description here


Solution

  • After much time of searching and reading docs more over and over i found a work around solution,v-calendar takes a prop called weekdays its an array in which week starts at sun (0) and ends at sat (6) this is the default form [0,1,2,3,4,5,6] for that prop so i created weekDays in data property then running this method in mounted hook it works

     getWeekDays() {
        const dayNames = ["Sun", "Mon", "Tues", "Wed", "Thu", "Fri", "Sat"];
        let dateObj = new Date();
        let dayName = dayNames[dateObj.getDay()];
    
        switch(dayName){
          case"Sun":
            this.weekDays = [4,5,6,0,1,2,3]
            break;
          case"Mon":
            this.weekDays = [5,6,0,1,2,3,4]
            break;
          case"Tues":
            this.weekDays = [6,0,1,2,3,4,5]
            break;
          case"Wed":
            this.weekDays = [0,1,2,3,4,5,6]
            break;
          case"Thu":
            this.weekDays = [1,2,3,4,5,6,0]
            break;
          case"Fri":
            this.weekDays = [2,3,4,5,6,0,1]
            break;
          case"Sat":
            this.weekDays = [3,4,5,6,0,1,2]
            break;
            default:
            this.weekDays = [0,1,2,3,4,5,6]
        }
    },