是否可以在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代码。

您可以使用一个名为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;
 } 

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

这就是怎么做的大致思路