MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-Worldclock

    Scheduled Pinned Locked Moved Utilities
    39 Posts 9 Posters 14.0k Views 9 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • BKeyportB Offline
      BKeyport Module Developer
      last edited by

      I’ll refer back to the original module here:

      https://forum.magicmirror.builders/topic/4189/worldclock-nobody-made-this-so-i-did/37?_=1601325307067

      This code does work with my updated version of the module:

      In your custom.css:

      .worldtime {
        display:flex;
        flex-direction:row;
      }
      
      .world{
        width:200px;
      }
      

      As a reminder, only make changes to your files, not system files.

      – B

      The "E" in "Javascript" stands for "Easy"

      1 Reply Last reply Reply Quote 1
      • B Offline
        blackeaglece
        last edited by

        Thank you very much

        1 Reply Last reply Reply Quote 0
        • BKeyportB Offline
          BKeyport Module Developer
          last edited by

          Update: As of 1/18/21 - new feature - You now may use a flag of your choice, using the altflag command.

          It’s not perfect, but it’s there.

          			module: "MMM-Worldclock",
          			position: "top_left",
          			config: {
          				style: "right",
          				offsetTimezone: null,
          				clocks: [
          					{
          						title: "Local",
          						timezone: "America/Los_Angeles",
          						altflag: "washington.png",
          						timeFormat: "hh:mm:ss a",
          					},
          					{
          						title: "ET",
          						timezone: "America/New_York",
          						flag: "us",
          						timeFormat: "hha MM/DD",
          					},
          					{
          						title: "CT",
          						timezone: "America/Chicago",
          						flag: "us",
          						timeFormat: "hha MM/DD",
          					},
          					{
          						title: "MT",
          						timezone: "America/Boise",
          						flag: "us",
          						timeFormat: "hha MM/DD",
          					},
          					{
          						title: "AK",
          						timezone: "America/Anchorage",
          						flag: "us",
          						timeFormat: "hha MM/DD",
          					},
          					{
          						title: "HI",
          						timezone: "Pacific/Honolulu",
          						flag: "us",
          						timeFormat: "hha MM/DD",
          					},
          					{
          						title: "UTC",
          						timezone: "UTC",
          						timeFormat: "HH:mm MM/DD",
          						altflag: "world.jpg"
          					},
          				]
          			},
          		},
          

          Capture.PNG

          The "E" in "Javascript" stands for "Easy"

          1 Reply Last reply Reply Quote 0
          • J Offline
            JohnGalt
            last edited by

            Thanks for the module. I have installed it and have it working, but do have one question: How do I keep the top ‘home’ time zone from displaying? I already have the clock module running, so I don’t need a 2nd module telling me the local time… Unfortunately, when i remove the code for the home timezone, it still displays. Thanks in advance,

            BKeyportB 1 Reply Last reply Reply Quote 0
            • BKeyportB Offline
              BKeyport Module Developer @JohnGalt
              last edited by BKeyport

              @JohnGalt Let me see your config, that’s really odd…(JUST the config for Worldclock/MMM-Worldclock, no need for the rest)

              The "E" in "Javascript" stands for "Easy"

              1 Reply Last reply Reply Quote -1
              • J Offline
                JohnGalt
                last edited by

                Here you go:
                { module: “MMM-Worldclock”,
                position: “bottom_right”, // This can be any of the regions, best results in top_left or top_right regions
                config: { // See ‘Configuration options’ for more information.
                timeFormat: ‘hh:mm A’, //defined in moment.js format()
                style: ‘top’, //predefined 4 styles; ‘top’, ‘left’,‘right’,‘bottom’
                offsetTimezone: null, // Or you can set Europe/Berlin to get timegap difference from this timezone. null will be UTC timegap.
                clocks: [
                { title: “Home”,
                flag: “us” },
                {
                title: “Italy”,
                timezone: “Europe/Rome”,
                flag: “it”,
                },
                {
                title: “Durban, So Africa”, // Too long title could cause ugly text align.
                timezone: “Africa/Johannesburg”, //When omitted, Localtime will be displayed. It might be not your purporse, I bet.
                flag: “za”,
                },
                { title: “Aruba”,
                timezone: “America/Curacao”,
                flag: “aw”,
                },
                ] // Close clocks list
                } // Close Worldclock config
                }, // Close module MMM-Worldclock

                1 Reply Last reply Reply Quote 0
                • J Offline
                  JohnGalt
                  last edited by

                  Hummm - It looks like the forum stripped out leading tabs and/or spaces, but the content look OK…

                  BKeyportB 1 Reply Last reply Reply Quote 0
                  • BKeyportB Offline
                    BKeyport Module Developer @JohnGalt
                    last edited by

                    @JohnGalt didn’t mark it as code… use ``` at the beginning and ending of the code to show it as pasted.

                    To remove the home timezone, just remove it, including the opening and closing bracket.

                    You don’t need to specify your local time zone. In my examples, I only use MMM-Worldclock to display the time on my mirror, so I need a local view. I pasted the code adjustment below, didn’t retab it, and I may have missed a few “adjusted” quotes, so if MM don’t like it, check the quotes.

                    clocks: [
                    {
                    title: "Italy",
                    timezone: "Europe/Rome",
                    flag: "it",
                    },
                    {
                    title: "Durban, So Africa", // Too long title could cause ugly text align.
                    timezone: "Africa/Johannesburg", //When omitted, Localtime will be displayed. It might be not your purporse, I bet.
                    flag: "za",
                    },
                    { 
                    title: "Aruba",
                    timezone: "America/Curacao",
                    flag: "aw",
                    },
                    
                    

                    The "E" in "Javascript" stands for "Easy"

                    J 1 Reply Last reply Reply Quote 0
                    • J Offline
                      JohnGalt @BKeyport
                      last edited by

                      @bkeyport - Thanks! It works as you describe. I thought I had already tried removing that code to no avail, but obviously hadn’t. Thanks again!

                      1 Reply Last reply Reply Quote 0
                      • BKeyportB Offline
                        BKeyport Module Developer @BKeyport
                        last edited by

                        NOTICE: As of the current moment, this module is not behaving well with MagicMirror 2.16. The module comes up smaller than intended.

                        As such, the workaround is as follows:

                        in custom.css

                        .MMM-Worldclock .main {
                          font-size: 1.65rem;
                        }
                        
                        .MMM-Worldclock .caption {
                          font-size: 1rem;
                        }
                        

                        Hopefully the font generation in MagicMirror will go back to normal in a couple of releases. Of course, you can adjust the font sizes as you please.

                        The "E" in "Javascript" stands for "Easy"

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 1 / 4
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy