javascript - 完整日历 : Coloring events using IF statement

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>

This is the calendar generated. These are the colors.

我想让它们与颜色标准相匹配，以便用户了解哪些票是未决的、未完成的、已完成的和已取消的。我是 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>