我有一个基于站点管理员打开的票证的日历。我们有四种类型的门票:
这是我有日历的
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 的新手,我不知道如何做到这一点。你们能帮助我或指出我应该如何做吗?
您可以在迭代事件数组时设置颜色:
<?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>
或者您可以通过从 php 中的表中选择来完成此操作,例如:
$sql = "SELECT CASE WHEN tickets='Pending'" THEN '#C6E0B4' WHEN tickets='In progres' THEN '#FFFF99' END AS color"
$schedules = $conn->query($sql);
$sched_res = [];
foreach($schedules->fetch_all(MYSQLI_ASSOC) as $row){
$sched_res[$row['id']] = $row;
}
然后就像你现在正在做的那样回显事件:
<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>