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.

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.

sudo Raspi-config 

Advanced Options -> GL Drivers -> Legacy.

“legacy” and “normal” drivers are the same thing.

The problem with having the mirror and the sensor so close is that the heat from the monitor and the pi itself will mess with the readings of the sensor.

MagicMirror Module to display clocks from multiple time zones

After not getting an answer on Sean’s EXCEPTIONAL worldclock module (His first) from the new maintainer, I decided to fork it and start working on it myself. As such, I present to you “MMM-Worldclock”… It’s mostly Sean’s work, with a few fixes here and there right now.

This will be fully supported, much in the spirit of Sean’s work.

This module is derived from default MagicMirror module ‘clock’ and modified. Thanks to michaelteeuw.
This module displays times from around the world.
Modified fork of worldclock by eouia, renamed and improved.

Installation

1. Execute the following commands to install the module:

cd ~/MagicMirror/modules # navigate to module folder
git clone https://github.com/BKeyport/MMM-Worldclock # clone this repository

2. Then, add the following into the modules section of your config/config.js file:

{
  module: 'MMM-Worldclock',
  position: 'top_left', // This can be any of the regions, best results in top_left or top_right regions
  config: {
    // See 'Configuration options' for more information.

    timeFormat: 'hh:mm A', //defined in moment.js format()
    style: 'top', //predefined 4 styles; 'top', 'left','right','bottom'
    offsetTimezone: null, // Or you can set `Europe/Berlin` to get timegap difference from this timezone. `null` will be UTC timegap.
    clocks: [
      {
        title: "Home",
      },
      {
        title: "HOLLYWOOD", // Too long title could cause ugly text align.
        timezone: "America/Los_Angeles", //When omitted, Localtime will be displayed. It might be not your purporse, I bet.
        flag: "us",
      },
      {
        timezone: "Asia/Seoul",
      },
    ]
  }
},

Of course, you should change the configuration values for your purpose.

for configuration options see github.

Updates:

