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

不确定现在是否需要，或者为什么我那样做呢？可能是一个版本差异的东西，我不确定，试试两个，看看是否有效。

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

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

1 个答案: