How to change Vuetify calendar date format

No need to moment.js which will be used only for 2 lines of code, so you could do it simply like :

   addEvent () {
        this.start = new Date(this.start).toISOString().substring(0,10);
        this.end =  new Date(this.end).toISOString().substring(0,10);
        ...
            this.events.push({name: this.name,
                              details: this.details,
                              start: this.start,
                              end: this.end,
                             color: this.color})

See the Pen Vuetify Example Pen by boussadjra (@boussadjra) on CodePen.

As the developer of the Vuetify calendar, here's my two cents. The reason why events take a string is to distinguish between an all-day event and an event that is timed. An all-day event is in the format of YYYY-MM-DD and a timed event has the date format YYYY-MM-DD HH:mm:ss (where seconds is optional, and numbers don't need to be zero padded.)

Having said that, when this PR is merged in and released you will be able to pass dates or UTC timestamps:

https://github.com/vuetifyjs/vuetify/pull/11198

You can then define a function or property on the event that marks it as a timed event.

I would advice to format your date to MM-DD-YYYY instead of modifying vuetify, then convert it to whatever format you need when you submit the form.

Moment.js is an awesome library for this type of conversions and has an easy API.

In your case, you could simply do this.end = moment(this.end).format('MM-DD-YYYY');