时间戳

首页 > 解决方案 > 完整日历：使用 IF 语句为事件着色

javascript - 完整日历：使用 IF 语句为事件着色

问题描述

我有一个基于站点管理员打开的工单的日历。我们有四种票：

  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_idstatus_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 的新手，我不知道如何制作这个。你们能帮我或指出我应该怎么做吗？

标签： javascriptphphtmlmysqlifullcalendar

解决方案

您可以在遍历事件数组时设置颜色：

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

推荐阅读