Clickable Element Embedded within Event Date - Developed with Vue.js

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...
      },
    };

Answer №1

Include a new attribute in all your events, named expanded. Instead of using @click="showDetails()", switch to

@click="event.expanded = !event.expanded"
.

After that, place the conditionally displayed DIV within the event template and incorporate

<div v-show="event.expanded">....</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain how the interactive notification on stackoverflow is generated when you are responding to a question and someone posts a new answer?

Have you ever been in a situation where you're writing an answer to a question, but then someone else posts their response and a popup appears notifying you of the new answer? I'm curious about how that whole process works. It seems like the answ ...

Struggling with implementing nested for loops

I am struggling to find a solution for this issue. I need to compare the content of two arrays with each other. If they are exactly the same, I want to execute the if statement; otherwise, I want the else statement to be executed. The current setup is ca ...

Is there a way to efficiently include numerous jQuery scripts in a batch process, each with a slight variation, using a loop?

Currently, I have a script that calculates the blur effect for multiple images based on the mouse position and scroll position. However, I am looking for a more efficient way to apply this to around 100 images without duplicating the script each time. var ...

Module request: How can I save the gathered cookies as a variable?

library: https://www.npmjs.com/package/request I am attempting to simultaneously log in with multiple accounts on a website. To manage each session effectively, I plan to create an object where I will store the cookies associated with each account. Now, ...

Modifying icons with JavaScript

When I click on the play icon, it changes to the pause icon. However, I am only able to change the first icon from play to pause in my JavaScript code. How can I apply this functionality to all the audio elements on the page? let playIcon = "https://ima ...

AngularJS Error: Attempting to Access Undefined Object - Jasmine Testing

Encountering an error while running Jasmine tests when trying to mock/spy on an API call in the tests. Below is the code snippet responsible for calling the API: UploadedReleasesController.$inject = ['$log', '$scope', '$filter&apo ...

Adding a JavaScript variable into a Django template tag

This particular situation has been presenting a challenge for me. So far, I have been using query parameters instead of a variable within the {% url %} tag. However, I can't help but wonder if there is a way to achieve this: I am interested in includ ...

Why is my PanResponder failing to detect changes in the updated state?

This is the code snippet I'm currently working on: const processPinch = (x1: number, y1: number, x2: number, y2: number) => { function calcDistance(x1: number, y1: number, x2: number, y2: number) { const dx = x1 - x2; const dy = y1 ...

Transform the v-model value from numerical to textual representation

Currently, I am using the <q-select> component and populating it with options fetched from an API. The issue arises when setting the value as the ID of the object, which is a number while the component expects a string, resulting in an error. <s- ...

How can I locate a single hidden field within a div containing multiple fields?

Within one div, I have three hidden fields. How can I access and retrieve just one of these hidden fields when referencing this specific div? ...

Issue with displaying a vTable component in VueJS / Vuetify

I am struggling with this basic HTML/Vue/Vuetify code snippet below, and I can't seem to get it functioning as intended. const { createApp, computed, ref, reactive } = Vue; const { createVuetify } = Vuetify; const ...

Ways to exclusively allow cookies from my API server

I am running an Expressjs API server on localhost:4000, and my client on localhost:8008. Is there a way to ensure that my client only accepts cookies originating from my API server? At the moment, I am using fetch with credentials: 'include' to ...

Change to a dark theme using React hooks in typescript

Hello, I am new to React and English is not my first language, so please excuse any mistakes. I have been trying to enable a dark mode feature on my website. Most examples I have found involve toggling between dark and light modes where you need to specify ...

Utilizing @casl/vue in conjunction with pinia: A guide to integrating these

I'm currently facing an issue with integrating @casl/ability and Vue 3 with Pinia. I'm unsure of how to make it work seamlessly. Here is a snippet from my app.js: import { createApp } from "vue" const app = createApp({}) // pinetree i ...

Tips for resetting input and select values in VUE

In my VUE application, I have an input and a select that are displayed based on the selection of a previous input. When I enter values and change the initial input selection, I hide the second input and select to reset the form. However, even after resetti ...

Discover the row and column of a selected table cell using vanilla JavaScript, no need for jQuery

In my JavaScript code, I am currently working on creating an onclick function that will display the row and column of a specifically clicked cell in a table. I have successfully implemented functionality to return the column number when the cell is click ...

Automatically populate select boxes with values from a different source using PHP

I'm in the process of setting up automatic population for 2 select boxes on a website. When a user chooses a class, the second select box automatically displays the main specialization of that class. If the user selects Tank (for example), the third ...

Utilizing erb within a coffeescript file for modifying the background styling

Is there a way to change the background image of a div based on user selection from a dropdown menu? For instance, if the user picks "white" the background image becomes white, and for "red" it changes to red. I'm struggling with this in coffeescript ...

How can I manually set a date in Angular bootstrap datepicker?

Using the Angularjs Bootstrap datepicker has been a great experience, but I encountered a problem when attempting to select the date using JavaScript. How can I ensure that the selected date in the datepicker matches the date read from a specific object, s ...

Utilizing dynamic routes and incorporating additional search parameters within the URL structure in NextJS has never

Is there a way to use router.push(url); to redirect a user with a URL structure like this: [:lang]/something/[...dynamicRouteParams]?searchParam=true. The problem I'm facing is that the user ends up being redirected to a page with a URL structure lik ...