How to make certain columns of Full Calendar turn green when dragging an event on the calendar?

Question

I am using full calendar and I want to make it so that when the user drags an event to the calendar, depending on the area in which they are dragging the event, the column changes its color to green or red (the green columns are where the event can be dropped and the red ones where it cannot). I have tried various full calendar functions, however none of them have worked for me, the closest I come is to releasing the event and when moving it a second time the colors of the columns change. I tried using "eventDragStart", however what I mentioned above happens - it works once the event is in the calendar and not before. What I would like to know is if there is any possibility of creating a function that changes the colors of the calendar when dragging the event, so I could leave my code like this and in addition I could also see the allowed and not allowed places in real time since I dragged the event with this new function, I have tried it but it has not worked for me. Event division is different from calendar division.

eventDragStart: function (info) {
        if (info.event.title === "allowed example") {
          document.querySelectorAll('td.fc-timegrid-col[data-resource-id]').forEach(cell => {
            const recursoId = cell.getAttribute('data-resource-id');
            console.log("ID encontrado:", recursoId);

            if (recursoId === "1" || recursoId === "3") {
              cell.style.backgroundColor = 'lightgreen';
            } else {
              cell.style.backgroundColor = 'lightcoral';
            }
          });
        }
      },

function configureDragEvents() {
  const events = document.querySelectorAll(".fc-event");
  const calendarEl = document.getElementById("calendar");

  eventos.forEach(evento => {
    evento.setAttribute("draggable", "true");

    evento.addEventListener("dragstart", function () {
      console.log("drag start");
      iluminarColumnas(true);
    });

    evento.addEventListener("dragend", function () {
      console.log("drag end");
      iluminarColumnas(false);
    });
  });

  document.addEventListener("dragover", function (e) {
    if (e.target.closest("#calendar")) {
      console.log("drag over");
      iluminarColumnas(true);
    }
  });

  document.addEventListener("dragleave", function (e) {
    if (!e.relatedTarget || !e.relatedTarget.closest("#calendar")) {
      console.log("drag leave");
      iluminarColumnas(false);
    }
  });

  function iluminarColumnas(activar) {
    document.querySelectorAll('td.fc-timegri`your text`d-col[data-resource-id]').forEach(cell => {
      const recursoId = cell.getAttribute('data-resource-id');

      if (recursoId === "1" || recursoId === "3") {
        cell.style.backgroundColor = activar ? 'lightgreen' : '';
      }
    });
  }
}