Posts made by bobbylx

bobbylx

@sdetweil You sir are a saint. That’s exactly what I was missing, I suspected I needed to separate the individual items from the flexbox, but lacked the knowledge to do it! Thank you!

bobbylx

Thanks for the info.

As for my horizontal alignment, I’ve got those where I like, and yeah I was aware of the content wrap. I have ssh session and a remote desktop over to my Pi box, so whenever I make a change I restart the process, which closes the developer box. I only open it to check things, but I’m not doing configurations based on the wrapped content when the box is present.

I’ll probably just remove that moonphase anyway, heck, I just need to look out the window.

bobbylx

@sdetweil I’ve gone through a plethora of pages regarding Flexbox. What I am failing to understand, and probably in part due to my limited coding experience, is why only that single item of the 4 is not cooperating.
The way I understand is I have the flex container, which in this case is the top_bar? Then I have items within the container. My flex items would be the .clock, .weather, .weather and .MMM-MoonPhase. So should I be using a word other than .MMM-MoonPhase when adjusting the flex box position? Such as, in the example below, should .MMM-MoonPhase be replaced with another code that will then apply to the moon phase? This is where it gets muddy for me. And I know the second MMM-MoonPhase down there by itself is redundant, I was just testing.

.clock, .weather, .MMM-MoonPhase {
	display: inline-flex;
	justify-content: space-around;
        align-items: flex-start;
        margin-right: 25px;
	margin-left: 25px;
        background-color:rgba(255, 255, 255,0.6);    
        width: 300px;
        height: 180px;
	border-radius:20px;
        padding: 8px;
        color: #616161;
      	}
.MMM-MoonPhase {
	background-color: rgba(255, 255, 255, 0.6);
	width: 250px;
	height: 180px;
	border-radius:20px;
        padding: 8px;
        color: #616161;
}

So if bring up the developers window, and change the inline-flex, align-items, they all 4 move around, just that single Moonphase is slight off from the others.

Honestly, I’ve been tweaking and editing this thing for a good year or so, I might be better off making a backup of some stuff and starting fresh.

bobbylx

Hello all,

Looking for a little advice on this. I have 4 modules positioned in my top_bar and I have then in a flexbox. 3 of the 4 items are lined up with the top of the box, but the 4th will not move. I’ve used the developers window to inspect elements and make changes on the fly, but no matter what I change, in either the custom.css or main.css that goofy Moonphase module will not line up. Even if I change the flex alignment, all the modules will change position, just that moon module is never in sync with the others if that makes sense. Anyway, is there a tool or way to determine if that module is being positioned by another css file? Any other suggestions are welcome.

Here is my custom.css for reference.

body {
        background-Image: url("background.jpg");
        background-size: cover;
        position: absolute;
        margin: 0px;
        height: 100%;
        width: 100%;
}
header {
  border-bottom: none;
  color: #616161;
}
.wi.dimmed.wi-sunset {
color: orange;
}
.wi.dimmed.wi-sunrise {
color: yellow;
}
.wi-day-sunny {
color: yellow;
}
.wi-day-cloudy {
color: yellow;
}
.wi-rain {
color: grey;
}
.wi-thunderstorm {
color: grey;
}
.wi-snow {
color: white;
}
.wi-fog {
color: white;
}
.wi-night-clear {
color: white;
}
.wi-night-cloudy {
color: grey;
}
.wi-night-showers {
color: blue;
}
.wi-night-rain {
color: blue;
}
.wi-thunderstorm {
color: yelow;
}
.wi-night-snow {
color: white;
}
.wi-night-alt-cloudy-windy {
color: grey;
}
.clock, .weather, .MMM-MoonPhase {
	display: inline-flex;
	justify-content: space-around;
        align-items: flex-start;
        margin-right: 25px;
	margin-left: 25px;
        background-color:rgba(255, 255, 255,0.6);    
        width: 300px;
        height: 180px;
	border-radius:20px;
        padding: 8px;
        color: #616161;
      	}
