I am currently working on implementing inputted events into the Vuetify calendar provided in this link:
The issue I'm facing is that when I try to submit data through a form to add an event to the calendar, I receive an error message stating that
the start and end properties are required for all events in a valid timestamp format of YYYY-MM-DD.
In my form, I have fields for name, details, start date, end date, and color. The problem arises because the dates render in MM-DD-YYYY format by default, while the calendar requires them in YYYY-MM-DD format. Even after attempting to use the Vuetify date picker instead of type="date", the issue persists. How can I adjust the calendar to accept dates in MM-DD-YYYY format?
MODIFICATIONS MADE TO CALENDAR:
Moment added to function
async addEvent () {
this.start = await new Date(this.start).toISOString().substring(0,10)
this.end = await new Date(this.end).toISOString().substring(0,10)
this.events.push({name: this.name})
this.events.push({details: this.details})
this.events.push({start: this.start})
this.events.push({end: this.end})
this.events.push({color: this.color})
},
Full Code Snippet:
<template>
<!-- Calendar template code here -->
</template>
<script>
// JavaScript script with Vue methods
</script>