MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    MMM-Multimonth

    Utilities
    calendar magicmirror2 module
    17
    57
    3225
    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.
    • BKeyport
      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

      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/

      Versioning

      0.1 Initial release, English / Sunday first only
      0.2 Change code to improve functionality, allow for some localization - will not move start of week yet, but will change languages with system.
      0.25 Temporary fix to allow module to refresh highlighted day of week - sometime between midnight and 1am, wasn’t doing any refresh at all in new MM configuration, didn’t realize it because I rebooted my system nightly for another tool I no longer use. Will adjust later to join in the midnight madness…
      0.3 Now properly refreshes at midnight.
      0.9 - Start of week now moves per moment.js. Note: at this point, module is almost everything I wanted. If I don’t get any bug reports that I can control, I’m going to bump it up to 1.0 and call it good.
      0.95 - Fixed code for moving start of week, formula was backwards. Suggestion was made to add to module, will be adding soon.
      0.99 - Major rewrite by Volker Wegert (Danke sehr!) - Implements everything I want, and I even understand the wizard level code he wrote.
      1.00 - Minor changes to code/css to standardize look.
      1.10 - Added leading and trailing months when 1 month is selected per user request.
      1.20 - Added weekend highlight
      1.21 - Added ability to change current day highlight for weekends.

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

      BKeyport 1 Reply Last reply Reply Quote 5
      • S
        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
          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
          • BKeyport
            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
              PH1TCH last edited by

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

              BKeyport 1 Reply Last reply Reply Quote 0
              • BKeyport
                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
                  PH1TCH @BKeyport last edited by

                  @BKeyport Okay, thanks for the update!

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

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

                    BKeyport 1 Reply Last reply Reply Quote 0
                    • BKeyport
                      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
                        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
                        • 1 / 6
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy