Currently, I am utilizing Vuetify's calendar component. My task involves displaying and concealing specific information within a calendar event upon clicking a button located inside the same event. While I have succeeded in showing or hiding the div element, this action applies to all calendar events rather than just the one adjacent to the clicked button. Is there anyone who can provide assistance with this issue?
https://i.sstatic.net/4R9HK.png
Below is the code snippet -
<v-calendar
ref="calendar"
v-model="focus"
color="primary"
:events="events"
:event-color="getEventColor"
:type="type"
first-interval="6"
interval-height="72"
@click:more="viewDay"
@click:date="viewDay"
@change="updateRange"
>
<template v-slot:event="{ event }">
<div>
<div
class="ml-8 mr-12 mt-5 pb-2"
style="border-bottom: 1px solid #0063a7; display: flow-root"
>
<div style="float: left">
<div class="mr-4" style="float: left">
<v-btn
id="btn-open"
text
icon
color="#0063A7"
v-on:click="ShowDetails()"
><v-icon large>mdi-menu-down</v-icon></v-btn
>
<v-btn
id="btn-close"
text
icon
color="#0063A7"
style="display: none"
><v-icon large>mdi-menu-up</v-icon></v-btn
>
</div>
<div>
<p class="event-header-time">
{{ event.time }}
</p>
<p class="event-header-name" style="font-weight: bold">
{{ event.name }}
</p>
</div>
</div>
<div style="float: right">
<v-btn class="event-header-btn" text
>Begin Inventory<v-icon class="pl-5"
>mdi-arrow-right</v-icon
></v-btn
>
</div>
</div>
<div v-show="selectedOpen" id="div-event-data">
<p>test</p>
</div>
</div>
</template>
</v-calendar>
export default {
name: "calender",
data: () => ({
focus: "",
type: "day",
typeToLabel: {
month: "Month",
week: "Week",
day: "Day",
"4day": "4 Days",
},
selectedEvent: {},
selectedElement: null,
selectedOpen: false,
events: [
{
time: "10:00 - 11:30",
name: "Pharmacy B | SUNS008",
start: "2021-05-13 10:00:00",
end: "2021-05-13 11:30:00",
color: "cyan",
},
// Additional event objects...
],
colors: [
"blue",
"indigo",
"deep-purple",
"cyan",
"green",
"orange",
"grey darken-1",
],
names: [
"<h1>Meeting</h1>",
"Holiday",
"PTO",
"Travel",
"Event",
"Birthday",
"Conference",
"Party",
],
}),
mounted() {
this.$refs.calendar.checkChange();
},
methods: {
viewDay({ date }) {
this.focus = date;
this.type = "day";
},
getEventColor(event) {
return event.color;
},
setToday() {
this.focus = "";
},
// Other method definitions...
},
};