MMM-CalendarExt3

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 :)

what settings do i need to change to get the calendar to fit the entire bottom of the screen? Is that possible?
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
                       }
                       }
                       },