Customize vuetify v-calendar day names

Question

I want to change the default day names from MON, TUE, WED, THU, FRI, SAT, SUN to the day names in spanish but without changing the time layout which is 7 AM, 8 AM, 9 AM ...

However If I change the locale to locale="es" the names change but the time layout changes to 1, 2, 3, ...

I don't want to change the time layout so using the locale prop doesn't work for me, is there a way to change the day names another way?

Answer 1

Use the weekday-format setting. This lets you specify a function where you can return a value for the day of the week. Here is a CodePen I wrote that only returns POOP (sorry), but shows you the function in action:

https://codepen.io/cfjedimaster/pen/PowOZVy?editors=1111

I know SO doesn't like links to solutions, I'll copy over the bits here:

<v-calendar
stuff here...
:weekday-format="myDayFormat"
>

And then later on,

methods: {
    myDayFormat(d) {
     //if you look at d.weekday, it's a number 0 to 6, and you could hard code
     //values for each, like if its 0, return "XXX", where XXX is Sunday for Spanish

    }

Answer 2

Simple solution

        <v-calendar

              :weekday-format="getDay">

        </v-calendar>


getDay(date){

  const WeekDays = ['7', '1', '2', '3', '4', '5', '6'];

  return WeekDays[date.weekday];
  
}