Fullcalendar: при извлечении данных JSON как изменить цвет события отдельно для определенного события - PullRequest
Новая
       20

Fullcalendar: при извлечении данных JSON как изменить цвет события отдельно для определенного события

1 голос
/ 19 октября 2019

У меня есть это в моем 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
  • , если заголовок содержит «Вт», то ондолжен взять className: bked

Как мне получить данные и сделать так, как я хочу?

1 Ответ

1 голос
/ 21 октября 2019

Было бы более разумно сделать это изменение в 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. Вы не можете указывать свойство "events" дважды в опциях. Это верно для любого объекта. Если у вас есть одно и то же свойство дважды (или больше), компьютер не сможет их различить и будет использовать только последнее объявленное вами.

Вы также можете удалить весь раздел eventRender, так как теперь это не нужно, так какхорошо.

...