首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >完整日历:使用If语句为事件着色

完整日历:使用If语句为事件着色
EN

Stack Overflow用户
提问于 2018-05-29 01:48:49
回答 1查看 561关注 0票数 1

我有一个基于由网站管理员打开的门票的日历。我们有四种类型的票:

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

这是我保存日历的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>

票证的数据库结构很简单:idtitledescriptiondate_attime_atcreated_attecnico_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>

This is the calendar generated. These are the colors.

我想让它们与颜色标准相匹配,这样用户就可以知道哪些票证是未决的、未完成的、完整的和已取消的。我是javascript的新手,我不知道怎么做。你们能帮我或者告诉我该怎么做吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-29 06:14:15

您可以在迭代事件数组时设置颜色:

<?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>
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50571375

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档