.MMM-MoonPhase {
	background-color: rgba(255, 255, 255, 0.6);
	width: 250px;
	height: 180px;
	border-radius:20px;
        padding: 8px;
        color: #616161;
}
.lessontime {
     text-align: right;
     white-space: nowrap;
     padding-right: 2em;
     width: 1ex;
     font-size: 27px;
     color: #616161;   
 }

 .lesson{
     text-align: left;
     font-size: 27px;
     color: #616161;
 }

.MMM-CalendarExt3{
      background-color:rgba(255, 255, 255,0.6);
      border-radius:20px;
      padding: 8px;	
 } 
.CX3 .cell {
  border: 1px solid var(--celllinecolor);
  background-color: var(--cellbgcolor);
  height: calc(
    var(--cellheaderheight) + var(--cellfooterheight) +
      calc(var(--eventheight) * var(--maxeventlines))
  );
}
.CX3 .weekGrid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, [cell-start] 1fr [cell-end]);
  grid-auto-columns: 0fr;
  margin-top: 5px; /* ADD THIS*/
}

.CX3 .cw {
	display:none;
}
.CX3 .cellContainer .cell:nth-child(1) .cw {
  display: none;
}
.CX3 .cw::before {
        display: none;
}
.CX3 .event {
  margin: 6px 1px;
  padding: 15px 1px;
  text-align: left;
  grid-row: span 1;
  display: flex;
  justify-content: flex-start;
  gap: 0px;
  text-overflow: ellipsis;
  overflow: marquee;
  white-space: nowrap;
  min-width: 0;
  position: relative;
  eventheight: 35px;
}
.CX3 .event.singleday .headline:not(.useSymbol)::before {
  display: none;
}
.CX3 .event.singleday:not(.useSymbol)::before {
  content: '';
}
.CX3 .event.singleday {
  border-left:6px solid var(--calendarColor);
  color: #616161;
}
.CX3 .cell.today {
  border: 2px solid #fff; /* default was 1px, so you can change to 2px or whatever */
}
.CX3 .thisMonth {
  background-color: rgb(255 255 255 / 10%);
}

----------------------------------------------------------------------------------------

bobbylx

@EngrAg81 Ok, I think this is what you would edit to change the way those numbers are displayed, ie, High/low temp. This will be in the custom.css.

CX3 .cellHeader .cellWeather .maxTemp {
  color: white;
  font-weight: bold;
  font-size: 90%;
}

.CX3 .cellHeader .cellWeather .minTemp {
  color: darkgray;
  font-weight: normal;
}

.CX3 .cellHeader .cellWeather .temperature {
  display: var(--displayWeatherTemp);
  padding-left: 5px;
  font-size: 90%;
}
 
.CX3 .cellHeader .cellWeather .maxTemp::before {
  content: " \25b2";  
}

.CX3 .cellHeader .cellWeather .minTemp::before {
  content: " \25bc";
}
 
.CX3 .cellHeader .cellWeather .temperature::after {
  content: "° ";
}

bobbylx

@EngrAg81 I don’t have a lot of info on it, I did tweak my weather info but it’s been a couple years now. The number is the High/Low forecast-ed temperature. Have to turn on the default weather module in forecast mode, then I added this to config.js under MMM-calendarext3,

    useWeather: true,
                            displayWeatherTemp: true,
                                      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

I don’t remember what changes I made to get the degree symbol and up/down arrows. I’ll post here if I can find those changes.

bobbylx

By the way, here is my custom.css so you can see what changes I’ve tried.

