It’s truly been a long time.

At the beginning of this year, I wrapped up 13 years of business in Frankfurt, Germany, and returned to Seoul, Korea. Due to the move and various other matters, I haven’t been able to focus on this project. However, since February, I’ve started working again—this time in Beijing, China.

One serious issue is that, for various security-related reasons, it has become extremely difficult to access GitHub, this project, and the community. As you may know, China’s Golden Shield censorship system and the Great Firewall have rendered almost all VPNS useless. It’s not just GitHub—accessing Google, Dropbox, or any external APIS has become very challenging. On top of that, my company’s security policies prevent me from working on external projects during work hours. (and even in my free time… What a situation!)

As a result, I haven’t been able to maintain many of the MagicMirror modules I developed, let alone respond to GitHub issues.

Given these circumstances, maintaining my GitHub repositories is extremely difficult.
If anyone is interested in any of my modules, I would be happy to give them repository management rights. I had a similar absence from this scene in the past, and back then I regrettably transferred full ownership of some modules—which I now deeply regret. This time, I intend to assign co-maintainer rights instead. If you’re interested, please email me (eouia0819@gmail.com). I may have difficulty checking emails, but I’ll try to do so as much as I can.

I’m not sure when my work in China will end, but I want to express that I still care deeply about this community.

@Xsoldier2000
This module usually (and for your convenience), uses the whole width of the region that this module lays on. So, if you want to use 3/4 width of the entire screen, it will be easier to limit the width and location of the region itself. So, if you want to lay this module into top_center, guess how to expand and locate top_center region to 3/4 width from the right edge. (There could be many solution and condition, so I cannot point a silver bullet.)

Hmmm… I was in our traditional ceremony with my family - a lunar new year, so I couldn’t catch this post. Sorry.
Anyway, this symptom is not my module’s fault, right? There were some reports similar to this, but not figured out.

@sdetweil
Thanks for your explanation always.
I’ll add small message in the screen on waiting - “Waiting calendar fetch…” or something informative in the next update…

@MDWEBB said in New module installer:

[ERROR] ReferenceError: HTMLElement is not defined

This error message seems to be caused by some JS validator trying to check the browser-oriented syntax on the nodeJS environment.

@MDWEBB
You’d better start from a clean configuration and then add one by one to find what was wrong.

@oquendo421

maximumEntries: 4,

Hmmmm… I think you’d better increase this value more.

@rkorell
Do you have any sketch for AS-IS and TO-BE?

@plainbroke @reverendz
Instead of .date_xx, use .today to point today’s cell.

And about the circle; https://forum.magicmirror.builders/topic/18324/mmm-calendarext3-show-color/11?_=1736098133616

@rkorell
CX3A is identified with CSS selector “.CX3A” to be distinguished from CX3.

I think I found it.

Add these into the default calendar module.

maximumEntries: 100,
maximumNumberOfDays: 365,

@tke499
Send me your ics file or url. (eouia0819@gmail.com)

@redfishbluefish
At first, I thought the New Year's Day event wasn’t visible because of a time zone issue (since I live in Germany, it’s already January 2nd here).

So, I downloaded the ICS file and changed the date of the New Year's Day event from 20250101 to 20250102 for testing. When I tested it, I encountered the same issue you mentioned!!!

I was quite confused, but to confirm, I used the following:

eventPayload: (events) => {
	console.log(events)
	return events
},

The eventPayload function is a great place to check what data has actually been broadcasted since it executes whenever events are received.

As a result…
??? New Year's Day isn’t being broadcasted?? I still don’t know why.

You can compare the display(left) and the console(right). In right, there is no New Year's Day event. the calendar module doesn’t emit that event. CX3 cannot draw undelivered events.

@sdetweil I think it’s better you check this symptom. the default calendar miss this event to broadcast, but don’t know why.

@tke499

Generally,

This message is just an warning can be ignored.
However, in practice, stopping at that point usually corresponds to the following cases:

1. (Most common case): The CX3 module has not been properly installed. In most situations, this happens because the CX3_Shared library is not correctly installed. To resolve this, navigate to the CX3 directory, run git pull, and then execute npm install. This resolves most issues. If it doesn’t, simply delete the entire CX3 directory and reinstall it. It only takes about 15 seconds.

2. In very rare cases, other modules may cause errors during DOM creation, which can have an impact. However, this is highly uncommon, so the cause is typically case 1.

@GrandizerGo

To filter out the empty days

There could be 2 ways of approaches for your exact purpose. The each ways are different, so choose one.

1.

/* CX3A config section of config/config.js */
onlyEventDays: 5, // This will show 5 specific days which has at least one event on the day.

2.

