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-Calendar Position

    Scheduled Pinned Locked Moved Development
    6 Posts 3 Posters 1.4k Views 3 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.
    • R Offline
      rastaa
      last edited by

      Hey guys,
      i want to chnge the position of my calendar.
      I changed the position of the clock and it works fine, but the calendar keeps loading at the same place.

      How can i fix this?

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @rastaa
        last edited by

        @rastaa tell us more… show us the config setting

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • R Offline
          rastaa
          last edited by rastaa

          i edited the custom.css file:

          .clock{
          position: relative;
          left: 100px;
          top: 20px;
          }

          .calendar{
          position: relative;
          left: 100px;
          top: 100px;
          }

          I changed the pixlenumbers often and nothing changed. The clock works perfectly

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @rastaa
            last edited by

            @rastaa so, there are 2 position settings…

            in config.js is the gross position

            in custom .css is smaller adjustments from there…

            also, not every module has a BIG definition… calendar has 4

            from readme

            symbolClass	Add a class to the cell of symbol.
            titleClass	Add a class to the title's cell.
            timeClass	Add a class to the time's cell.
            tableClass
            

            this last one YOU need to name in the config.js
            and then USE in the custom.css

            you can also use the module position

            as shown in index.html
            
            	< div class="region fullscreen below">< div class="container">< /div>< /div>
            	< div class="region top bar">
            		< div class="container">< /div>
            		< div class="region top left">< div class="container">< /div>< /div>
            		< div class="region top center"><d iv class="container">< /div>< /div>
            		< div class="region top right">< div class="container">< /div>< /div>
            	< /div>
            	< div class="region upper third"><div class="container">< /div>< /div>
            	< div class="region middle center"><div class="container">< /div>< /div>
            	< div class="region lower third"><div class="container">< br/>< /div>< /div>
            	< div class="region bottom bar">
            		< div class="container">< /div>
            		< div class="region bottom left">< div class="container">< /div>< /div>
            		< div class="region bottom center"><  div class="container">< /div>< /div>
            		< div class="region bottom right">< div class="container">< /div>< /div>
            	< /div>
            	< div class="region fullscreen above">< div class="container">< /div>< /div>
            

            the space in the names is replaced by an underscore when u use it in config.js
            bottom center = bottom_center

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • R Offline
              rastaa
              last edited by

              thank you very much :)

              I am a newbie, sorry for that.

              So i have to add all 4 classes in the custom.css and add some pixles ?

              I just want the whole calendar to be 100px more to the right.

              1 Reply Last reply Reply Quote 0
              • Mykle1M Offline
                Mykle1 Project Sponsor Module Developer
                last edited by

                @rastaa

                I just want the whole calendar to be 100px more to the right.

                In that case, assuming you mean the default “calendar” module, these values should move the entire module. Adjust to your liking in the custom.css file.

                .calendar {
                  margin-top: 0px;
                  margin-bottom: 0px;
                  margin-left: 0px;
                  margin-right: 0px;
                }
                
                

                Create a working config
                How to add modules

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • 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