Цвет события на основе цвета ресурса/комнаты – Fullcalendar.js PHP MySQL ⇐ Php

[Anonymous]

Я хочу отображать цвет события/цвет фона в зависимости от цвета каждой комнаты (у меня есть 3 разных цвета для 3 разных комнат/ресурсов). Но проанализированные цвета из resources.php не отображались так, как я ожидал, во всех событиях в каждой комнате (3 комнаты). Поэтому я хочу изменить цвета событий в зависимости от размещения их комнаты (room_id) в базе данных MySQL.
calendar:


resources.php

Код: Выделить всё

$sql = "SELECT id, room_name AS title FROM room_list";
$stmt = $conn->prepare($sql);
$stmt->execute();
$result = $stmt->get_result();

$colors = ['#00DCFF', '#fe9e0c', '#179f66'];
$colorIndex = 0;

$resources = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$row['color'] = $colors[$colorIndex % count($colors)];
$resources[] = $row;
$colorIndex++;
}
}

echo json_encode($resources);

$stmt->close();

script.js

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function () {
$.ajax({
url: "models/resources.php",
type: "GET",
dataType: "json",
success: function (resources) {
initializeCalendar(resources);
},
});
});

function initializeCalendar(resources) {
let events = [];
if (scheds) {
Object.keys(scheds).map((k) => {
let row = scheds[k];
let room = resources.find((resource) => resource.id == row.room_id);
let color = room.color;
let event = {
id: row.id,
title: row.title,
start: row.start_datetime,
end: row.end_datetime,
resourceId: row.room_id,
backgroundColor: color,
borderColor: color,
};

events.push(event);
});
}
let calendarEl = document.getElementById("calendar");
let calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
headerToolbar: {
left: "prev,next,today",
center: "title",
right:
"resourceTimeGridDay,resourceTimeGridFourDay,resourceTimeGridMonths",
},
views: {
resourceTimeGridFourDay: {
type: "resourceTimeGrid",
duration: { days: 3 },
buttonText: "3 Days",
},
resourceTimeGridMonths: {
type: "dayGridMonth",
duration: { months: 1 },
buttonText: "Months",
},
resourceTimeGridDay: {
buttonText: "Day",
},
},
resources: resources,
events: events,
editable: true,
allDaySlot: false,
datesAboveResources: true,
eventDidMount: function (info) {
if (scheds) {
Object.keys(scheds).map((k) => {
let row = scheds[k];
let room = resources.find((resource) => resource.id == row.room_id);
let color = room.color;
info.el.style.backgroundColor = color;
});
}
},
});

calendar.render();
}

Я пробовал все возможные способы в script.js изменить фоновый цвет или textColor, чтобы отображать один и тот же цвет в зависимости от каждой комнаты в моем script.js в типах представлений - даже используя eventDidMount, как показано image.
Теперь он просто отображает зеленый цвет (#179f66) для каждого события.
Я попытался изменить eventDidMount на это:
Я попытался изменить eventDidMount на это:
р>

Код: Выделить всё

eventDidMount: function (info) {
if (scheds) {
Object.keys(scheds).map((k) => {
let row = scheds[k];
let room = resources.find((resource) => resource.id == row.room_id);
let color = room.color;
info.event.extendedProps.backgroundColor = color;
});
}
},

но он меняет только цвет точек:
[img]https:/ /i.sstatic.net/oJSFoI5A.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/786 ... -php-mysql