时间戳

首页 > 解决方案 > Fullcalendar：在获取 JSON 数据时如何为特定事件单独更改事件颜色

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

问题描述

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

?>

我想这样改变它：

如何获取数据并按照我的意愿进行操作？

标签： javascriptphpjqueryfullcalendarfullcalendar-3

解决方案

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

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

然后在您的 CSS 中，您可以定义类似这样的类（当然您可以更改确切的颜色以适合您的偏好）：

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

.bbked
{
  background-color: #D0BEE9;
}

.bked
{
  background-color: #C95E5E;
}

PS你还需要删除

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部分，因为现在也不需要了。

推荐阅读