Full Calendar: Coloring events using IF statement

Question

I have a calendar based upon tickets opened by the site administrator. We have four type of tickets:

1. Pending
2. In process
3. Finished
4. Cancelled

This is the div in which I have the calendar:

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

The database structure for the tickets is simple: id, title, description, date_at, time_at, created_at, tecnico_id and status_id.

I would like to "colorize" the events using an if script:

This is the code I have, however it doesn't work.

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

This is the calendar generated. These are the colors.

I want to make them match the color criteria, so the user has an idea of which tickets are the ones that are pending, incomplete, complete and cancelled. I'm a newbie to javascript and I don't know how to make this. Can you guys help me or point me on how I should do this?

Answer 1

You could set the color as you iterate through the array of events:

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

?>

Then just echo the events like you are doing now:

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