see this reddit post for the creator

https://www.reddit.com/r/raspberry_pi/comments/9los3j/my_alternative_take_on_a_magicmirror_i_present/

Someone also made this

https://www.reddit.com/r/raspberry_pi/comments/9nwt4y/my_magicmirror_info_board_for_the_family_shoutout/

This is my thought for the project. I wan’t an information board for the family in the kitchen.

@jbrodie That is amazing…exactly what I was looking for. I look forward to seeing this progress into an actual module. It was really the only thing holding me back from setting this up because my wife loves seeing a monthly planner with a lot of detail.

@yawns Thank you for the clarification. I wasn’t sure why some values needed the " or ', basically if the config file loaded, I counted that as a success

@jaymichael78 Thanks for the compliment. Next step is building a frame for it to mount on the fridge. Plus I’ll be still tinkering away at the contents.

@jaymichael78 Here is the custom css

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/
 header {
 text-transform: uppercase;
 font-family: "Roboto Condensed";
 font-size: 20px;
 font-weight: 300;
 }
 body {
 margin: 30px;
 position: absolute;
 height: calc(100%-50px);
 width: calc(100%-50px);
 background-image: url('bg1.jpg'); 	
 backgroung-repeat: no-repeat;
 background-size: 1920;
 }

.newsfeed, div#module_7_newsfeed {
 width: 550px;
 font-size: 12px;
}

@jaymichael78 Here you go…

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw http://michaelteeuw.nl
 * MIT Licensed.
 */

var config = {
	port: 8080,
	ipWhitelist: ["192.168.1.18", "::ffff:127.0.0.1", "::1"],

	language: 'en',
	timeFormat: 12,
	units: 'imperial',

	modules: [
		{
			module: 'alert',
		},
		{
			module: 'clock',
			position: 'top_left'
			
		},
		{
			module: 'calendar_monthly',
			position: 'top_left',
			config: {
				cssStyle:'slate'
				}
		},
		{
			module: 'calendar',
			header: ' Bill  Janice  Vinny ',
			position: 'top_left',
			config: {
				colored: 'true',
				calendars: [
					{
						symbol: 'male',
						url: 'Calendar link',
						color:'#4286f4'
					},
					{
						symbol: 'child',
						url: 'Calendar link',
						color:'#33cc33'
					},
					{
						symbol: 'female',
						url: 'Calendar link',
						color:'#eb42f4'
					}
					],
				        }
		},
		{
			module: 'calendar',
			header: 'Important Dates',
			position: 'top_left',
			config:{
				colored: 'true',
				calendars: [
					{
						symbol: 'users',
						url: 'Calendar link',
						color: '#ffff00'
					},
					{	symbol: 'birthday-cake',
						url: 'Calendar link',
						color: '#b380ff'
					}
					],
					}
		},
		{
			module: 'MMM-Wunderlist',
			position: 'bottom_center',
			header: 'To-Do List',
			config: {
				accessToken: 'your access token',
				clientID: 'your client id',
				lists: ["MM List"]
				}
		},			
		{
		
			module: 'MMM-WunderGround',
    			position: 'top_right',
    			config: {
        		apikey: 'your api key', // private; don't share!
        		pws: 'pws:KNYHUNTI41', //culemborg
        		coloricon: 'true',
			hourly: '1',
        		fctext: '1',
        		layout: "horizontal",
			fcdaycount: "3",
        		fcdaystart: "0",
        		hourlyinterval: "3",
        		hourlycount: "2",
        		alerttime: 10000,
        		alerttruncatestring: "english:",
    			roundTmpDecs: 1,
    			UseCardinals: 0,
    			layout: "horizontal",
    			sysstat: 0
		    		}
		},
		{
			module: 'newsfeed',
			position: 'bottom_center',
			config: {
				feeds: [
					{
						title: "Fox News",
						url: "http://feeds.foxnews.com/foxnews/latest?format=xml"
					}
				],
				showSourceTitle: true,
				showPublishDate: true
			}
		},
{
                        module: 'MMM-Traffic',
                        position: 'bottom_center',
                        classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
                        config: {
                        api_key: 'your api key',
                        mode: 'driving',
                        origin: 'starting address',
                        destination: 'destination address',
                        route_name: 'nickname',
                        show_summary: true,
                        changeColor: true,
                        showGreen: true,
                        limitYellow: 5, //Greater than 5% of journey time due to traffic
                        limitRed: 20, //Greater than 20% of journey time due to traffic
                        traffic_model: 'pessimistic',
                        interval: 120000 //2 minutes
                    		}
},
{
			module: 'MMM-MTA',
  			position: 'bottom_center',
  			config: {
    			sStation: 'DPK',
    			mtaAPIKey: '9e9374cf6751033431c1f54a4e7576c3' //API KEY needs to be requested from datamine.mta.info
  },                        
},
{
			module: 'MMM-NHL',
			position: 'top_right',
			config: {
				colored: 'true',
				focus_on: [2],
				datesToLookAhead: '7',
				}
},
	]

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== 'undefined') {module.exports = config;}

