MMM-CalendarExt3

[1lolo94]

@MMRIZE - New to MagicMirror and need some help please! I finally got my calendar and google calendar sync’d… but now I lost my weather on the top right of the screen and for some reason the weather is showing for the next 5 days on the calendar - are these related?
Sorry my picture would not upload for some reason :(

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 12,
	units: "imperial",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},
 {
                        module: "MMM-CalendarExt3",
                        position: "bottom_bar",
                        title: "",
                        config: {
                          mode: "",
                          weekIndex: 0,
                          weeksInView: 4,
                          instanceId: "basicCalendar",
                          locale: 'en-EN',
                          maxEventLines: 5,
                          firstDayOfWeek: 0,
                          refreshInterval: 120000,
                          animationSpeed: 0,
                          useSymbol: false,
                          calendarSet: ['us_holiday','family'],
                }
                },
                {
                        module: "calendar",
                        position: "",
                        config: {
                          broadcastPastEvents: true,
                          calendars: [
                                {
                                  url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                                  name: "us_holiday",
                                  color: "#6699ff"
                                }
                                        ]
                                }
                },
                {
                        module: "calendar",
                        position: "",
                        maximumNumberOfDays: 60,
                        config: {
                          animationSpeed: 0,
                          fetchInterval: 100000,
                          broadcastPastEvents: true,
                          useSymbol: false,
                          calendars: [
                                {
                                  url: "PRIVATE STUFF",                                 
				  name: "family",
                                  color: "yellow",
                                        user: 'xxxxxxxxxxx@gmail.com',
                                        pass: 'x',
                                        method: 'basic'
                                }
                                        ]
                                }
                },

		{
			module: "weather",
			position: "top_center",
			config: {
				weatherProvider: "openweathermap",
				type: "current",
				location: "xxxxx",
				locationID: "5x1x7xxx2xx078", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "xxxxxxx",
				roundTemp: true,
			}
		},
		{
			module: "weather",
			position: "top_center",
			//header: "Weather Forecast",
			config: {
				weatherProvider: "openweathermap",
				type: "forecast",
				location: "xxxx",
				locationID: "51x72x0x78", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "xxxxxx",
				fade: false,
				colored: "true",
				roundTemp: true,
			}
		},
	]
};

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

CSS FILE (weather was working before adding calendar)

 body { 
 color: #000;
 }
 
 .dimmed {
  color: #000;
  }

.normal {
  color: #000;
}

.bright {
  color: #000;
}
.module.clock {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
}
.module.weather {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
}
.module.weather {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
  color: #000;
}
.dimmed {
/*  color: #666; */
    color: #000;
}
.normal {
/*  color: #999;*/
    color: #000;
}
.bright {
  color: #000;
}
.header {
  color: #000;
}
.MMM-CalendarExt3 {
        margin-bottom: -5px;
        width: 100%;
        height: 575px;
        font-size: 20px;
}
.CX3 .cw {
        display:none
}

.CX3 .event.singleday {
  border-left:4px solid var(--calendarColor);
}

.CX3 .event.singleday:not(.useSymbol)::before {
  content: '';
}

[sdetweil]

@1lolo94 said in MMM-CalendarExt3:

Sorry my picture would not upload for some reason

pic upload is the third icon from the right above the post editor

[MMRIZE]

@1lolo94
top_right? You positioned weather module top_center… I need pictures what you mean.

[1lolo94]

I had to resize - sorry

[1lolo94]

@MMRIZE - correct, sorry - I was testing it out both ways and was about 6 hours straight trying to get everything setup.

I would like it how it was in the top right. I removed all the calendar coding and the weather shows up correctly.

modules: [
   	{
   		module: "alert",
   	},
   	{
   		module: "updatenotification",
   		position: "top_bar"
   	},
   	{
   		module: "clock",
   		position: "top_left"
   	},
   	{
   		module: "weather",
   		position: "top_right",
   		config: {
   			weatherProvider: "openweathermap",
   			type: "current",
   			location: "xx",
   			locationID: "517xx2078", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
   			apiKey: "1325b9a82957229ac168e428011778d8",
   			roundTemp: true,
   		}
   	},
   	{
   		module: "weather",
   		position: "top_right",
   		//header: "Weather Forecast",
   		config: {
   			weatherProvider: "openweathermap",
   			type: "forecast",
   			location: "xx",
   			locationID: "xxx", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
   			apiKey: "1325b9a82957229ac168e428011778d8",
   			fade: false,
   			colored: "true",
   			roundTemp: true,
   		}
   	},
   ]
};

[sdetweil]

@1lolo94 just fyi. you can disable modules by adding a line for each

disabled:true, 

between the module: and config: lines
note the trailing comma

[sdetweil]

@1lolo94 note that each section is a stack, 1st in config.js in that position goes first , next next, etc. if too much, it gets clipped off at the bottom of the screen.

so if ext3 cal is first, others are below it.
you could change css to prove it

in custom.css

body {
  overflow: default;
}

then try to scroll the page, up to see below the fold

[1lolo94]

@sdetweil So i did everything you said (and i may have messed up) and now all i see if the calendar at the bottom.

Config.js

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 12,
	units: "imperial",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
 		{
                        module: "MMM-CalendarExt3",
                        position: "bottom_bar",
                        title: "",
                        config: {
                          mode: "",
                          weekIndex: 0,
                          weeksInView: 4,
                          instanceId: "basicCalendar",
                          locale: 'en-EN',
                          maxEventLines: 5,
                          firstDayOfWeek: 0,
                          refreshInterval: 120000,
                          animationSpeed: 0,
                          useSymbol: false,
                          calendarSet: ['us_holiday','family'],
                }
                },
                {
                        module: "calendar",
                        position: "",
                        config: {
                          broadcastPastEvents: true,
                          calendars: [
                                {
                                  url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                                  name: "us_holiday",
                                  color: "#6699ff"
                                }
                                        ]
                                }
                },
                {
                        module: "calendar",
                        position: "",
                        maximumNumberOfDays: 60,
                        config: {
                          animationSpeed: 0,
                          fetchInterval: 100000,
                          broadcastPastEvents: true,
                          useSymbol: false,
                          calendars: [
                                {
                                  url: "https://calendar.google.com/calendar/ical/508cafe09ed07b094af03472b6e4b4df1afcc8f9bd961857492b70bcc6978e12%40group.calendar.google.com/private-9092589d68a2b474a7739751badffb79/basic.ics",                                 
				  name: "family",
                                  color: "yellow",
                                        user: 'xx@gmail.com',
                                        pass: 'xxxxxx',
                                        method: 'basic'
                                }
                                        ]
				}
                },
		{
			module: "clock",
			position: "top_left"
		},
		{
			module: "weather",
			position: "top_right",
			config: {
				weatherProvider: "openweathermap",
				type: "current",
				location: "xx",
				locationID: "xx", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "1325b9a82957229ac168e428011778d8",
				roundTemp: true,
			}
		},
		{
			module: "weather",
			position: "top_right",
			//header: "Weather Forecast",
			config: {
				weatherProvider: "openweathermap",
				type: "forecast",
				location: "xx",
				locationID: "51xxx72078", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "1325b9a82957229ac168e428011778d8",
				fade: false,
				colored: "true",
				roundTemp: true,
			}
		},
	]
};


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

Custom CSS

/* MagicMirror² Custom CSS Sample
 *
 * Change color and fonts here.
 *
 * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
 *
 * MIT Licensed.
 */

/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */

:root {
  --color-text: #999;
  --color-text-dimmed: #666;
  --color-text-bright: #fff;
  --color-background: black;

  --font-primary: "Roboto Condensed";
  --font-secondary: "Roboto";
  
  --font-size: 20px;
  --font-size-small: 0.75rem;

  --gap-body-top: 60px;
  --gap-body-right: 60px;
  --gap-body-bottom: 60px;
  --gap-body-left: 60px;
  
  --gap-modules: 30px;
}

body {
  overflow: default;
}

 body { 
 color: #000;
 }
 
 .dimmed {
  color: #000;
  }

.normal {
  color: #000;
}

.bright {
  color: #000;
}
.MMM-CalendarExt3 {
        margin-bottom: -5px;
        width: 100%;
        height: 575px;
        font-size: 20px;
}
.CX3 .cw {
        display:none
}

.CX3 .event.singleday {
  border-left:4px solid var(--calendarColor);
}

.CX3 .event.singleday:not(.useSymbol)::before {
  content: '';
}
.module.clock {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
}
.module.weather {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
}
.module.weather {
  background-color:rgba(255,255,255,0.5);
  border-radius:8px;
  padding:8px;
  color: #000;
}
.dimmed {
/*  color: #666; */
    color: #000;
}
.normal {
/*  color: #999;*/
    color: #000;
}
.bright {
  color: #000;
}
.header {
  color: #000;
}

[sdetweil]

@1lolo94 sorry it was html, not body

html {
   overflow:default;
}

[1lolo94]

@sdetweil Thanks for the quick response - same issue :(

All I see is the calendar at the bottom

[sdetweil]

@1lolo94 please change this

   position: "",

to

 //    position: "",

“” causes an error
while no position setting is ok

[1lolo94]

@sdetweil YOU ARE AMAZING!

Last two questions and I will leave you alone :)

