Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

show time local or distant in a corner #1356

Closed
Unklebens opened this issue Jul 16, 2024 · 2 comments
Closed

show time local or distant in a corner #1356

Unklebens opened this issue Jul 16, 2024 · 2 comments

Comments

@Unklebens
Copy link

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
Copy link

ba5eem commented Jul 26, 2024

@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
Copy link
Author

Thanks for your code snippet it helped a lot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

No branches or pull requests

2 participants