基于资源/房间颜色的事件颜色 - Fullcalendar.js PHP MySQL

Question

我想根据每个房间的颜色显示事件颜色/背景颜色（我为 3 个不同的房间/资源设置了 3 种不同的颜色）。但是，在每个不同房间（3 个房间）的每个事件中，从 resources.php 解析的颜色并未按照我的预期显示。所以我想根据 MySQL 数据库上的房间位置 (room_id) 更改事件的颜色。

日历：

资源.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();

脚本.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 上尝试了一切可能的方法来更改背景颜色或文本颜色，以根据视图类型中 script.js 中的每个房间显示相同的颜色 - 甚至使用 eventDidMount （如图所示）。

现在它只为每个事件显示绿色（#179f66）。

我尝试将 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;
        });
      }
    },

但它只会改变点的颜色：

Answer 1

根据 eventDisplay 文档，默认情况下，您只会在 dayGrid 视图中看到定时事件上的点，而不是彩色矩形。

如果您想在 dayGrid 视图中看到该彩色矩形，只需将

eventDisplay

设置更改为

block

，如下所示：

eventDisplay: "block"

那么您就不需要任何

eventDidMount

代码。

工作演示：https://codepen.io/ADyson82/pen/JjqgWWw