完整日历:使用 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>