Convert Time to Local

Contributed to FB Community by: Adam Skjervold

Show current time in Asia/Calcutta

<script>
function setupTimezoneClocks() {
    console.log("Setting up timezone clocks...");
    // Function to add clock to a timezone select
    function addTimezoneClock() {
        // Find the timezone select element
        const timezoneSelect = document.querySelector('select[name="timezone"]');
        if (!timezoneSelect) {
            console.log('Timezone select not found!');
            return false;
        }
        // Check if we already added a clock
        if (document.querySelector('.custom-timezone-clock')) {
            console.log('Clock already exists');
            return true;
        }
        console.log('Adding timezone clock...');
        // Create the time display element
        const timeDisplay = document.createElement('div');
        timeDisplay.className = 'custom-timezone-clock';
        timeDisplay.style.cssText = `
            margin-top: 8px;
            font-size: 14px;
            color: #6b7280;
            padding: 8px 12px;
            background-color: #f9fafb;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
        `;
        // Function to update the time
        function updateTime() {
            const timezone = timezoneSelect.value;
            if (!timezone || timezone === '') {
                timeDisplay.style.display = 'none';
                return;
            }
            try {
                const options = {
                    timeZone: timezone,
                    weekday: 'short',
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: true
                };
                const localTime = new Intl.DateTimeFormat('en-US', options).format(new Date());
                timeDisplay.innerHTML = `<strong>Local time:</strong> ${localTime}`;
                timeDisplay.style.display = 'block';
            } catch (e) {
                console.error('Error formatting time:', e);
                timeDisplay.style.display = 'none';
            }
        }
        // Find the form group container
        const formGroup = timezoneSelect.closest('.form-group');
        if (formGroup) {
            // Insert after the dropdown container
            const dropdownContainer = timezoneSelect.closest('.dropdown');
            if (dropdownContainer && dropdownContainer.parentNode) {
                dropdownContainer.parentNode.insertBefore(timeDisplay, dropdownContainer.nextSibling);
            }
        }
        // Initial update
        updateTime();
        // Update every second
        const intervalId = setInterval(updateTime, 1000);
        // Listen for changes to the select
        // Since it's using Bootstrap Select, we need to watch for changes differently
        const observer = new MutationObserver(function(mutations) {
            updateTime();
        });
        // Watch the button text for changes (Bootstrap Select updates this)
        const selectButton = document.querySelector('.dropdown-toggle[data-toggle="dropdown"]');
        if (selectButton) {
            observer.observe(selectButton, { 
                childList: true, 
                subtree: true,
                characterData: true 
            });
        }
        // Store interval ID for cleanup if needed
        window._timezoneInterval = intervalId;
        window._timezoneObserver = observer;
        console.log('Timezone clock added successfully!');
        return true;
    }
    // Wait for elements to exist before adding clock
    const waitForTimezone = setInterval(() => {
        const timezoneSelect = document.querySelector('select[name="timezone"]');
        if (timezoneSelect) {
            console.log("Timezone select found!");
            clearInterval(waitForTimezone);
            addTimezoneClock();
            // Set up observer for page changes
            let lastUrl = location.href;
            const urlObserver = new MutationObserver(() => {
                const url = location.href;
                if (url !== lastUrl) {
                    lastUrl = url;
                    console.log("URL changed, checking for timezone select...");
                    setTimeout(() => {
                        // Clean up old clock if it exists
                        const oldClock = document.querySelector('.custom-timezone-clock');
                        if (oldClock) {
                            oldClock.remove();
                            if (window._timezoneInterval) {
                                clearInterval(window._timezoneInterval);
                            }
                            if (window._timezoneObserver) {
                                window._timezoneObserver.disconnect();
                            }
                        }
                        // Try to add new clock
                        addTimezoneClock();
                    }, 1000);
                }
            });
            urlObserver.observe(document, { subtree: true, childList: true });
        } else {
            console.log("Waiting for timezone select to appear...");
        }
    }, 1000); // Check every second
}
// Start the setup
console.log("Timezone clock script started");
setupTimezoneClocks();
</script>

Agency Level Instructions

1. Go to Agency > Settings > Whitelabel

2. Add code to the JS Code box.

3. Save

4. Refresh