2020-08-06 (BKeyport) Fixed timeFormat per clock to work properly.
2019-02-24 (Sean) offsetTimezone is added.
2017-08-25 (sean) supports MMM-TelegramBot (https://github.com/eouia/MMM-TelegramBot) command /worldclock is added
2017-08-10 (sean) Country flags are supported. HTML/CSS Structures are refined.

** Note: telegram bot may not work in this version, I did not modify that code in the slightest, however, if it’s relying on the module name, it’s broken. I’ll fix it if it gets reported to me.

Thanks to Seongnoh Sean Yi’s (eouia) for his exceptional module and all the wonderful support he’s done over the years. I wouldn’t have the knowledge I have without Sean’s help.

One of the best commands to know is

 npm run config:check

Start at the topmost error and work your way down the file - it’s got lots of problems, but is easily fixed. Also, I highly recommend a graphical type editor if possible - Geany is what I use.

I installed samba on my magic mirror so I can edit with the PC version of Geany and save it right to the Pi. It’s great.

Take a look into https://github.com/MMM-CalendarExt2/MMM-CalendarExt2

It can make your calendars dance.

Really.

@Dask Dependencies are on a case by case basis. In many cases, it’s as simple as installing it into npm, by using npm install

In some cases, however, there’s additional outside programs or such that’s not covered by the npm install method. I’ve yet to see a module that requires additional software not include an installer script to take care of that for you, generally the readme will tell you if that’s the case.

Bottom line, follow the instructions in the readme.

FWIW, in the future,

Open a terminal
Type cd MagicMirror and press Enter
Now you’re in the MagicMirror directory
Type npm run config:check and press Enter
MagicMirror will now check your config

This is the fun part of the process. Figuring out what’s best to do for YOU.

I Would:

• Get a fan “hat” for your Pi.
• Use heat sinks
• If you use the HDMI outputs, use the one closest to the power plug.
• Know your power supply is proper for the unit. (Bad power = bad experience).
• Install using @sdetweil scripts. (See: https://docs.magicmirror.builders/getting-started/installation.html#alternative-installation-methods)

I Wouldn’t:

• Follow any old guides regarding magic mirror or follow guides not on the magicmirror.builders website - They may have bad information.
• forget to specify your OS version when searching for help (major system breaking changes happen between releases, so always search for things like this “Static IP address using buster”)
• ask questions before searching for an answer (We’ve been through it all).
• be afraid to ask questions here - no question is stupid, just some are already answered.

– Good luck, may your project be successful.

I’d just run a fan through a couple of extra holes in the frame… Easy – if you get the right voltage, you could just use the pi for powering it.

@JohnGalt Let me see your config, that’s really odd…(JUST the config for Worldclock/MMM-Worldclock, no need for the rest)

Those SVGs are for the built in flags. I figured it would be “download and place the file in the module directory” for the custom flags… Like I have “world.jpg” and “washington.png” (or is it the other way).

Just make sure the flag image is square, and use “altflag” rather than “flag” with the filename of the image file, and it’ll pick it up.

(the requirements are hopefully temporary for the alternate flag image, I’m working on learning CSS in my spare time, and how to fix the image insert later)

@goprojojo If it works with VLC, it’ll work with Freebox. go to https://www.ispyconnect.com/man.aspx?n=Reolink to get the URL you’ll need, and try it on VLC.

@alanodoug said in worldclock - nobody made this, so I did.:

Hey guys,
is it possible to change the flag-icon? Because the flag i want to use doesnt exist.
Maybe i can use a image and put it in the folder?

I’ve added the functionality to MMM-Worldclock. The supported version

It’s not perfect, but it’s there.

Is created by:

		{
			module: "MMM-Worldclock",
			position: "top_left",
			config: {
				style: "right",
				offsetTimezone: null,
				clocks: [
					{
						title: "Local",
						timezone: "America/Los_Angeles",
						altflag: "washington.png",
						timeFormat: "hh:mm:ss a",
					},
					{
						title: "ET",
						timezone: "America/New_York",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "CT",
						timezone: "America/Chicago",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "MT",
						timezone: "America/Boise",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "AK",
						timezone: "America/Anchorage",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "HI",
						timezone: "Pacific/Honolulu",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "UTC",
						timezone: "UTC",
						timeFormat: "HH:mm MM/DD",
						altflag: "world.jpg"
					},
				]
			},
		},

the module is located at http://www.github.com/BKeyport/MMM-Worldclock

Cheers!

I really need someone to help me with the CSS buildout. I’m not understanding how to get the icons down to the same size as the normal flags, and other little ticky stuff.

What I added was “altflag” in the code, and based it off of what Sean did originally.

The combo of JS and CSS is maddening me.

Update: As of 1/18/21 - new feature - You now may use a flag of your choice, using the altflag command.

It’s not perfect, but it’s there.

			module: "MMM-Worldclock",
			position: "top_left",
			config: {
				style: "right",
				offsetTimezone: null,
				clocks: [
					{
						title: "Local",
						timezone: "America/Los_Angeles",
						altflag: "washington.png",
						timeFormat: "hh:mm:ss a",
					},
					{
						title: "ET",
						timezone: "America/New_York",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "CT",
						timezone: "America/Chicago",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "MT",
						timezone: "America/Boise",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "AK",
						timezone: "America/Anchorage",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "HI",
						timezone: "Pacific/Honolulu",
						flag: "us",
						timeFormat: "hha MM/DD",
					},
					{
						title: "UTC",
						timezone: "UTC",
						timeFormat: "HH:mm MM/DD",
						altflag: "world.jpg"
					},
				]
			},
		},

If I’m remembering correct (I don’t use the module anymore), it’s having to do with absolute dates. All three of these need to be set…

// Force Absolute to Absolute all the time, michmich *really* hates solid dates, apparently. 
timeformat: "absolute",
getRelative: 0,
urgency: 0 ,

Sadly, no. Other programs had a option for a remote feed, like using OMXPlayer locally, and mmfpeg remotely, but those are abandoned.

No. The flags are hardcoded. I’m trying to figure out how it works, because I want to use a flag for UTC, which don’t have one either.

I’m about halfway there. I’ve figured out how to do everything but get the replacement flag into the right spot. It’ll display, but it’s not showing up at the right spot. Still crunching, will look more when time permits. . :|

@welby Sorry for the long wait for a response.

The start of week is tied to your default language and defaults for your locale. If you have it set to German, for instance, it’ll switch to Monday start.

I haven’t thought about a manual start of week adjustment, I might add it when I have time.

@drx1984 you didn’t follow my directions. The system expects the channels in the json file.