CODEWITHSUNDEEP
vue.js
Nancy
Nancy

Reputation: 1051

Customize vuetify v-calendar day names

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?

Upvotes: 0

Views: 3539

Answers (2)

DQVIST
DQVIST

Reputation: 1

Simple solution

        <v-calendar

              :weekday-format="getDay">

        </v-calendar>


getDay(date){

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

  return WeekDays[date.weekday];
  
}

Upvotes: 0

Raymond Camden
Raymond Camden

Reputation: 10857

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

    }

Upvotes: 3

Related Questions