@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.

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.

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

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

@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.

@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…

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.

@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.

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'],
                          }
                },
        ]
};

@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.