body {
        background-Image: url("background.jpg");
        background-size: cover;
        position: absolute;
        margin: 0px;
        height: 100%;
        width: 100%;
}
header {
  border-bottom: none;
  color: #616161;
}
.wi.dimmed.wi-sunset {
color: orange;
}
.wi.dimmed.wi-sunrise {
color: yellow;
}
.wi-day-sunny {
color: yellow;
}
.wi-day-cloudy {
color: yellow;
}
.wi-rain {
color: grey;
}
.wi-thunderstorm {
color: grey;
}
.wi-snow {
color: white;
}
.wi-fog {
color: white;
}
.wi-night-clear {
color: white;
}
.wi-night-cloudy {
color: grey;
}
.wi-night-showers {
color: blue;
}
.wi-night-rain {
color: blue;
}
.wi-thunderstorm {
color: yelow;
}
.wi-night-snow {
color: white;
}
.wi-night-alt-cloudy-windy {
color: grey;
}
.clock, .weather, .MMM-MoonPhase, .MMM-WeeklySchedule {
	display: inline-flex;
	margin-right: 25px;
	margin-left: 25px;
	margin-top: 0;
}
.lessontime {
     text-align: right;
     white-space: nowrap;
     padding-right: 2em;
     width: 1ex;
     font-size: 27px;
     color: #616161;   
 }

 .lesson{
     text-align: left;
     font-size: 27px;
     color: #616161;
 }

.MMM-CalendarExt3, .clock, .weather, .MMM-MoonPhase, .MMM-WeeklySchedule {
      background-color:rgba(255, 255, 255,0.6);
      border-radius:20px;
      padding: 8px;
      color: #616161;
      margin-top: 0;	
 } 
.CX3 .cell {
  border: 1px solid var(--celllinecolor);
  background-color: var(--cellbgcolor);
  height: calc(
    var(--cellheaderheight) + var(--cellfooterheight) +
      calc(var(--eventheight) * var(--maxeventlines))
  );
}
.CX3 .weekGrid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, [cell-start] 1fr [cell-end]);
  grid-auto-columns: 0fr;
  margin-top: 5px; /* ADD THIS*/
}

.CX3 .cw {
	display:none;
}
.CX3 .cellContainer .cell:nth-child(1) .cw {
  display: none;
}
.CX3 .cw::before {
        display: none;
}
.CX3 .event.singleday .headline:not(.useSymbol)::before {
  display: none;
}
.CX3 .event.singleday:not(.useSymbol)::before {
  content: '';
}
.CX3 .event.singleday {
  border-left:6px solid var(--calendarColor);
  color: #616161;
}
.CX3 .cell.today {
  border: 2px solid #fff; /* default was 1px, so you can change to 2px or whatever */
}
.CX3 .thisMonth {
  background-color: rgb(255 255 255 / 10%);
}

bobbylx

Hello all, just have 2 questions that have me stumped.

I would like to have the modules across the top lined up, and preferably same sized backgrounds. I’ve tried adjusting the margins, but for some reason cannot make the Moon phase and Lesson plan module move up. Any suggestions?
Can someone tell me where to add padding or what margin to adjust to add space between my individual events? thanks in advance.

bobbylx

@chrisfr1976 said in MMM-CalendarExt3 possible to round the corners?:

@bobbylx
Have you tried to add a border-radius to .CX3 .weekGrid? I don‘t know if that works, but maybe… :)

Worth a shot, but that didn’t do it. Now that I know what wording creates that rounded corner, I’ll just experiment and see what happens. Hah, I’ll get it eventually!

bobbylx

And if this helps, here is my custom.css.

                                                                       custom.css                                                                                 
body {
        background-Image: url("background01.jpg");
        background-size: cover;
        position: absolute;
        margin: 0px;
        height: 100%;
        width: 100%;
}
header {
  border-bottom: none;
}
.wi.dimmed.wi-sunset {
color: orange;
}
.wi.dimmed.wi-sunrise {
color: yellow;
}
.wi-day-sunny {
color: yellow;
}
.wi-day-cloudy {
color: yellow;
}
.wi-rain {
color: grey;
}
.wi-thunderstorm {
color: grey;
}
.wi-snow {
color: white;
}
.wi-fog {
color: white;
}
.wi-night-clear {
color: white;
}
.wi-night-cloudy {
color: grey;
}
.wi-night-showers {
color: blue;
}
.wi-night-rain {
color: blue;
}
.wi-thunderstorm {
color: yelow;
}
.wi-night-snow {
color: white;
}
.wi-night-alt-cloudy-windy {
color: grey;
}
.clock, .weather, .MMM-MoonPhase, .MMM-WeeklySchedule {
        display: inline-flex;
        margin-right: 25px;
        margin-left: 25px;
}
.lessontime {
     text-align: right;
     white-space: nowrap;
     padding-right: 2em;
     width: 1ex;
     font-size: 27px;
     color: white;   
 }
 .lesson{
     text-align: left;
     font-size: 27px;
     color: white;
 }
.MMM-CalendarExt3 {
      background-color:rgba(255, 255, 255,0.4);
      border-radius:20px;
     padding: 8px; } 
CX3 .cell {
  border: 1px solid var(--celllinecolor);
  background-color: var(--cellbgcolor);
  height: calc(
    var(--cellheaderheight) + var(--cellfooterheight) +
      calc(var(--eventheight) * var(--maxeventlines))
  );
  position: relative;
  border-radius: 25px; /*adjust as you like it*/
}
.CX3 .weekGrid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, [cell-start] 1fr [cell-end]);
  grid-auto-columns: 0fr;
  margin-top: 5px; /* ADD THIS*/
}
.CX3 .cw {
        display:none;
}
.CX3 .cellContainer .cell:nth-child(1) .cw {
  display: none;
}
.CX3 .cw::before {
        display: none;
}
.CX3 .event.singleday {
  border-left:4px solid var(--calendarColor);
}

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

.CX3 .cell.today {
  border: 2px solid #fff; /* default was 1px, so you can change to 2px or whatever */
}
.CX3 .thisMonth {
  background-color: rgb(255 255 255 / 10%);
}

bobbylx

@chrisfr1976 Thanks for that. It definitely increased the space between the day name and top of the cells, but the rounded corner didn’t work for me. I’ll keep tweaking that. It probably wouldn’t look like I want, if that applies to each cell. I’m hoping round to just corners of the overall calendar, not each cell, so it matches the background.

bobbylx

Hello all, so I’m looking at making some small customization’s now on my Calendar. I would like to round the corners (the black line) so it matches the rounded corner of the translucent background. Also, how can I add spacing between the name of the weekday and the top edge of the calendar below, not sure if you can see in the screenshot but the Y in each day of the week is touching the bar. I assume this is all done in the custom.css, just would like some guidance on what field to add/change to accomplish this? Thanks in advance.

bobbylx

@sdetweil You sir are correct, that fixed it. I guess I should have read some release notes, haha. Thanks for your help.

bobbylx

Hello all, I’ve got an issue I hope someone can help with. My MagicMirror has been working great for a year or so. I use MMM-Calext3, and have generic holidays and a personal google calendar shown. It has worked without issue.
A few days ago, I was trying to install a module that puts the display to sleep on a schedule and whatnot. In the process, I goofed up my config.js and the mirror would launch but had errors (wrong characters in wrong places type issues). I did not touch any of my calendar entries nore the calendar modules. While troubleshooting why my power/sleep module wasn’t working I saw I was behind on the MM base version, so I updated. I don’t recall updating anything else. I finally just restore the config.js to the working version i copied before I started.
So now, my MM works, CalEXT3 launches, but I’m not getting any events passed from the default calendar. Again, I did not change a single character in the calendar entries, what is below is what was working fine 48 hours ago. Can someone smarter than myself take a look? I did npm start, but is seems to hang up after the System information line. I left it about 10 minutes with no change or additional lines showing up, eventually just had to ctrl-c out of it. I can put the calendar ICS links in a browser and they still work.

let config = {
	address: "localhost",	// Address to listen on, can be:
							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
							// - another specific IPv4/6 to listen on a specific interface
							// - "0.0.0.0", "::" to listen on any interface
							// Default, when address config is left out or empty, is "localhost"
	port: 8080,
	basePath: "/",	// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
									// you must set the sub path here. basePath must end with a /
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],	// Set [] to allow all IP addresses
									// or add a specific IPv4 of 192.168.1.5 :
									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
									// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	useHttps: false,			// Support HTTPS or not, default "false" will use HTTP
	httpsPrivateKey: "",	// HTTPS private key path, only require when useHttps is true
	httpsCertificate: "",	// HTTPS Certificate path, only require when useHttps is true

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

	modules: [
		{
			module: "alert",
		},
		{
			disabled: true,
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_bar"
		},
		{
			module: "weather",
			position: "top_bar",
			config: {
				weatherProvider: "openweathermap",
				type: "current",
				location: "Holly Springs",
				locationID: "4471641", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "cbbb4aab37f038db12caadaece805ecf"
			}
		},
		{
			module: "weather",
			position: "top_bar",
			header: "",
			config: {
				weatherProvider: "openweathermap",
				type: "forecast",
				location: "",
				locationID: "4471641", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "cbbb4aab37f038db12caadaece805ecf"
			}
		},

{
			module: "MMM-MoonPhase",
			position: "top_bar",
			config: {
				updateInterval: 43200000,
				hemisphere: "N",
				resolution: "detailed",
				basicColor: "white",
				title: true,
				phase: true,
                		size: 155,
				moonAlign: "end",
                		textAlign: "end",
				alpha: 0.7,
                		riseAndSet: {
		                    display: true,
		                    lon: -78.8,
		                    lat: 35.6,
		                    gmtOffset: -5.0
		                }
			}
		},			{
			  module: "MMM-CalendarExt3",
			  position: "bottom_bar",
			   title: "",
			   config: {
			    mode: "",
			    weekIndex: 0,
			    weeksInView: 5,
			    instanceId: "basicCalendar",
			    locale: 'en-EN',
			    maxEventLines: 5,
			    firstDayOfWeek: 0,
			    refreshInterval: 120000,
			    animationSpeed: 0,
			    useSymbol: false,
			    useMarquee: false,
			    fontSize: '25px',
			    useWeather: true,
			    displayWeatherTemp: true,
			    calendarSet: ['family','us_holiday'],
			                         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 = '#ec4899'
			if (ev.title.search('Em','Emily')> -1) ev.color = '#c084fc'
			if (ev.title.search('Mom')> -1) ev.color = '#06b6d4'
			if (ev.title.search('Dad')> -1) ev.color = '#3b82f6'
                        return ev
                       }
                       }
                       },
{
                         module: "calendar",
                         position: "",
                         config: {
                         broadcastPastEvents: true,
                         calendars: [
                        {
                          url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                          name: "us_holiday",
                          color: "red"
                        }
                                ]
                        }
                 },
{
                       module: "calendar",
                         position: "",
                         maximumNumberOfDays: 60,
                         config: {
                          animationSpeed: 0,
                          fetchInterval: 160000,
                          broadcastPastEvents: true,
                          useSymbol: false,
                          calendars: [
                        {
                          url: "*******",
                          name: "family",
			  color: "yellow",
                                user: '**',
                                pass: '**',
                                method: 'basic'
                        }
                                ]
                        }
        },
	]
};

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

pi@raspberrypi:~/MagicMirror/config $ npm start

> magicmirror@2.28.0 start
> DISPLAY="${DISPLAY:=:0}" ./node_modules/.bin/electron js/electron.js

[2024-09-05 18:52:35.091] [LOG]   Starting MagicMirror: v2.28.0
[2024-09-05 18:52:35.152] [LOG]   Loading config ...
[2024-09-05 18:52:35.159] [LOG]   config template file not exists, no envsubst
[2024-09-05 18:52:35.178] [WARN]  Invalid module position found for this configuration: {
  module: 'calendar',
  position: '',
  config: { broadcastPastEvents: true, calendars: [ [Object] ] }
}
[2024-09-05 18:52:35.181] [WARN]  Invalid module position found for this configuration: {
  module: 'calendar',
  position: '',
  maximumNumberOfDays: 60,
  config: {
    animationSpeed: 0,
    fetchInterval: 160000,
    broadcastPastEvents: true,
    useSymbol: false,
    calendars: [ [Object] ]
  }
}
[2024-09-05 18:52:35.184] [LOG]   Loading module helpers ...
[2024-09-05 18:52:35.187] [LOG]   No helper found for module: alert.
[2024-09-05 18:52:35.189] [LOG]   No helper found for module: clock.
[2024-09-05 18:52:35.191] [LOG]   No helper found for module: weather.
[2024-09-05 18:52:35.193] [LOG]   No helper found for module: weather.
[2024-09-05 18:52:35.241] [LOG]   Initializing new module helper ...
[2024-09-05 18:52:35.243] [LOG]   Module helper loaded: MMM-MoonPhase
[2024-09-05 18:52:35.244] [LOG]   No helper found for module: MMM-CalendarExt3.
[2024-09-05 18:52:35.244] [LOG]   All module helpers loaded.
[2024-09-05 18:52:35.264] [LOG]   Starting server on port 8080 ...
[2024-09-05 18:52:37.137] [LOG]   Server started ...
[2024-09-05 18:52:37.142] [LOG]   Connecting socket for: MMM-MoonPhase
[2024-09-05 18:52:37.144] [LOG]   Starting module helper: MMM-MoonPhase
[2024-09-05 18:52:37.156] [LOG]   Sockets connected & modules started ...
[2024-09-05 18:52:37.681] [LOG]   Launching application.
[2024-09-05 18:52:47.741] [INFO]  System information:
### SYSTEM:   manufacturer: Raspberry Pi Foundation; model: Raspberry Pi 3 Model B Rev 1.2; raspberry: [object Object]; virtual: false
### OS:       platform: linux; distro: Raspbian GNU/Linux; release: 11; arch: arm; kernel: 6.1.21-v7+
### VERSIONS: electron: 29.1.6; used node: 20.9.0; installed node: 20.8.0; npm: 10.1.0; pm2: 5.3.1
### OTHER:    timeZone: America/New_York; ELECTRON_ENABLE_GPU: undefined

bobbylx

@MMRIZE said in MMM-CalendarExt3:

@bobbylx
To emphasize this month, I added this to the cells of this month.
.CX3 .thisMonth {
  background-color: rgb(255 255 255 / 10%);
}
rgb(RED GREEN BLUE / TRANSPARENCY); could be what you were searching.

Thanks again, this did it.

bobbylx

@MMRIZE said in MMM-CalendarExt3:

@bobbylx
For today cell border; Append this into your css/custom.css

/* css/custom.css */
.CX3 .cell.today {
  border: 2px solid #fff; /* default was 1px, so you can change to 2px or whatever */
}

For shadow behind the cell... Could you tell me more details or example?

Thank you, I’ll give that a try.

For the shadow, maybe not the right term, in my screenshot see how the previous days have a light but transparent white color to them. I’d like all the cells to be shaded like that, i can play with the colors, ie white vs gray etc. but I’m just not sure how to add the background color to all cells then make it transparent. That make sense? I know my terms are not correct…

bobbylx

Hello all, so I’ve got MMM-Calendarext3 working just how I want and now working on some personalization. Can anyone advise what to change and where to add some shadow behind the date cells? Kind of like the shadow behind the previous days, I’d like to add some light gray or something to the entire calendar just so it doesn’t get lost in my wallpaper.
Second, anyone know how/where to change the border thickness for the current day?

thanks in advance.

bobbylx

@sdetweil said in MMM-CalendarExt3:

@bobbylx said in MMM-CalendarExt3:
                    module: "compliments",
                    position: ""
must be a valid position if specified…

you can disable a module by adding
disabled: true,
after the module: line

you can also comment out the position
// position:“…”

this would be how you use the default calendar with Ext3…
it would work, but not be shown

backup, backup, backup…
see my scripts, backup to private repo on github… restore from there
versionable…
3 tiny files… and any keyfiles/token files…
https://github.com/sdetweil/MagicMirror-backup-restore

Thanks, just made that change, found a couple more that needed attention. I also checked my history in this thread, I’ve posted my config before asking other questions so I was able to borrow some lines. Getting close now.

@MMRIZE said in MMM-CalendarExt3:

@bobbylx
CX3* series may not work on MIDORI, sorry. It’s too old browser, doesn’t support advanced modern JavaScript technologies.

I had been using it with Midori until just a few days ago when I decided to reload. It wasn’t fast or always the best, but I’m using a Pi zero W so limited on browsers right now. I’ll be picking up a Pi 3 or 4 soon then I’ll do this all over again.

bobbylx

Had an issue with my monitor so I took that opportunity to reload Pi OS and MM. Unfortunately, I goofed and flashed over my config and css backups. So I’m starting fresh.

That went fine but I cannot figure out why my calendar is not loading. My MM loads in Midori, I get my date/time in the upper left but the rest of the page is blank, no config warnings or empty boxes, just a completely black page. Config check shows no issues. Can someone look at my config.js real quick and see if I’m missing something? I have not touched any other files at this point, I was just trying to get the calendar to load before I start really customizing.

let config = {
        address: "localhost",   // Address to listen on, can be:
                                                        // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
                                                        // - another specific IPv4/6 to listen on a specific interface
                                                        // - "0.0.0.0", "::" to listen on any interface
                                                        // Default, when address config is left out or empty, is "localhost"
        port: 8080,
        basePath: "/",  // The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
                                                                        // you must set the sub path here. basePath must end with a /
        ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],  // Set [] to allow all IP addresses
                                                                        // or add a specific IPv4 of 192.168.1.5 :
                                                                        // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
                                                                        // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
                                                                        // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

        useHttps: false,                        // Support HTTPS or not, default "false" will use HTTP
        httpsPrivateKey: "",    // HTTPS private key path, only require when useHttps is true
        httpsCertificate: "",   // HTTPS Certificate path, only require when useHttps is true

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

        modules: [
                {
                        module: "alert",
                },
                {
                        module: "updatenotification",
                        position: "top_bar"
                },
                {
                        module: "clock",
                        position: "top_left"
                },
                {
                        module: "calendar",
                        header: "US Holidays",
                        position: "",
                        config: {
                                calendars: [
                                        {
                                                fetchInterval: 7 * 24 * 60 * 60 * 1000,
                                                symbol: "calendar-check",
                                                url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
                                        }
                                ]
                        }
                },
                {
                        module: "compliments",
                        position: ""
                },
                {
                        module: "weather",
                        position: "top_right",
                        config: {
                                weatherProvider: "openweathermap",
                                type: "current",
                                location: "New York",
                                locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
                                apiKey: "YOUR_OPENWEATHER_API_KEY"
                        }
                },
                {
                        module: "weather",
                        position: "top_right",
                        header: "Weather Forecast",
                        config: {
                                weatherProvider: "openweathermap",
                                type: "forecast",
                                location: "New York",
                                locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
                                apiKey: "YOUR_OPENWEATHER_API_KEY"
                        }
                },
                        {
                          module: "calendar",
                          position: "",
                          config: {
                            broadcastPastEvents: true, // <= IMPORTANT to see past events
                            calendars: [
                              {
                                url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                                name: "us_holiday", // <= RECOMMENDED to assign name
                                color: "red" // <= RECOMMENDED to assign color
                                }
                        ]
                        }
                      },
                        {
                          module: "MMM-CalendarExt3",
                          position: "bottom_bar",
                           title: "",
                           config: {
                            mode: "month",
                            instanceId: "basicCalendar",
                            locale: 'en-EN',
                            maxEventLines: 5,
                            firstDayOfWeek: 1,
                            calendarSet: ['us_holiday'],
                          }
                },
        ]
};

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.