@Kobose
Sorry, That module uses some state-of-the-art ECMA standard scripts, and Pi0 is too old. I cannot promise Pi0 could handle the module.

@monark
Unfortunately, those calendars are not widget so you cannot insert them into your website or MagicMirror.
And those are not providing ics or json format directly so you cannot use calendar module also.
A dedicated module to access the data with their own API should be needed.

@BKeyport
Your DOM might not be rendered yet on “start” imo. I think manipulating DOM after “DOM_OBJECT_CREATED” notification would be safer.

How about this? not tested.

start: function () {
  this.dailyTimer = null
  const moment = new Date()
  const midnight = new Date(moment.getFullYear(), moment.getMonth(), moment.getDate() + 1, 0, 0, 0, 0)
  const toMidnight = midnight - moment
  setTimeout(() => {
    this.doSomething()
  }, toMidnight)
},


doSomething: function () {
  clearTimeout(this.dailyTimer)
  this.dailyTimer = null
  // Do your job here.
  this.dailyTimer = setTimeout(() => {
    this.doSomething()
  }, 24 * 60 * 60 * 1000)
}

MMM-CountEvents

Countdown or countup for events

This module is revamped from the scratch. If you are using the previous version, you may need reinstall again.

Screenshots

Features

• Count up / down to specific date/time
• Various formatting & custom template
• Auto repeat : yearly, monthly, daily, hourly.
• Callback functions for updating or passing the event. (You can make an alarm with this module)

History

2.0.0 (2024-08-07)

• Revamped

Author

• Author: Seongnoh Sean Yi eouia0819@gmail.com
• Repository : https://github.com/MMRIZE/MMM-CountEvents

@movingfish
Secret ics URL is easier to handle. But your config.js is weaker for peeping. (There is another alternative MMM-CalDAV)

@movingfish
MMM-GoogleCalendar is incompatible with the standard default MM’s calendar module. It spits out incompatible broadcasting notifications, so you should convert it with preProcessor of MMM-CalendarExt3.

Let’s check something in your config.

1. preProcessor should be located in config block of MMM-CalendarExt3

{
  module: "MMM-CalendarExt3",
  position: "bottom_center",
  title: "Events Calendar",
  config: {
    preProcessor: (e) => {
      if (e.startDate) return e // when event coming from default module, skip conversion.
      if (e.start?.dateTime) {
        e.startDate = new Date(e.start.dateTime).valueOf()
      } else if (e.start?.date) {
        e.startDate = new Date(`${e.start.date}T00:00:00`).valueOf()
      }
      if (e.end?.dateTime) {
        e.endDate = new Date(e.end.dateTime).valueOf()
      } else if (e.end?.date) {
        e.endDate = new Date(`${e.end.date}T00:00:00`).valueOf()
      }
      e.title = e.summary
      e.fullDayEvent = (e.start?.date) ? true : false
      return e
    },
    ... // Your other configuration
  }
},

2. You may need broadcastEvents: true, in MMM-GoogleCalendar module. I don’t know why, but that option is disabled by default unlike the default calendar module.

{
  module: 'MMM-GoogleCalendar',
  header: "My Google Calendar",
  position: "top_left",
  config: {
    broadcastEvents: true, // <-- You may need this
    calendars: [
...

3. Not related to this issue, but you did something wrong.

• in mode: "month", weekIndex and weeksInView are out of sense. It has meaning only in mode: "week".
• en-EN is not a proper locale. Use en-US or just en. (Of course, it depends on where you live, en-GB, en-IN, en-AU, …)
• If you set a proper locale, you don’t need to declare firstDayOfWeek. That value will be assigned automatically by your locale.
• You are refreshing the module every 2 minutes. Is it really needed?

@movingfish
To collaborate with GooglCalendar, see this; https://github.com/MMRIZE/MMM-CalendarExt3/wiki/Examples-%26-Tips

@almightyyoshi

/* css/custom.css */
.CX3_currentMonth .event.singleday .headline .time {
  display: none;
}

Before

After

@almightyyoshi
For the second question, I cannot understand. More details for TO-BE and AS-IS be needed. (Show me the example)