Or you can hide empty days in the calendar scope with CSS.

/* css/custom.css */
.CX3A .agenda .cell[data-events-counts="0"] {
  display: none;
}

@redfishbluefish
To make things simple;

• Disable all other modules except clock, calendar, MMM-CalendarExt3.

If you still have issue or found any error log (front-end log in your browser, not back-end log in your terminal), report me.

However, in my test, it works on the new installation of MM 2.30.

@sharkbait
Your CX3 may not be the latest version.(1.9.4)

@sharkbait
MMM-CustomInjection doesn’t need to be positioned because that module works on background.

/* config/config.js */
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		mode: 'month',
	}
},
{
	module: "MMM-CustomInjection",
},

@sharkbait
More polished version.

MMM-CustomInjection

/* modules/MMM-CustomInjection/MMM-CustomInjection.js */
Module.register("MMM-CustomInjection", {
  getStyles: function () {
    return [
      this.file("MMM-CustomInjection.css")
    ]
  },

  notificationReceived: function (notification, payload, sender) {
    if (notification === "CX3_DOM_UPDATED") {
      const { instanceId } = payload
      this.inject(instanceId)
    }
  },

  inject: function (instanceId) {
    const moduleDom = document.querySelector(`#${instanceId}`)
    if (!moduleDom) return
    moduleDom.classList.add('custom-injected')
    const buttons = document.createElement('div')
    buttons.className = 'calendar-header-buttons'
    const prev = document.createElement('button')
    prev.className = 'calendar-header-button'
    prev.innerHTML = 'PREV'
    prev.onclick = () => {
      this.sendNotification('CX3_GET_CONFIG', {
        callback: (currentConfig) => {
          this.sendNotification('CX3_SET_CONFIG', {
            monthIndex: currentConfig.monthIndex - 1,
          })
        }
      })
    }
    const current = document.createElement('button')
    current.className = 'calendar-header-button'
    current.innerHTML = 'CURRENT'
    current.onclick = () => {
      this.sendNotification('CX3_RESET', {})
    }
    const next = document.createElement('button')
    next.className = 'calendar-header-button'
    next.innerHTML = 'NEXT'
    next.onclick = () => {
      this.sendNotification('CX3_GET_CONFIG', {
        callback: (currentConfig) => {
          this.sendNotification('CX3_SET_CONFIG', {
            monthIndex: currentConfig.monthIndex + 1,
          })
        }
      })
    }
    buttons.appendChild(prev)
    buttons.appendChild(current)
    buttons.appendChild(next)
    moduleDom.appendChild(buttons)
  }
})

/* modules/MMM-CustomInjection/MMM-CustomInjection.css */
.custom-injected {
  position: relative;

  .calendar-header-buttons {
    position: absolute;
    top: 30px;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    width: fit-content;

    .calendar-header-button {
      background-color: transparent;
      border: none;
      color: white;
      font-weight: bold;
    }
  }
}

@sharkbait

MagicMirror is an open-source project with a modular structure. Modifying the original modules can make updates difficult, so it’s best to avoid it when possible. Fortunately, in CX3, you can easily implement the desired functionality by creating and adding a simple custom module without directly modifying the source code.

To dynamically change CX3’s view at runtime, you can use the method suggested by sdetweil, which involves creating multiple instances and switching them out one by one. However, this can also be implemented more simply using only notifications.

The example module below demonstrates how to add two simple buttons to the screen. This module utilizes MagicMirror’s notification architecture to transform CX3’s view when the button is clicked.

MMM-ButtonExample

/* modules/MMM-ButtonExample/MMM-ButtonExample.js */
Module.register("MMM-ButtonExample", {
  getDom: function () {
    const wrapper = document.createElement("div")
    const button1 = document.createElement("button")
    button1.innerHTML = "Current Month"
    button1.onclick = () => {
      this.sendNotification("CX3_RESET", {
        callback: (currentConfig) => {
          console.log("Return to the original config")
        }
      })
    }
    const button2 = document.createElement("button")
    button2.innerHTML = "Next Month"
    button2.onclick = () => {
      this.sendNotification("CX3_GET_CONFIG", {
        callback: (currentConfig) => {
          this.sendNotification("CX3_SET_CONFIG", {
            monthIndex: currentConfig.monthIndex + 1
          })
        }
      })
    }
    wrapper.appendChild(button1)
    wrapper.appendChild(button2)
    return wrapper
  }
})

/* config/config.js */
...
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		mode: 'month',
	}
},
{
	module: "MMM-ButtonExample",
	position: "bottom_bar",
},
...

@Tiller
invalidcaldavserver.com ???
Usually your error message is showing that URL may be wrong.