1. what settings do i need to change to get the calendar to fit the entire bottom of the screen? Is that possible?

2. How can I add a background to this - but have the calendar, weather, etc in front of it? I have seen some others have nature, clouds, etc.

Thanks again!

[sdetweil]

@1lolo94 background

use one of the modules that displays what you like and use position fullscreen_below, 3d, below is furthest away from the viewer , above is closest to the viewer and default is between them

calendar full width. I don’t know, mm sets margin, all the way around so content is NOT jammed against the edge…

see css/main.css at the top, 60px as I recall

you can override that in custom.css

[sdetweil]

@1lolo94 said in MMM-CalendarExt3:

and I will leave you alone

I am here every day. am moderator
ask away.
others smarter than me will jump in too

[1lolo94]

@sdetweil I was able to get the module - MMM-Wallpaper installed and working great - but depending on the picture, i cannot see the the calendar, events, days, etc. I’m assuming that is in the custom cc settings?

[sdetweil]

@1lolo94 no cool thing there. some background images will conflict w the foreground…

I want dynamic opposite, but… no such thing

[bobbylx]

Hello all, just have a couple fine tuning questions for you. Both seem easy but I can’t seem to figure out why it’s not working. FWIW my MM has been running great for months now, finally doing some tweaking.

So I’ve got MMM-Calendarext3 setup to only show 1 calendar, it’s my family google account. The last 2 things I would like to accomplish are having the text for long events scroll with useMarquee: true and then also to have the eventTransformer search for a name in the event title and change the color according to that.

For some reason, I can’t get either of these to work. Config.js below. If I understand correctly, I shouldn’t need to add anything to custom.css correct? With the config file below, my calendar does not load at all, just get blank screen stating please create a config file, if I hash out the transformer stuff then it loads but never scrolls (marquee). Any advice from ya’ll smart folks?

{
                               module: "MMM-CalendarExt3",
                               position: "bottom_bar",
                               title: "",
                               config: {
                                 mode: "",
                                 weekIndex: 0,
                                 weeksInView: 5,
                                 instanceId: "basicCalendar",
                                 locale: 'en-EN',
                                 maxEventLines: 5,
                                 fontSize: '26px',
                                 firstDayOfWeek: 0,
                                 refreshInterval: 120000,
                                 animationSpeed: 0,
                                 useMarquee: true,
                                 useSymbol: false,
                                 useWeather: true,
                                 displayWeatherTemp: true,
                                 calendarSet: ['us_holiday','family'],
                               weatherPayload: (payload) => {
         if (Array.isArray(payload?.forecastArray)) {
           payload.forecastArray = payload.forecastArray.map((f) => {
             f.maxTemperature = Math.round(f.maxTemperature * 9 / 5 + 32)
             f.minTemperature = Math.round(f.minTemperature * 9 / 5 + 32)
             return f
           })
         }
         return payload
       }
                       eventTransformer: (ev) => {
                        if (ev.title.search('Allie') > -1) ev.color = 'blue'
                        return ev
                       }
                       }
                       },
       

[hrmax]

@bobbylx It could be because you aren’t settings the mode to week or month? It seems that the default is week but that would require that you omit the tag altogether rather than explicitly setting it to an empty string.

[MMRIZE]

@bobbylx said in MMM-CalendarExt3:

     }
     return payload
   } // <== HERE
                   eventTransformer: (ev) => {
                    if (ev.title.search('Allie') > -1) ev.color = 'blue'
                    return ev
                   }

You’ve missed comma(,) in the end of weatherPayload definition.

[bobbylx]

@hrmax said in MMM-CalendarExt3:

@bobbylx It could be because you aren’t settings the mode to week or month? It seems that the default is week but that would require that you omit the tag altogether rather than explicitly setting it to an empty string.

I have it with no mode and a 5 week rolling view, so the current week is always at the top. I did change it back to month for testing but made no difference.

@MMRIZE said in MMM-CalendarExt3:

@bobbylx said in MMM-CalendarExt3:

     }
     return payload
   } // <== HERE
                   eventTransformer: (ev) => {
                    if (ev.title.search('Allie') > -1) ev.color = 'blue'
                    return ev
                   }

You’ve missed comma(,) in the end of weatherPayload definition.

Awesome, thank you! That did it.

Last one, using the Marquee for long calendar events. Is there anything else I need to do to make that work? See my config.js above, I added useMarquee: ‘true’ but it changed nothing. I assume I’m missing something simple again.