Как сделать определенные столбцы полного календаря, становясь зеленым при перетаскивании события в календаре? ⇐ Javascript

[Anonymous]

Я использую полный календарь и хочу сделать так, чтобы, когда пользователь перетаскивал событие в календарь, в зависимости от области, в которой они перетаскивают событие, колонка меняет свой цвет на зеленый или красный (зеленый Столбцы находятся там, где событие может быть отброшено, а красные, где оно не может). Я пробовал различные полноценные функции календаря, однако ни один из них не сработал для меня, самое близкое, что я прихожу, - это выпустить событие, а при перемещении его во второй раз цветы колонн меняются. Я попытался использовать «EventDragstart», однако то, что я упомянул выше - это работает, когда событие будет в календаре, а не раньше. Что я хотел бы знать, так это то, есть ли возможность создать функцию, которая меняет цвета календаря при перетаскивании события, чтобы я мог оставить свой код таким В реальном времени, когда я перетащил мероприятие с этой новой функцией, я попробовал ее, но оно не сработало для меня.
Division отличается от подразделения календаря. < /p>
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' : '';
}
});
}
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... an-event-o