linuxserver / Heimdall

An Application dashboard and launcher
MIT License
7.67k stars 535 forks source link

show time local or distant in a corner #1356

Closed Unklebens closed 1 month ago

Unklebens commented 1 month ago

I would really like to local and some distant times displayed. Some family is living abroad and having a corner of heimdall displaying seperates times zones would be a nice to have being able to choose witch corner would be nice and being able to colorize each one would also be a nice to have too

ba5eem commented 1 month ago

@Unklebens - you can use the following code, add it into the custom JS in settings:

// Create a container for the clocks
const clockContainer = document.createElement('div');
clockContainer.id = 'custom-clocks';
clockContainer.style.position = 'fixed';
clockContainer.style.top = '10px';
clockContainer.style.right = '10px';
clockContainer.style.fontSize = '20px';
clockContainer.style.fontFamily = 'Arial, sans-serif';
clockContainer.style.color = '#ffffff'; // Change this to match your theme
clockContainer.style.textAlign = 'right';
clockContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 50% opaque background
clockContainer.style.padding = '10px';
clockContainer.style.borderRadius = '5px';
document.body.appendChild(clockContainer);

// Create elements for Chicago and Rome clocks
const chicagoClock = document.createElement('div');
const romeClock = document.createElement('div');
clockContainer.appendChild(chicagoClock);
clockContainer.appendChild(romeClock);

// Function to update the clocks
function updateClocks() {
    const now = new Date();

    // Chicago (Central Time)
    const chicagoTime = now.toLocaleTimeString('en-US', { timeZone: 'America/Chicago', hour12: false, hour: '2-digit', minute: '2-digit' });
    chicagoClock.textContent = `Chicago: ${chicagoTime}`;

    // Rome (Central European Time)
    const romeTime = now.toLocaleTimeString('it-IT', { timeZone: 'Europe/Rome', hour12: false, hour: '2-digit', minute: '2-digit' });
    romeClock.textContent = `Rome: ${romeTime}`;
}

// Update the clocks every minute
setInterval(updateClocks, 60000);

// Initial call to display the clocks immediately
updateClocks();

Looks like this - you can change the style anyway you like image

Unklebens commented 1 month ago

Thanks for your code snippet it helped a lot