Showing Events in the Visitor Time Zone list view classic editor

visitor_timezone.php

<?php
/**
 * View: List View - Single Event Date
 *
 * Override this template in your own theme by creating a file at:
 * [your-theme]/tribe/events/v2/list/event/date.php
 *
 * See more documentation about our views templating system.
 *
 * @link http://evnt.is/1aiy
 *
 * @since 4.9.9
 * @since 5.1.1 Move icons into separate templates.
 *
 * @var WP_Post $event The event post object with properties added by the `tribe_get_event` function.
 *
 * @see tribe_get_event() For the format of the event object.
 *
 * @version 5.1.1
 */
use Tribe__Date_Utils as Dates;

$event_date_attr = $event->dates->start->format( Dates::DBDATEFORMAT );
?>
<div class="tribe-events-calendar-list__event-datetime-wrapper tribe-common-b2">
	<?php $this->template( 'list/event/date/featured' ); ?>
	<time class="tribe-events-calendar-list__event-datetime" datetime="<?php echo esc_attr( $event_date_attr ); ?>">
		<?php echo $event->schedule_details->value(); ?>
	</time>
	<?php $this->template( 'list/event/date/meta', [ 'event' => $event ] ); ?>
    
    <?php
    // Use the event ID from the event object.
    $event_id = $event->ID;

    /**
     * Check for the visitor's time zone cookie.
     * (Remember: if you haven't implemented a cookie consent mechanism, you should do so.)
     */
    if ( ! isset( $_COOKIE['tribe_browser_time_zone'] ) ) { ?>
        <script type="text/javascript">
            if ( navigator.cookieEnabled ) {
                document.cookie = "tribe_browser_time_zone=" + Intl.DateTimeFormat().resolvedOptions().timeZone + "; path=/";
            }
        </script>
    <?php }

    // Set up a default message in case the cookie is not set.
    $user_time_output = "<small>Your time zone couldn't be detected. Try <a href=''>reloading</a> the page.</small>";
    $browser_time_zone_string = "not detected";

    if ( isset( $_COOKIE['tribe_browser_time_zone'] ) ) {
        // Retrieve the visitor's time zone from the cookie.
        $browser_time_zone_string = $_COOKIE['tribe_browser_time_zone'];
        
        // Retrieve the event's UTC start time and event time zone string.
        $event_time_zone_string = Tribe__Events__Timezones::get_event_timezone_string( $event_id );
        $event_start_utc = tribe_get_event_meta( $event_id, '_EventStartDateUTC', true );
        
        // Create a DateTime object from the UTC time.
        $event_start_date_in_utc_timezone = new DateTime( $event_start_utc, new DateTimeZone( 'UTC' ) );
        
        // Convert the UTC time to the visitor's local time zone.
        $event_start_date_in_browser_timezone = $event_start_date_in_utc_timezone->setTimezone( new DateTimeZone( $browser_time_zone_string ) )->format( get_option( 'time_format' ) );
        
        // Get the time zone abbreviation using the IntlDateFormatter class.
        $formatter = new IntlDateFormatter(
            null,
            IntlDateFormatter::NONE,
            IntlDateFormatter::NONE,
            $browser_time_zone_string,
            IntlDateFormatter::GREGORIAN,
            'zzz'
        );
        $browser_time_zone_abbreviation = $formatter->format(new DateTime('now', new DateTimeZone($browser_time_zone_string)));
        
        // Combine the time with the abbreviation.
        $user_time_output = $event_start_date_in_browser_timezone . " " . $browser_time_zone_abbreviation;
        
        // Update the time zone string for tooltip purposes.
        $browser_time_zone_string .= ' detected';
    }
    ?>
    
    <div class="tribe-events-schedule--browser-time-zone">
        <p>
            Start time where 
            <span style="text-decoration: underline dotted; cursor: help;" title="Based on your browser time zone (<?php echo esc_attr( $browser_time_zone_string ); ?>) – might not be fully accurate.">
                you are
            </span>
            : <?php echo $user_time_output; ?>
        </p>
    </div>
</div>