Изменить стиль CSS для div на основе значения из массива

Question

Я попробовал различные методы из ответов здесь, в Stackoverflow, но, похоже, ни один из них не помог.

Я добавил hall_no в свой полный календарь, и hall_no имеет три варианта,

1. HallA
2. Зал B
3. Зал A + B.

Я хочу изменить цвет фона div (.fc-event) на основе значений из hall_no.

$data_events = array();

 foreach($events->result() as $r) {

     $data_events[] = array(
         "id" => $r->id,
         "title" => $r->name . "\n" . "\n" . $r->hall_no,
         "end" => $r->end,
         "start" => $r->start
     );
 }

 echo json_encode(array("events" => $data_events));
 exit();
 }

public function halla(){
    if (isset($_GET['hall_no'])){
        $query = $_GET['hall_no'];
    }else{
        $query = NULL;
    }
}

public function hallb(){
    if ($query == 'Hall A'){
            "<style>
                .fc-event{background-color:#00cc00;}
            </style>"
    }elseif ($query == 'Hall B'){
            "<style>
                .fc-event{background-color:#ff1a8c;}
            </style>"
    }else{
            "<style>
                .fc-event{background-color:#00ffff;}
            </style>"
    }
}

Я также попробовал функцию in_array ():

$data_events = array();

 foreach($events->result() as $r) {

     $data_events[] = array(
         "id" => $r->id,
         "title" => $r->name . "\n" . "\n" . $r->hall_no,
         "end" => $r->end,
         "start" => $r->start
     );
 }

 echo json_encode(array("events" => $data_events));
 exit();
 }

if (in_array("Hall A", $data_events))
      {
      "style=.fc-event{background-color:#00cc00} ";
      }
    elseif (in_array("Hall B", $data_events))
      {
      "style=.fc-event{background-color:#ff1a8c} ";
      }
    else
      {
      "style=.fc-event{background-color:#00ffff} ";
      }

Answer 1

Fullcalendar на самом деле имеет функцию, чтобы помочь вам в этом, установив свойство для вашего события. Затем fullCalendar автоматически выполнит настройку цвета для получающегося HTML-элемента.

См. https://fullcalendar.io/docs/event-object - вы можете выбрать один из следующих вариантов:

"цвет": устанавливает цвет фона и границы события

или

"backgroundColor": устанавливает цвет фона события

Так что вы можете просто сделать что-то вроде этого:

foreach($events->result() as $r) {
    $color = "";
    switch ($r->hall_no) {
      case "Hall A":
        $color = "#00cc00";
        break;
      case "Hall B":
        $color = "#ff1a8c";
        break;
      default:
        $color = "#00ffff";
        break;
    }

    $data_events[] = array(
      "id" => $r->id,
      "title" => $r->name . "\n" . "\n" . $r->hall_no,
      "end" => $r->end,
      "start" => $r->start,
      "color" => $color
    );
}

Теперь каждое событие будет окрашено в соответствии со значением «Hall_no», связанным с ним.

P.S. Ваше решение, основанное на написании <style> элементов, никогда не будет работать, потому что эти правила, основанные на классе "fc-event", будут влиять на все элементы события, так как все они несут этот класс, а не только один которые имеют это конкретное значение данных.

Answer 2

Вы не повторили стиль, который применяете через php.

echo "style=.fc-event{background-color:#00cc00} ";