@Chuck_morisse
I think npm run config:check cannot validate optional chaining operator (?.). That is somewhat modern state-of-art feature of ECMA Javascript since 2020.
I think you can ignore that error message, anyhow it will work.
I’m not using npm run config:check for that reason.

@Mystara
Not tested, only with my brain, so just idea.

1. Get all the DOMs which has textContent.

const els = document.querySelectorAll('*')
for (let i = 0; i < els.length; i++) {
  const el = els[i]
  const children = el.childNodes
  let hasText = false
  for (let j = children.length; j--) {
    if (children[j].nodeType === 3 && children[j].nodeValue.trim().length) {
      hasText = true
      break
    }
  }
  if (hasText) {
    //This element has text content
  }
}

2. If it and its ancestors don’t have a background, apply your solution.

// assume that already know target element
let withoutBackground = true
let node = targetElement
while (node.parentElement) { // until document
  const styles = window.getComputedStyle(node)
  if (styles.backgroundColor === 'transparent' || ... ) { // Maybe backgroundImage should be checked too.
    // node has no background, so check the parent
    node = node.parentElement
  } else {
    withoutBackground = false
    break
  }
}
if (withoutBackground)  {
  // the target element has no its own background. So you can apply your solution.
}

To improve : a caching strategy for a once checked node to skip would be better.)

However, I’m not too fond of this approach,

1. getComputedStyle is very expensive
2. Rather, it would be better to propose a theme style guide as MagicMirror’s default coding rules.

@Chuck_morisse
I assumed;

• All targeting birthday events placed in the Birthdays calendar. Only those events would be considered.
• All birthday events would have profile image. (At least as many as possible)
• The profile image has a format like johndoe.webp, located in /modules/MMM-CalendarExt3.

/* In your config.js */
{
	module: "calendar",
	header: "Birthdays",
	position: "top_left",
	config: {
		calendars: [
			{
				name: "Birthdays",
				url: "https://somewhere.com/birthday.ics"
			}
		]
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		mode: "week",
		preProcessor: (event) => {
			if (event.calendarName === "Birthdays") {
				event.skip = true
			}
			return event
		},
		manipulateDateCell: (cellDom, events) => {
			const birthday = events.filter(event => event.calendarName === "Birthdays")?.[0] || null;
			if (birthday) {
				const filename = birthday.title.replace(/[^a-z0-9]/gi, '').toLowerCase() + ".webp"
				cellDom.classList.add("birthday-event")
				cellDom.style.setProperty("--birthday-event-image", `url("/modules/MMM-CalendarExt3/${filename}")`)
			}
		}
	}
},

/* In your custom.css */
.CX3 .cell.birthday-event {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: var(--birthday-event-image, "");
}

Not considered

• It will take the first birthday when multiple birthdays are in the same day.
• If will not check whether the real image exists or not. (In the example, John Smith has no profile image, but that event is skipped also.)

@Chuck_morisse
There could be many approaches to accomplish your goal, So I need more precise conditions.

1. Does your birthday calendar only include birthdays? (Are your targeting birthdays distinguishable by a separate calendar or by a specific title format?) => I Have to know how to point the birthday event from another normal event.

2. All the targeting birthdays would have the own picture? It is not so easy to apply the default picture when there is no proper image (To be honest, it would be also possible, but many additional coding skill be needed.)

If the size is around 14", I recommend purchasing a laptop repair LCD Panel from AliExpress.
If you purchase a 14" - 17" laptop repair Panel together with the Control Board;

Example

PROS

1. Since only the LCD panel is cleanly separated, there is no hassle when making a MagicMirror frame, and especially, there is no risk of damage due to carelessness when disassembling a ready-made monitor.

2. The Control Board and the buttons connected to it are also cleanly separated, so it is easy to place when making a frame.

3. Unlike general desktop monitors, the power supply is simply supplied with 12V DC (5V depending on the model), so there is no need to build an unnecessarily large and heat-generating power supply for general monitors into the MagicMirror.

4. The panel itself is very thin and the board is also thin, so it is suitable for making a thin and ultra-thin MagicMirror.

CONS

• It is slightly more expensive than purchasing a general desktop monitor, but it usually costs around 100EUR/100USD. It is easy to get. Even if you don’t go through a Chinese distributor like AliExpress, you can get it on Amazon for a slightly higher price.

@jubbles
To show 3 sequenced month-instances of the CX3 modules;

{
	module: "calendar",
	header: "US Holidays",
	position: "top_left",
	config: {
		maximumEntries: 100,
		maximumNumberOfDays: 365,
		calendars: [
			{
				symbol: "calendar-check",
				url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
			}
		]
	}
},		
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "THISMONTH",
		mode: "month",
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "NEXTMONTH",
		mode: "month",
		monthIndex: 1,
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "NEXTNEXTMONTH",
		mode: "month",
		monthIndex: 2,
	}
},

I don’t use MMM-Carousel, so get a help from others.

@danncabrera
https://forum.magicmirror.builders/post/101510

@sdetweil this module doesn’t use moment module. It is using pure JavaScript Intl function

@srobison62 said in Apple Calendar integration:

Right now its only taking up about 60% of the screen and itsgot alot of space on the sides

How is your current config.js and custom.css?
To make things simple; disable all other modules(of course, except the default calendar module) then focus on this module alone, then adjust things.

@srobison62

Is there a way to make it taller?

It depends on how big the font size is and how many events will be shown in one cell.
These properties are related to that.

Of course you can adjust more details with CSS overriding.