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:
fullcalendar website](https://i.sstatic.net/8aUdaRTK.png)

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 ways 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 display the green color (#179f66) for every event.

i tried to chage 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: