如何通过IF语句为Full Calendar工单事件设置颜色区分？

Hey there! Let's get that event coloring working for your ticket calendar. The main issues with your current code are:

• You're mixing PHP and JavaScript logic incorrectly (you can't use PHP variables directly in a JS if statement like that)
• Putting an if block directly inside the FullCalendar configuration object isn't valid JavaScript syntax

Let's go with the simplest, most straightforward solution: add the color directly to each event in your PHP code before passing it to FullCalendar. Here's how to do it step by step:

Step 1: Update Your PHP Event Generation #

First, define a mapping between your ticket status IDs and the colors you want. Then, when building each event object, assign the corresponding color based on the ticket's status_id.

<section class="content">
<?php 
$events = TicketData::getEvents();

// Define your status-to-color mapping (match your status IDs)
$statusColorMap = [
    1 => '#fb8c00',   // Pending (orange)
    2 => '#ff0',      // In process (yellow)
    3 => '#43a047',   // Finished (green)
    4 => '#00acc1'    // Cancelled (cyan)
];

$thejson = [];
foreach($events as $event){
    // Get the color for this event's status (fallback to cyan if status ID is unknown)
    $eventColor = isset($statusColorMap[$event->status_id]) ? $statusColorMap[$event->status_id] : '#00acc1';
    
    // Build the event array with color included
    $thejson[] = [
        "title"   => $event->title,
        "url"     => "./?view=editticket&id=".$event->id,
        "start"   => $event->date_at."T".$event->time_at,
        "color"   => $eventColor  // This is the key addition!
    ];
}
?>

Step 2: Simplify Your FullCalendar JavaScript #

Now you don't need any extra conditional logic in your JS—FullCalendar will automatically use the color property from each event object to style it.

<script>
$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next,today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: jQuery.now(),
        editable: false,
        eventLimit: true,
        events: <?php echo json_encode($thejson); ?>
    });
});
</script>

How This Works #

FullCalendar recognizes the color property on individual event objects and applies it to both the background and border of the event. If you want more control (like setting a separate text color), you can use backgroundColor and textColor instead of the single color property.

Alternative: Using eventRender (If You Prefer JS Logic) #

If you'd rather handle the coloring on the frontend, you can use FullCalendar's eventRender callback. First, make sure to include the status_id in your PHP event array:

// Add this line to your event array in PHP
"status_id" => $event->status_id

Then update your JS:

<script>
$(document).ready(function() {
    const statusColorMap = {
        1: '#fb8c00',
        2: '#ff0',
        3: '#43a047',
        4: '#00acc1'
    };

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next,today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: jQuery.now(),
        editable: false,
        eventLimit: true,
        events: <?php echo json_encode($thejson); ?>,
        eventRender: function(event, element) {
            const color = statusColorMap[event.status_id] || '#00acc1';
            element.css({
                'background-color': color,
                'border-color': color
            });
        }
    });
});
</script>

Either approach will work, but the first method (adding color in PHP) is cleaner since you're handling the data before sending it to the frontend.

内容的提问来源于stack exchange，提问作者Josue Marin