javascript - Fullcalendar:在获取 JSON 数据时如何为特定事件单独更改事件颜色

Question

我的 index.php 里有这个

<script>

  $(document).ready(function() {
   var calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
     left:'prev,next today',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    events:'load.php',
    events: [
    { // this object will be "parsed" into an Event Object
      title: 'Today', // a property!
      className: 'booked'  // a property! ** see important note below about 'end' **
    }
   ]
    eventRender: function(event, element) {
        if (event.className == 'booked') {
            element.css({
                'background-color': '#333333',
                'border-color': '#333333'
            });
        }
    }
</script>

并在 load.php 中

<?php

//load.php

$connect = new PDO('mysql:host=localhost;dbname=calendar_testing', 'root', '');

$data = array();

$query = "SELECT * FROM events ORDER BY id";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

foreach($result as $row)
{
 $data[] = array(
  'id'   => $row["id"],
  'title'   => $row["title"],
  'start'   => $row["start_event"],
  'end'   => $row["end_event"]
 );
}
// echo $data[1];

echo json_encode($data);

?>

我想这样改:

• 如果标题包含“今天”，那么它应该采用 className: booked
• 如果标题包含 'Tom' 那么它应该采用 className: bbked
• 如果标题包含“Tues”，那么它应该采用 className: bked

我怎样才能获取数据并按我想要的方式进行处理？

Answer 1

在 PHP 中进行此更改比在 JavaScript 中进行更有意义，这样事件就会以现成的形式进入日历 - 这样会更有效率。这样的事情会起作用:

foreach($result as $row)
{
 $className = "";
 if (strpos($row["title"], "Today") !== false)
     $className = "booked";
 else if strpos($row["title"], "Tom") !== false)
     $className = "bbked";
 else if strpos($row["title"], "Tues") !== false)
     $className = "bked";
 }

 $data[] = array(
  'id'   => $row["id"],
  'title'   => $row["title"],
  'start'   => $row["start_event"],
  'end'   => $row["end_event"],
  'className' => $className
 );
}

参见 https://www.php.net/manual/en/function.strpos.php有关我用来在您的标题中查找请求的子字符串的 PHP 函数的详细信息。

然后在您的 CSS 中，您可以像这样定义类(当然您可以根据自己的喜好更改确切的颜色):

.booked
{
  background-color: #57C764;
}

.bbked
{
  background-color: #D0BEE9;
}

.bked
{
  background-color: #C95E5E;
}

---

附言您还需要删除

events: [
{ // this object will be "parsed" into an Event Object
  title: 'Today', // a property!
  className: 'booked'  // a property! ** see important note below about 'end' **
}
]

来自您的 JavaScript。您不能在选项中两次指定“事件”属性。任何物体都是如此。如果您拥有相同的属性两次(或更多次)，计算机将无法区分它们，只会使用您声明的最后一个。

您还可以删除整个 eventRender 部分，因为现在也不需要了。