1.1.0 (2023-03-02)

Added : Chat API

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

@greedyvegan
Like this?

/* css/custom.css */
.region .container .module {
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(255 255 255 / 10%);
  min-width: 300px;
  position: relative;
}

.module-header {
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: darkslateblue;
  color: white;
  font-weight: bold;
  border: none;
  padding: 5px;
  border-radius: 5px;
}

MMM-CalendarExt3Journal

Magic mirror module for presenting events as daily/weekly journal style.

Screenshot

Features

Main Features

• More detailed view of events by day/week with specific time ranges.
• locale-aware calendar
• customizing events: filtering, sorting, transforming
• multi-instance available. You don’t need to copy and rename the module. Just add one more configuration in your config.js.

https://github.com/MMRIZE/MMM-CalendarExt3Journal

@greedyvegan said in custom css for module question:

1 - multi-day or single event, can I move that to the right
to make the row narrower ? “Tuesday, March 19th” is a little redundant because the mini month tells me that.
I understand IF a day happens to have multiple events it would create multiple rows.

As you know already, Events could be more than one. So what you want is; if there is only one event, it should be one-liner with the date(or with relative day identifier), but if there are N events, makes multi-rows.
Maybe if it is possible, it will not be so pretty. And the look would be similar to the default calendar module. If so, use the default calendar module instead.

2 - this is related but unrelated to the calendar, some modules don’t have the simple {font-size: 12px;color red;} they use classes of bright and dimmed and or use “1em” for the size or “var(–color-text)”

There is no standard style guide for modules, so every module has it’s own look & feel. You have to override each style by yourself.
Anyway, some modules respects the style of the default modules. They might use the values those are defined in css/main.css
You can override some of the default styles in css/custom.css like below;

/* css/custom.css */
:root {
  --color-text: darkorange;
  --color-text-dimmed: darkgreen;
  --color-text-bright: crimson;
  --font-size: 16px;
  --font-size-small: 12px;
}

original

transformed

@jv2007
But, more simple way is; just use this;

body {
  font-family: 'Open Sans Condensed', 'Noto Sans KR';
}

Open Sans Condensed font doesn’t have any Korean characters, so when the renderer meet Korean chars, the second fallback Noto Sans KR would be applied instead of Open Sans Condensed.

@ijoshea
I had the same needs on building modules. (btw, GooglePhotos and CX3 were built by me :D )

Sometimes I suggested other module’s background for the readability. Sometimes, I made an auto-calculated contrast color(e.g. CX3)

My final conclusion is… waiting for new CSS feature contrast-color(). It will be introduced later this year in the most modern browsers.
https://drafts.csswg.org/css-color-5/#contrast-color

@ijoshea
Anyway, It looks so interesting, So I tried something. I simply did monkey patching to get dominant color from MMM-GooglePhotos’s image on load.

You can do your job with this code without modifying the source codes itselfs.

/* config/config.js */
{
	module: "MMM-ModuleMonkeyPatch",
	config: {
		patches: [
			{
				module: "MMM-GooglePhotos",
				method: "ready",
				patch: async function (original, [ url, target ]) {
					const ret = original(url, target)
					let color = null
					const process = async () => {
						const { resolve, promise } = Promise.withResolvers()
						const img = new Image()
						img.crossOrigin = 'Anonymous'
						img.src = 'https://corsproxy.io/?' + url
						img.onload = () => {
							const colorThief = new ColorThief()
							const color = colorThief.getColor(img)
							resolve(color)
						}
						return promise
					}
					if (typeof ColorThief === 'undefined') {
						const loadScript = async (src) => {
							const { resolve, promise } = Promise.withResolvers()
							const script = document.createElement('script')
							script.src = src
							document.head.appendChild(script)
							script.onload = () => resolve()
							return promise
						}
						await loadScript('https://cdn.jsdelivr.net/npm/colorthief@2/dist/color-thief.min.js')
						color = await process()

					} else {
						color = await process()
					}

					console.log(color) // It will show [R, G, B] array
					// doYourJob(color)

					return ret
				},
			},
		],
	},
},

@NotMyCircus said in Large Numbers:

would it make more sense to modify the EXT3 module rather than making so many changes in the css?

It is up to you. But when you modify the source code, you may have the problem on the next update of the module.

You can get a hint from this thread.
https://forum.magicmirror.builders/topic/18069/multiple-modules-in-a-region?page=1