Javascript 是否可以在FullCalendar中的events:[]中设置每个事件的颜色？

我在使用FullCalendar

我正在使用PHP构建一个

事件：[]

列表：

<?php
    $dbh = new PDO('mysql:host=localhost;dbname=calendar', 'user', 'pass');
    $stmt = $dbh->prepare("SELECT * FROM holidays");

    $stmt->execute();

    $return_array = array();
    $event_array;

        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
          $event_array = array();

          $event_array['id'] = $row['id'];
          $event_array['title'] = $row['id'] . " - " . $row['forename'] . " " . $row['surname'];
          $event_array['start'] = $row['start'];
          $event_array['end'] = $row['end'];
          $event_array['allDay'] = true;

          // what I want to be able to do
          if ($row['department'] == 'UK') { $event_array['color'] = '#000000'; };
          if ($row['department'] == 'US') { $event_array['color'] = '#000000'; };
          else { $event_array['color'] = '#000000'; };

          array_push($return_array, $event_array);
        }

    echo json_encode($return_array);
?>

我想知道是否有可能给数组中的每个事件着色。我知道可以设置颜色，但这些颜色是在整个

eventSources:[]

上设置的，而不是在同一

eventSource

中每个事件都可以更改的颜色

---

有可能做到这一点吗？

我假设您的JS正确地显示了您创建的json数组，没有JS代码就无法判断

有一个名为

className

，它将指定添加到每个事件中的类

在您的示例中，您应该能够执行以下操作：

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
      $event_array = array();

      $event_array['id'] = $row['id'];
      $event_array['title'] = $row['id'] . " - " . $row['forename'] . " " . $row['surname'];
      $event_array['start'] = $row['start'];
      $event_array['end'] = $row['end'];
      $event_array['allDay'] = true;

      // Apply a different class depending on the department
      if ($row['department'] == 'UK') { 
          $event_array['className'] = 'uk_event'; 
      } else if ($row['department'] == 'US') { 
          $event_array['className'] = 'us_event'; 
      } else { 
          $event_array['className'] = 'general_event'; 
      };

      array_push($return_array, $event_array);
}

然后，在显示日历的页面上，可以使用一些CSS设置这些规则的样式，例如：

.uk_event {
    background-color:blue;
}

.us_event {
    background-color:red;
}

.general_event {
    background-color:black;
}

英国赛事应为蓝色，美国赛事应为红色等

看看几年前我用FullCalendar制作的日历，我必须更加具体，并将样式更改应用于子div：

 .uk_event div {
     background-color:blue;
 } 

不知道现在是否有必要，也不知道当时我为什么这样做。可能是版本差异的问题，我不确定，两种方法都试一下，看看其中一种是否有效

---

这就是如何执行此操作的一般思路。

event还支持使用

className

，将类应用于事件，并使用CSSperhaps，正如mlefvre建议的那样，使用jQuery.addClass（）如果需要原型和切换类？您还可以通过使用

className

而不是其

color

值来完成更多任务，例如@mlefvre您是否能够提供一个示例作为答案？@user3838132您已经创建了一个事件数组，但没有为其中任何一个指定

className

。如果添加另一行，

$event_array['className']='sazing_event'.mazing_event{background color:purple；}

是否有效？