@jaymichael78 When I get home, I will upload the config file

@jaymichael78 I’m not home, so I don’t have my config file, but in the config.js under the first calendar module, I added 3 calendars so far, plan on adding 2 more for the other kids, but for each one, you can choose a color and icon from FontAwesome. Just add the config option defaultSymbol and pick your icon. The default one is a calendar icon.

I was also able to edit the header to color code the names and their calendar, by adding some html style coding.

That was my original purpose of this project. This is where I am at right now, I’m still adding things, and stylizing. Pay no attention to the colors, just practicing css and helping see the different sections.
I plan on building a frame to mount this to the side panel of my fridge.

Guys,
Thanks for the help, using your suggestions I was able to actually accomplish what I was looking for in the header of the calendar module itself.

@strawberry-3.141 I am said friend that @ooom416354 is helping. I appreciate the help, I will be able to do some testing of my own tonight and tomorrow with the impending storm coming.

My ideal setup is to have the 5 members in my family share 1 calendar module, each using a separate icon. For my wife and I it’s fairly easy, because there is a male icon and female. For the kids, there is no way do differentiate them.

My other question would be, rather than using a font-awesome symbol, could I just use a letter or name in place of that?

Got it! thank you for your help

@strawberry-3.141 I just did those steps and got an npm WARN grunt-yamllint@0.2.0 requires a peer of grunt@~0.4.0 but none was installed message

@strawberry-3.141 That’s it then. I didn’t realize that. Is there away for me to get that feature without having to start over?

@strawberry-3.141 I’ve tried it that way too with no luck.

I am trying to add multiple calendars in one module and have them each have a different color, here is what I have so far, the maximumNumberOfDays is working, but the calendar is still showing up in the default color.

module: 'calendar',
header: 'family',
position: 'top_left',
config: {
              colored: true,
              calendars: [
                                 {
                                        symbol: 'male',
                                        url: 'xxxxxxx',
                                 },
                                 ],
              color: '#f70000',
              maximumNumberOfDays: '14',
                     }
},

Wow…Awesome work, that is pretty damn close to what I was envisioning…Thank you for your work

I like the look of that module you made, but speaking for just myself, I was looking for a large scale calendar with multiple calendars populating the days. I know you had talked about adding a css to iframe, but that seems to have been made more difficult by google. Plus I want to just use it as a module along with other features of this project.
Again, I’m looking for more of a home based dashboard for the family, as opposed to a mirror, but I like the setup of this project.

Thanks for your efforts!

I’m definitely thinking more of a full calendar with events. I plan on my screen being in landscape mode, upwards of 23". My “dashboard” so to speak would have a header with a weather module, this monthly calendar taking up about 80% of screen and then maybe an RSS feed along the bottom for news. I’ve tried messing with custom RSS feeds for Google calendar and iframe, and it’s just plain ugly.

@KirAsh4 for my application, that is what this project was going to be primarily for. Yes I can see the running 7 day thing working. I appreciate the help

@KirAsh4 not knowing how the API works, would it be easier to populate an entire month view? That way picking the week wouldn’t be an issue.