[Vuejs]-How to get multiple td selection in VueJS

by

0👍

Let me suggest two ways of solving your task:

  1. Use Vuetify and its date and time pickers.
  2. Writing from scratch.

Now, lets talk about the second one. Your calendar is a 2D matrix (2d array), each cell has its own unique index x or [x,y]coordinates. When the user selects first td-cell and the second one you just need to loop from minimum index to maximum index and add selected class to td-cells.

Assume that this is your calendar:

(1)(2)(3)
(4)(5)(6)
(7)(8)(9)

If the user selected (4) and (8) you just need to loop from 4th index to 8th and add selected class. On the other hand, if the user chooses (8) and than (4) you just need to swap them and loop from minimal value to maximum adding to each td-cell selected class.

Leave a comment