React 中的周历 - 选择多个日期的问题

Question

Herę is my little problem, I'd be very glad for help. I'm making simple week calendar, where students can book lessons. It'll have admin view (where admin can select available hours from whole week) and student view (where user will see calendar based on hours chosen by admin).

I have problem with selecting multiple dates by admin.

• Calendar should display hours from 7am-10pm (mon-sun). Here's my base code for mapping days and hours (that works fine, but maybe there is another way to do it better). Here is store:

export const hours = [
    {hour: "7:00"},
    {hour: "7:45"},
    {hour: "8:30"},
    {hour: "9:15"},
    {hour: "10:00"},
    {hour: "10:45"},
    Etc

export const dayNames = [
    {
        longName: 'Monday',
        shortName: 'Md'
    },
    {
        longName: 'Tuesday',
        shortName: 'Tue'
    },

Here is code that map this data:

const [active, setActive] = useState([])

...

<div className="calendar-days"> 
    {dayNames.map((item, dayIndex) => 
         <div className="day-column" >
             <h2 key={dayIndex}>{item.longName}</h2>
             {hours.map((hour, hourIndex) => {
                 const isActive = active.includes(hour.hour)
                 return (
                    <button
                       key={hourIndex}
                       onClick={() => setActive(isActive
                       ? active.filter(current => current !== hour.hour)
                       : [...active, {hour: hour.hour, hourId: hourIndex, dayId: dayIndex}])}
                       className={`
                          hour 
                          ${ isActive ? "active" : "" }
                       `}>
                       {hour.hour} 
                    </button>
                  )
              })}
          </div>
       )}  
    </div>

What this code do correctly:

• generates calendar with correct day & hours names

• onClick on hour button generates object with selected day id, hour id and hour (and store them in active state)

What it should do:

• give active class to object that is selected (and stored in active state)

• when active hour is clicked second time active class should be removed and object should be removed from active state

Thanks for any advices. If more code is needed please let me know.

Answer 1

The problem is in this line of code

const isActive = active.includes(hour.hour)

Here,

• hour.hour holds a string value ex: "7:00"
• active is a array of objects ex: [{hour: "7:00", hourId: 1, dayId: 0}]

So to find isActive you have to do like this,

const isActive = active.find(act => act.hour === hour.hour);

Then, while setting setActive also filter function can be modified as,

             setActive(
                isActive
                  ? active.filter((current) => current.hour !== hour.hour)
                  : [
                      ...active,
                      {
                        hour: hour.hour,
                        hourId: hourIndex,
                        dayId: dayIndex,
                      },
                    ]
              )

Hope it helps.