是否可以在事件中为每个事件设置颜色：FullCalendar 中的 []？答案

【问题标题】：Is it possible to set colors per single event within events: [] in FullCalendar?是否可以在事件中为每个事件设置颜色：FullCalendar 中的 []？
【发布时间】：2014-08-01 18:22:22
【问题描述】：

我在 http://arshaw.com/fullcalendar/ 使用 FullCalendar。

我正在使用 PHP 构建一个events: [] 列表：

<?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);
?>

我想知道是否可以为数组中的每个单独事件着色。我在http://arshaw.com/fullcalendar/docs/event_data/events_array/ 看到可以设置颜色，但这些颜色是在整个eventSources: [] 上设置的，而不是可以在同一eventSource 中更改每个事件的颜色。

可以这样做吗？

【问题讨论】：

事件也支持使用className，对事件应用类，使用CSS
也许，正如 MLeFevre 所建议的，在需要的地方使用 jQuery.addClass() 原型和切换类？
您还可以通过使用className 而不是它们的color 值来完成更多工作，例如i.imgur.com/lDH5R2k.png
@MLeFevre 你能提供一个例子作为答案吗？
@user3838132 您已经创建了一个事件数组，但没有将className 分配给其中任何一个。如果您添加另一行，例如 $event_array['className'] = 'amazing_event';，那么像 .amazing_event { background-color:purple;} 这样的 css 规则会起作用吗？

标签： javascript jquery fullcalendar

【解决方案1】：

我假设您的 JS 正确显示了您创建的 json 数组，如果没有您的 js 代码则无法判断。

an attribute you can use 称为 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;
 }

不确定现在是否有必要，或者我当时为什么这样做。可能是版本不同的问题，我不确定，两个都试试看是否可行。

无论如何，这就是如何做到这一点的总体思路。

【讨论】：