I want to display the event color / background color based on each room's color (I have 3 different colors for 3 different rooms/resource). But the parsed colors from resources.php wasn't displayed as I expected in every events on each different rooms (3 rooms). So I want to change the event's colors based on their room's placement (room_id) on MySQL db.
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();
}
I tried every possible way on script.js to change the backgroundColor or textColor to display the same color based on each rooms in my script.js in view types - even using eventDidMount like the shown image.
Now it just displays the green color (#179f66) for every event.
I tried to change the eventDidMount to this:
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;
});
}
},
but it only changes the dots color: