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

?>

我想这样改：

如果标题包含 'Today' 那么它应该采用 className: booked
如果标题包含 'Tom' 那么它应该采用 className: bbked
如果标题包含 'Tues' 那么它应该采用 className: bked

如何获取数据并按我想要的方式进行设置？

Answer 1

在 PHP 而不是 JavaScript 中进行此更改更有意义，这样事件就会到达 ready-made 到日历中 - 这会更有效率。像这样的东西会起作用：

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

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

然后在您的 CSS 中您可以定义类类似这样的内容（当然您可以根据自己的喜好更改确切的颜色）：

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

.bbked
{
  background-color: #D0BEE9;
}

.bked
{
  background-color: #C95E5E;
}

P.S。您还需要删除

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。您不能在选项中指定两次 "events" 属性。任何 object 都是如此。如果您有两次（或更多）相同的属性，计算机无法区分它们，只会使用您声明的最后一个。

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

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

Fullcalendar: while fetching JSON data how to change event color separately for a particular event

javascript

php

jquery

fullcalendar

fullcalendar-3