If you fork and change any code, please let me know, if it's useful for the general public, I'd love to add it!

If you find this module useful, and would like to contribute to the project, I appreciate the thought. Instead of giving to me, please donate to a disability rights group of your choice.

THANK YOU for your consideration.

Before use of this module, please review license information below!

MagicMirror² Module to display a calendar with multiple months (user configurable)

This is a module for the MagicMirror² project.

This will create a mini-calendar with as many months as the user wants, assuming screen space is available. Screenshots are with config examples.

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

cd ~/MagicMirror/modules
git clone https://github.com/BKeyport/MMM-Multimonth

Note: NPM INSTALL is no longer required. This module is proud to no longer use any external dependencies!

cd ~/MagicMirror/modules/MMM-Multimonth
git pull

Then restart MagicMirror²

Updating from prior to 08 Jun 2024 (click to expand)

CSS is changed - please check all customizations. **Old Elements, values, etc. have been deleted**.

The following CSS code is all you need in custom.css if all you're changing is the colors and/or background edge rounding:

(Key changes here: "current" has been changed to "today", "background-week, color-week have been removed as redundant")

/* Defaults are shown */
.MMM-Multimonth .settings {
  --background-header: rgb(0, 128, 0);               /* for the month and year line, use green background */ 
  --background-dow: var(--color-background);         /* For the days of the week, use global background */ 
  --background-dowBlank: rgba(255, 255, 255, 0);     /* For the blank square if you use Week numbers */  
  --background-weekno: #808080;                      /* for the week number, use a grey background */ 
  --background-event: var(--color-background);		 /* Background for events, used in big mode only */
    
  --background-dimmed: var(--color-background);      /* For dimmed (previous/next month in current grid), use the global background color */
  --background-weekday: var(--color-background);     /* For normal days, use global background */ 
  --background-weekend: cornflowerblue;              /* For the days defined as your weekend, change the background to cornflowerblue */
  --background-today: Yellow;                        /* for the current day, change the background to yellow */ 

  --color-header: var(--color-text-bright);         /* for the header lines, use the global bright text color */ 
  --color-dow: var(--color-text);                   /* for the days of the week header, use the global text color */
  --color-dowBlank: rgba(255, 255, 255, 0);			/* For the blank square if you use Week numbers */ 
  --color-weekno: var(--color-text);                /* for the week numbers, use the global bright text color */

  --color-dimmed: var(--color-text-dimmed);         /* For dimmed (previous/next month in current grid), use the global dimmed text color */
  --color-weekday: var(--color-text);               /* For normal days, use global normal text */ 
  --color-weekend: var(--color-background);         /* For the days defined as your weekend, change the text to the background color */
  --color-today: var(--color-background);           /* for the current day, change the text to the background color */ 

  --back-rounding: 8px;                             /* Set the radius of the background rounded edges. See documentation for border-radius elsewhere */ 
  --alignment: center;                              /* Adjust the text alignment */ 
  --fontsize: var(--font-size-xsmall);              /* Set font size */
  --smallEventMarker: 3px;  						/* Event Marker size in pixels */
}

Notes on the colors above: You can use any colors you'd like. https://www.w3schools.com/cssref/css_colors.php is a list of accepted color names, or if you wanna make your own, https://www.w3schools.com/cssref/css_colors_legal.php. The above list is intended to be a sample, so I use different ways of doing legal colors. the "var" statements refer back to the master color list in MagicMirror². You'll find a full list in main.css.

Screenshot	How to get
	monthsVertical: true, repeatWeekdaysVertical: false, weekNumbers: false,
	monthsVertical: true, repeatWeekdaysVertical: true, weekNumbers: false,
	monthsVertical: true, repeatWeekdaysVertical: false, weekNumbers: true,
	monthsVertical: true, repeatWeekdaysVertical: true, weekNumbers: true,
	monthsVertical: false, weekNumbers: false,
	monthsVertical: false, weekNumbers: true,

To use this module, add it to the modules array in the config/config.js file - shown options are defaults:

{
  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, vertical orientation.
    }
},

for startWeek, weekend1, and weekend2: 0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday.

Remember the format for options:

option: value, Example: startMonth: -1,

Important: calNames is an array, please specify as such ["Main", "Sportsball", "Utility"] case is IMPORTANT.

instanceID: You can specify in custom.css different css for each instance. For example, if you add instanceID: "test", to your code, you can overide that instance with:

.MMM-Multimonth .month-header.test {
  background-color: blue;
  color: var(--color-header);
  font-size: var(--font-size-small);
  line-height: var(--font-size-small)+5;
  border-radius: var(--back-rounding);
}

To get events to feed to module, add the calendar module into your config.js.

Suggested settings at minimum:

{
  module: "calendar",
  config: {
    broadcastPastEvents: true,
    calendars: [
      {
        url: <insert URL>,
        name: <name>,
      },
      //.... As many as you'd like .... 
    ],
  }
},

The module now can use the colors from the calendar module, default is the system color set (white)

The module now can use the symbols from the calendar module in big calendar mode.

Example (uses public calendar from the University of Washington):

{
	url: "https://gohuskies.com/calendar.ashx/calendar.ics",
	name: "Huskies",
	symbol: "paw",
	color: "#4B2E83",
},

I wanted a big calendar for the current month, and the solutions out there didn't do what I wanted, so here we are.

Big calendar mode will change two things in code.

The Week Number (if used) will become part of the first day of the week's spot.

Events will be summarized into a count and a symbol, and display below each day of the month.

To keep the CSS slim, I do not format anything differently, and it will break the constraints of the mini mode. Don't use if you're inexperienced in CSS. You will have to design your display yourself. If you have any questions, ask in the MagicMirror² forums. Myself or any of the CSS wizards will be happy to help you.

If you find any problems, bugs or have questions, please open a GitHub issue in this repository.

Pull requests are of course also very welcome 🙂

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

You will need to first install the dev dependencies:

cd ~/MagicMirror/modules/MMM-Multimonth
git switch development
npm install

Please create all PRs against the development branch for testing and eventual merging into master.

• node --run lint - Run linting checks.
• node --run lint:fix - Fix automatically fixable linting errors.

This project is licensed under the MIT License - see the LICENSE file for details. However, the following text is added:

Due to regulations being out of control, this software, as well as the entire MagicMirror project, may be illegal to use in any location with age verification laws. This software will cannot and will not provide any age verification. It is your responsibility to verify with your local government legality of software. The authors of this software and modules used both up and downstream from this product, cannot be held liable for use in a situation where age verification is required. This is your only notification.

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.

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

Language Localization is controlled by the master language of MagicMirror².