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-Multimonth

    Scheduled Pinned Locked Moved Utilities
    calendarmagicmirror2module
    77 Posts 19 Posters 27.3k Views 17 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 BKeyport

      MagicMirror Module to display a calendar with multiple months

      A mini-calendar with as many months as the user wants, assuming screen space is available.

      vert-noweek-norep.png

      horz-noweeknum.png

      Download

      https://www.github.com/BKeyport/MMM-Multimonth
      [card:BKeyport/MMM-Multimonth]

      Installation

      Clone this repository in your ~/MagicMirror/modules/ folder ( $ cd ~MagicMirror/modules/ ):

      git clone https://github.com/BKeyport/MMM-Multimonth.git
      

      Using the module

      To use this module, add it to the modules array in the config/config.js file:

      {
        module: 'MMM-Multimonth',
      	position: 'top_left', // can be any of the postions
      	config: { // Optional - will default to 3 months, with one previous and one next. 
      	  startMonth: -1, // Define when you start from current month (negative is before current, zero is current, positive is in future) 
               monthCount: 3, //  How many months to display 
               highlightWeekend: false // highlightWeekend if desired, set to true. 
      	}
      }
      

      Many thanks to kirash for the inspiration with the monthly_calendar module, sdetweil and lavolp3 for the help in coding and CSS work. Without your help, this would just be a pipe dream.

      This is a basic module, but I felt it was good enough for release to the public.

      Please, if you have any suggestions for improvement, let me know, I’m learning Javascript and CSS as I write this, and I dream of much bigger things.

      ~~Localization is provided by moment.js and controlled by the master language of MagicMirror. Please file any errors with localizations as bugs with the moment.js team - https://github.com/moment/moment/~~

      Please see github for version info and further instructions.

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

      BKeyportB 1 Reply Last reply Reply Quote 6
      • S Offline
        ShoeBox
        last edited by

        @BKeyport this is great! Thank you. Is there a way to change the colors?

        1 Reply Last reply Reply Quote 0
        • M Offline
          matelot20
          last edited by

          @BKeyport I would like to know as well if the header color can be changed.

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

            yes. It’s all in CSS. Take a look at the CSS file in the directory, and copy over to your custom.css

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

            1 Reply Last reply Reply Quote 0
            • P Offline
              PH1TCH
              last edited by

              @BKeyport Great MMM, exactly what I was looking for! :winking_face: Can the first day of the week be changed to monday?

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

                @PH1TCH It’s in the notes I haven’t figured out how to do this yet. Everything I’ve tried has failed due to API issues. I’m cracking on it when I can. My business takes priority, and we’ve been extended out due to this whole virus thing.

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

                P 1 Reply Last reply Reply Quote 0
                • P Offline
                  PH1TCH @BKeyport
                  last edited by

                  @BKeyport Okay, thanks for the update!

                  1 Reply Last reply Reply Quote 0
                  • W Offline
                    Werner1340
                    last edited by

                    Hello, how can I change the color from grey (days+numbers) from grey to white?

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

                      @Werner1340 That’s actually a magicmirror default. I believe it’s getting it from here:

                      .normal {
                        color: #999;
                      }
                      

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

                      W 1 Reply Last reply Reply Quote 0
                      • W Offline
                        Werner1340 @BKeyport
                        last edited by

                        @BKeyport Hm, i found that code in the main.css and changed the color to #fff.
                        …still grey color in calendar. ;-). any more Ideas?

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 6
                        • 7
                        • 8
                        • 1 / 8
                        • 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
                          OSZAR »