If an event is booked out, the colour changes to gray.

How can we also change the colour of past events to gray?

Thank you!

Here is the colour change code for booked out events, for everyone interested:

add_filter('stec_event_controller_get_items', function ($items, $request) {

    if ($request->get_param('context') !== 'event') {
        return $items;
    }

    $items_data = $items->get_data();

    $items_data = array_map(function ($item) {

        if ('rsvp' !== $item['meta']['attendance_method']) {
            return $item;
        }

        $persons_limit = (int) $item['meta']['attendance_persons_limit'];

        if ($persons_limit === -1) {
            $persons_limit = 9999;
        }

        $attendance_data = get_posts(array(
            'post_type' => 'stec_attend',
            'fields'    => 'ids',
            'meta_query' => array(
                array(
                    'key' => 'event_id',
                    'value' => $item['id'],
                )
            )
        ));

        $date_persons = [];

        foreach ($attendance_data as $attendance) {
            $date    = get_post_meta($attendance, 'date', true);
            $persons = (int) get_post_meta($attendance, 'persons', true);
            $state   = get_post_meta($attendance, 'state', true);

            if ($state !== 'attending') {
                continue;
            }

            if (!isset($date_persons[$date])) {
                $date_persons[$date] = 0;
            }

            $date_persons[$date] += $persons;
        }

        $full_dates = [];

        foreach ($date_persons as $date => $total_persons) {
            if ($total_persons >= $persons_limit) {
                $full_dates[] = $date;
            }
        }

        $item['meta']['rsvp_full_dates'] = $full_dates;

        return $item;
    }, $items_data);

    $items->set_data($items_data);

    return $items;
}, 10, 2);

add_action('wp_footer', function () {
?>
    <script>
        window.stecFilterGetWorkerEventsBetween = (data, props) => {

            const fullColor = '#999';

            if (props && props.sortEventsForDayHourlyLayout) {
                return data;
            }

            const applyColor = (eventItem) => {
                if (!eventItem || !eventItem.meta) {
                    return;
                }
                const startDate = eventItem.meta.start_date;
                const fullDates = eventItem.meta.rsvp_full_dates;
                if (Array.isArray(fullDates) && fullDates.includes(startDate)) {
                    eventItem.meta.color = fullColor;
                }
            };

            if (props && props.sortEventsInYMDkeys) {
                for (const dateKey in data) {
                    const events = data[dateKey];
                    if (!Array.isArray(events)) {
                        continue;
                    }
                    for (const event of events) {
                        applyColor(event);
                    }
                }
                return data;
            }

            if (Array.isArray(data)) {
                for (const item of data) {
                    applyColor(item);
                }
            }

            return data;

        };
    </script>
<?php
});