Полный календарь: раскраска событий с использованием оператора IF

Question

У меня есть календарь на основе заявок, открытых администратором сайта.У нас есть четыре типа билетов:

1. В ожидании
2. В процессе
3. Завершено
4. Отменено

Этоdiv, в котором у меня есть календарь:

<div class="col-lg-6 col-md-10 col-sm-11">
   <div class="card">
      <div class="card-header" data-background-color="blue">
         <h4 class="title">Calendario</h4>
      </div>
      <br>
      <section class="content">
         <?php
            $events = TicketData::getEvents();
                foreach($events as $event){
                    $thejson[] = array("title"=>$event->title,"url"=>"./?view=editticket&id=".$event->id,"start"=>$event->date_at."T".$event->time_at);
                }
            // print_r(json_encode($thejson));
            ?>
         <script>
            $(document).ready(function() {
                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next, today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    defaultDate: jQuery.now(),
                    editable: false,
                    eventLimit: true, // allow "more" link when too many events
                    events: <?php echo json_encode($thejson); ?>
                });

            });
         </script>
         <div class="row">
            <div class="col-md-12">
               <div id="calendar">
               </div>
            </div>
         </div>
      </section>
   </div>
</div>

Структура базы данных для заявок проста: id, title, description, date_at, time_at, created_at, tecnico_id и status_id.

Я хотел бы "раскрасить" события, используя скрипт if:

Это код, который у меня есть, однако он не работает.

<section class="content">
         <?php
            $events = TicketData::getEvents();
              // $status->status_id;
                foreach($events as $event){
                    $thejson[] = array("title"=>$event->title,"url"=>"./?view=editticket&id=".$event->id,"start"=>$event->date_at."T".$event->time_at,);
                $thejsonColor[] = array($event->status_id);
                }
            // print_r(json_encode($thejson));
            ?>
         <script>
            $(document).ready(function() {
                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next, today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    defaultDate: jQuery.now(),
                    editable: false,
                    eventLimit: true, // allow "more" link when too many events
                    events: <?php echo json_encode($thejson); ?>,
                if ($thejsonColor=1){
                  eventColor: 'fb8c00'
                }else if ($thejsonColor=2){
                  eventColor: 'ff0'
                } else if ($thejsonColor=3){
                  eventColor: '43a047'
                } else {
                  eventColor: '00acc1'
                }
                });             
            });
         </script>

Это сгенерированный календарь. Это цвета.

Я хочу, чтобы они соответствовали цветовым критериям, поэтомуУ пользователя есть представление о том, какие заявки ожидают, не завершены, завершены и отменены.Я новичок в JavaScript, и я не знаю, как это сделать.Ребята, вы можете мне помочь или указать, как мне это сделать?

Answer 1

Вы можете установить цвет при переборе массива событий:

<?php
    // helper function to pick the right color
    function getColor($id) {
        $eventColor = '';
        if ($id == 1) {
            $eventColor = '#fb8c00';
        } else if ($id == 2) {
            $eventColor = '#ff0';
        } else if ($id == 3) {
            $eventColor = '#43a047';
        } else {
            $eventColor = '#00acc1';
        }
        return $eventColor;
    }

    $events = TicketData::getEvents(); //pulls the events from TicketData.php
    foreach($events as $event) {
        $thejson[] = array(
            "title" => $event->title,
            "url" => "./?view=editticket&id=".$event->id,
            "start" => $event->date_at."T".$event->time_at,
            "color" => getColor($event->status_id));
    }

?>

Затем просто отобразите события, которые вы делаете сейчас:

     <script>
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next, today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultDate: jQuery.now(),
                editable: false,
                eventLimit: true, // allow "more" link when too many events
                events: <?php echo json_encode($thejson); ?>,
            });             
        });
     </script>