Changing the class in the calendar component using the element Id will result in the selected date being highlighted in each month

Question

Changing the class in the calendar component using the element Id will result in the selected date being highlighted in each month

I have created a basic Vue calendar where the days of the month are shown using a v-for loop that generates an array of $refs. Each date element has a unique ID assigned to it. The issue I am facing is that when I try to highlight a particular day by clicking on it, the same day in every other month also gets highlighted. For example, if I click on May 25th, the 25th of every other month ends up being highlighted as well, even though I am toggling the class based on the specific element's ID.

Is there a way to only highlight the selected day without affecting others?

Below is the code snippet for the highlight method:

highlightDay(index) {
                let selected = this.$refs.day[index].id;
                if (!this.$refs.day[index].classList.contains("today")) {
                    this.$refs.day.forEach(el => {
                        if (el.classList.contains("selected-day")) {
                            el.classList.toggle("selected-day");
                        }
                    });
                    document
                        .getElementById(selected)
                        .classList.toggle("selected-day");
                }
            }

For reference, here is a link to the full project: https://codepen.io/reticent67/pen/EzWomG

javascript vue.js vuejs2

Answer 1

Answer №1

The issue you are encountering is due to relying on DOM elements, using $refs, to save your chosen day.

It would be beneficial to transition away from this approach (referred to as jQuery logic, which often results in complicated DOM changes, even for straightforward scenarios like yours) and instead adopt a methodology tailored to SPAs. This involves utilizing the virtual model (commonly denoted as vm) as the single source of truth ¹.

In relation to your component, rather than storing the selected day as the id of the currently displayed day, I recommend storing it as an array composed of 3 elements: [day, month, year] ².

To transmit this information to the display layer, you can create a method:

isSelected(index) {
  return this.selectedDay === [index, this.month, this.year];
}

The day markup should include something similar to this:

<div 
  v-for="(date, date_index) in months[month].days" 
  :key="date_index" 
  :class="[{ 'selected-day': isSelected(date_index) }]">{{ date }}
</div>

I have integrated this solution into your provided example here.
Additionally, I streamlined the highlightDay() function by simply assigning the selectedDay value with the aforementioned array or unsetting it if they match (to enable deselection by clicking on the selected item).

_{[1] -} _{It is important to acknowledge that in more intricate scenarios where data needs to be shared across app components, Vue offers a dedicated data management module known as Vuex (however, we do not utilize it in this instance).}

_{[2] -} _{In order to eliminate observer data (used by Vue to monitor changes), I opted to store the array in selectedDay as a JSON string.}

Answer 2

The issue you are encountering is due to relying on DOM elements, using $refs, to save your chosen day.

It would be beneficial to transition away from this approach (referred to as jQuery logic, which often results in complicated DOM changes, even for straightforward scenarios like yours) and instead adopt a methodology tailored to SPAs. This involves utilizing the virtual model (commonly denoted as vm) as the single source of truth ¹.

In relation to your component, rather than storing the selected day as the id of the currently displayed day, I recommend storing it as an array composed of 3 elements: [day, month, year] ².

To transmit this information to the display layer, you can create a method:

isSelected(index) {
  return this.selectedDay === [index, this.month, this.year];
}

The day markup should include something similar to this:

<div 
  v-for="(date, date_index) in months[month].days" 
  :key="date_index" 
  :class="[{ 'selected-day': isSelected(date_index) }]">{{ date }}
</div>

I have integrated this solution into your provided example here.
Additionally, I streamlined the highlightDay() function by simply assigning the selectedDay value with the aforementioned array or unsetting it if they match (to enable deselection by clicking on the selected item).

_{[1] -} _{It is important to acknowledge that in more intricate scenarios where data needs to be shared across app components, Vue offers a dedicated data management module known as Vuex (however, we do not utilize it in this instance).}

_{[2] -} _{In order to eliminate observer data (used by Vue to monitor changes), I opted to store the array in selectedDay as a JSON string.}

Changing the class in the calendar component using the element Id will result in the selected date being highlighted in each month

Answer №1

Similar questions

ESLint's no-unused-vars rule is triggered when Typescript object destructuring is employed

Encountering a blank page issue with react-router-dom v6 Routes

Retrieve the CSS selector for the element that my plugin has been implemented on

Guide on setting default attributes for all properties of an object at once

Troubleshooting Vue computed property access issues

What methods can I use to interpret this incorrect JSON data in jQuery?

implement an angular directive to apply a CSS element

How to simulate axios in a vue3 typescript unit test with jest and vue-test-utils2 (Resolved)

Using AJAX to retrieve a specific JSON object from an array of JSON data

I am facing an issue where an AJAX post to Express is not returning any data to req.query. I have tried various solutions but nothing seems to

What is the best way to split the vertices of a mesh in Three.js?

Is there a way to verify if an email is already registered within a MERN stack application

Guide to eliminating hashtags from the URL within a Sencha web application

`The challenge of properly handling quotation marks within quotation marks in JavaScript string literals

The shared hosting environment encountered an error during the Next JS build process

What is the best way to eliminate HTML <li> bullets using codebehind?

Connect an angular directive template to an event

Issue with updating the :value binding within a select tag in Vue 3 component template using Composition API

What is preventing me from disabling the ordering feature on my DataTable?

Combining multiple storageStates in a playwright context for efficient loading