javascript - 是否可以为事件 : [] in FullCalendar? 中的每个事件设置颜色

Question

我正在 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 中针对每个事件进行更改的颜色。

可以这样做吗？

Answer 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;
 } 

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

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