• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.5k 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 Dec 27, 2019, 5:03 PM

    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 Dec 27, 2019, 5:04 PM Reply Quote 0
    • S Offline
      sdetweil @rastaa
      last edited by Dec 27, 2019, 5:04 PM

      @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 Dec 27, 2019, 5:07 PM Dec 27, 2019, 5:07 PM

        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 Dec 27, 2019, 5:16 PM Reply Quote 0
        • S Offline
          sdetweil @rastaa
          last edited by Dec 27, 2019, 5:16 PM

          @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 Dec 27, 2019, 5:26 PM

            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
            • M Offline
              Mykle1 Project Sponsor Module Developer
              last edited by Dec 27, 2019, 9:37 PM

              @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
              1 / 1
              • First post
                4/6
                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