I am attempting to build a Vuetify calendar based on the following repo: https://github.com/jsfanatik/vuestacks-calendar-vue-firebase. My goal is to enable the user to add a new calendar event by clicking directly on a date in the calendar, as opposed to merely clicking the new event button at the top of the UI. To achieve this, I changed @click:date="viewDay to @click:date="dialogDate = true" in order to enable clicking of a date to open a new event input dialog box (see dialog box code below). I want to modify this new dialog box so that the start and end time of the date clicked (presumably 12am to 12am) are automatically passed into this dialog box and bound to the start and end fields as soon as the user clicks a given date. Any recommendations on how to achieve this?
Dialog - Date click
<v-dialog v-model="dialogDate" max-width="500">
<v-card>
<v-container>
<v-form @submit.prevent="addEvent">
<v-text-field v-model="name" type="text" label="event name (required)"></v-text-field>
<v-text-field v-model="details" type="text" label="detail"></v-text-field>
<v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
<v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
<v-text-field v-model="color" type="color" label="color (click to open color menu)"></v-text-field>
<v-btn type="submit" color="primary" class="mr-4" @click.stop="dialog = false">
create event
</v-btn>
</v-form>
</v-container>
</v-card>
</v-dialog>