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