• 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-Carousel - how to configure a module multiple times on the SAME page?

Scheduled Pinned Locked Moved Solved Troubleshooting
29 Posts 6 Posters 8.0k Views 6 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.
  • K Offline
    KristjanESPERANTO Module Developer @Fantasmic78
    last edited by Feb 23, 2022, 9:16 PM

    Thanks 🙂 I’ve created a Pull Request.

    1 Reply Last reply Reply Quote 0
    • R Offline
      reverendz @Fantasmic78
      last edited by Dec 30, 2024, 3:18 AM

      @Fantasmic78

      Found this because this is just what I’m trying to do.

      I’m trying to use the EXT3 calendar showing monthly views.

      However, when I try the config, one of two things happens:

      • If I list a position for the additional months, they all show up on the same page.

      • If I don’t list a position, the other months don’t show up.

      I can’t seem to get it so that one month shows up with a forward/backward option in Carousel when using MMM-CalendarExt3.

      If anyone has an example config and can step me through how to set this up with Carousel it’d be greatly appreciated.

      I liked Carousel because I only want to move the calendar forward, but I’m open to other options. The big thing is: I’m using a touch screen so really want on-screen navigation/click.

      S 1 Reply Last reply Dec 30, 2024, 3:42 AM Reply Quote 0
      • S Offline
        sdetweil @reverendz
        last edited by sdetweil Dec 31, 2024, 12:19 PM Dec 30, 2024, 3:42 AM

        @reverendz use mmm-pages, carousel is hard code to use module names.

        in pages you can define page names , mom, dad , son , daughtrr, weather, shopping, whatever

        and on each module using the classes:property to specify which page(s) this instance is on

        i have a setup w 3 CalendarExt3 instances
        this month, next and next after that

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        S 1 Reply Last reply Dec 30, 2024, 4:00 AM Reply Quote 0
        • S Offline
          sdetweil @sdetweil
          last edited by sdetweil Jan 3, 2025, 10:32 PM Dec 30, 2024, 4:00 AM

          @reverendz use MMM-PageIndicator for manual navigation
          see this post i made showing all the configuration

          https://forum.magicmirror.builders/post/118877

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          R 1 Reply Last reply Jan 3, 2025, 10:16 PM Reply Quote 0
          • R Offline
            reverendz @sdetweil
            last edited by Jan 3, 2025, 10:16 PM

            @sdetweil

            Thank you for the response!

            So I am a bit lost. I tried pages and after figuring out the “fixed” vs. “pages” bit, I can’t seem to change the page-indicators to buttons.

            The only thing I found was this:

            .MMM-page-indicator div.module-content div i:nth-child(2)::before {
                content: "\f055";  // <-- icon code goes here
                font-family: FontAwesome;
            }
            

            As a newbie, “code goes here” leaves me grasping. Does your link have another solution or is there somewhere I can complete the content?

            Other than that, I saw someone basically created a custom button module to do the same.

            S 1 Reply Last reply Jan 3, 2025, 10:24 PM Reply Quote 0
            • S Offline
              sdetweil @reverendz
              last edited by sdetweil Jan 3, 2025, 10:26 PM Jan 3, 2025, 10:24 PM

              @reverendz sorry you didn’t get the link to the link

              see here
              https://forum.magicmirror.builders/post/118877

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              R 1 Reply Last reply Jan 3, 2025, 10:31 PM Reply Quote 0
              • R Offline
                reverendz @sdetweil
                last edited by Jan 3, 2025, 10:31 PM

                @sdetweil

                Thank you. I got the link and I still don’t get it.

                I am lost. The icons that show up look like standard MMM-page-indicator buttons.

                I added this based on the image, but it probably doesn’t apply since I’m not using the posters icons.

                /* MMM-page-indicator config to turn indicator into buttons */
                .MMM-page-indicator div module-content div i:nth-child(1):: before { 
                font-size: 20px; content: "\f073"; font-family: FontAwesome;
                }
                .MMM-page-indicator div module-content div i:nth-child(2):: before { 
                font-size: 20p; content: "\f2c9"; font-family: FontAwesome;
                }
                .MMM-page-indicator div module-content div i:nth-child(3):: before { 
                font-size: 20px; content: "\f1b9"; font-family: FontAwesome;
                }
                .MMM-page-indicator div module-content div i:nth-child(4):: before { 
                font-size: 20px; content: "|f70c"; font-family: FontAwesome;
                }
                .MMM-page-indicator div module-content div i:nth-child(5):: before { 
                font-size: 20px; content: "\f19d"; font-family: FontAwesome;
                }
                .MMM-page-indicator div.module-content div i:nth-child(6)::before { 
                font-size: 20px; content: " flea";
                font-family: FontAwesome;
                }
                .MMM-page-indicator div module-content div i:nth-child(7):: before { 
                font-size:20px; content: "\f03d"; font-family: FontAwesome;
                }
                .MMM-page-indicator div module-content div i:nth-child(8)::before { 
                font-size: 20px; content: "\e5ac" font-family: FontAwesome;
                }
                .MMM-page-indicator div module-content div i:nth-child(9):: before { 
                font-size: 20px; content: "\f5ee"; font-family: FontAwesome;
                }
                .MMM-page-indicator div module-content div i:nth-child (10): :before { 
                font-size: 20px; content: " f013"; font-family: FontAwesome;
                }
                

                I just have 3 pages I want to cycle through that coincide with the EXT3 calendar this month, next month and the one after.

                What am I missing?

                S 1 Reply Last reply Jan 3, 2025, 10:34 PM Reply Quote 0
                • S Offline
                  sdetweil @reverendz
                  last edited by Jan 3, 2025, 10:34 PM

                  @reverendz so those are the fonticon numbers for different icons

                  all that stuff went in custom.css right?

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  R 1 Reply Last reply Jan 3, 2025, 11:31 PM Reply Quote 0
                  • R Offline
                    reverendz @sdetweil
                    last edited by Jan 3, 2025, 11:31 PM

                    @sdetweil Yep!

                    They don’t show up anywhere. Which means I likely missed something major.

                    I see the regular dots.

                    S 1 Reply Last reply Jan 3, 2025, 11:33 PM Reply Quote 0
                    • S Offline
                      sdetweil @reverendz
                      last edited by Jan 3, 2025, 11:33 PM

                      @reverendz see the second link in my signature below on how to use the dev window

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      R 1 Reply Last reply Jan 3, 2025, 11:41 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 2 / 3
                      • 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