@Andreas1956
OK. Look inside deeper.

1. Execute MM as dev mode.

• If you are using pm2, stop it first.
• In your MM directory, run this script.

npm run start:dev

2. Or alternatively, After MM’s normal execution, Ctrl + Shift + i (Or Alt+F12, it could be different by your system environment), Anyway, open the dev-console on the browser/client with hotkeys.

3. It will open this kind of dev-console as a side panel.

4. At the panel, you can see Elements or Console tab. Go to Elements Tab.

5. There would also be cursor icon (left side of the Elements Tab mark); select it and click to any event element

6. Now, the side Elements tab will focus on the HTML code for the element you clicked.
   

7. navigate into the title element

8. Check whether proper text exists there.

9. And See the Styles tab.(Somewhere in the side panel. Usually below the Elements window)

You can see there are --calendarColor and oppositeColor attributes there. And there is no other overridden colors.

10. Or you can check this in Computed tab.

There are some calculated results for the style.

Could you find any suspicious things on watching your case?

@Andreas1956
I checked your config and css but nothing seems wrong.
From which version were you updated to new one? (I think you cannot remember, but how long has it been since the previous update?)
Anyway, I think you may have missed something in the last update.

1. Go to the CX3 module directory, then;

git pull
npm update

I doubt you may miss npm update part in your last update process.

2. If it still does not work, do this in your CX3 module directory

git submodule update --init --recursive

3. Still not working; remove the CX3 directory and then reinstall again.

4. Still not working; let’s discuss deeper.

@Andreas1956
Not tested yet… but .CX2 in css/custom.css ???

@nic0rz
To avoid this, the module had to send the image as a file, not an image. But in that case, the preview of the image will not work in the Telegram App. Dillemma. (I’ll consider enabling the selection both ways.)

@nic0rz
Telegram mobile app will reduce the size of the same image than the desktop app.

@Andreas1956
Share me the config and custom.css.

@htilburgs
Just for your reference

const ip_a = "..."
const ip_b = "..."

const apiQuery = (index, url) => {
  if (!url) return Promise.reject({ index, reason: 'url is not defined' })
  return new Promise((resolve, reject) => {
    try {
      fetch(url)
        .then(response => response.json())
        .then(data => {
          resolve({ index, value: data })
        })
        .catch(error => {
          reject({ index, reason: error })
        })
    } catch (error) {
      reject({ index, reason: error })
    }
  })
}

const queries = []
queries.push(apiQuery('A', ip_a))
queries.push(apiQuery('B', ip_b))
Promise.allSettled(queries).then((results) => {
  console.log('All jobs are done')
  results.values().forEach((result) => {
    if (result.status === 'fulfilled') {
      console.log(`Index: ${result.value.index}, Value:`, result.value.value)
    } else {
      console.log(`Index: ${result.reason.index}, Error:`, result.reason.reason)
    }
  })
})

@Ragged4310

See the green events

eventPayload in CX3 config;

/* CX3 config section in `config/config.js` */
eventPayload: (payload) => {
	const targetCalendar = "Reservation"
	const divideGap = 1000 * 60 * 60 * 1
	const locale = 'en-US'
	const timeStyle = { timeStyle: 'short' }

	const condition = (ev) => { return (ev.calendarName === targetCalendar && ev.fullDayEvent === false) }
	const target = payload.filter(condition).sort((a, b) => a.endDate - b.endDate)
	const result = payload.filter(e => !condition(e))
	const dateStr = (dateValue) => Intl.DateTimeFormat(locale, timeStyle).format(new Date(+dateValue))
	const collapse = (template, ev) => {
		if (!template?.["title"]) template = { ...ev, collapseCount: 0, description: '', location: '' }
		template.collapseCount++
		template.startDate = String(Math.min(+template.startDate, +ev.startDate))
		template.endDate = String(Math.max(+template.endDate, +ev.endDate))
		template.title = `${dateStr(template.startDate)} - ${dateStr(template.endDate)}`
		if (template.collapseCount > 1) template.title += ` <span class="count">${template.collapseCount}</span>`
		template.description += `<div class="collapsedEvent">
			<p class="title">${ev.title}</p>
			<p class="period">${dateStr(ev.startDate)} - ${dateStr(ev.endDate)}</p>`
		if (ev.description) template.description += `<p class="description">${ev.description}</p>`
		if (ev.location) template.description += `<p class="location">${ev.location}</p>`
		template.description += '</div>'
		return template
	}
	const dateKey = (dateValue) => new Date(+dateValue).toLocaleDateString('en-CA')
	let collapsedEvent = {}
	for (const ev of target) {
		const currentKey = dateKey(ev.startDate)
		if (!collapsedEvent?.[ 'title' ]) {
			collapsedEvent = collapse(collapsedEvent, ev)
			continue
		}
		const collapsedKey = dateKey(collapsedEvent.startDate)
		if (collapsedKey !== currentKey || +ev.startDate - +collapsedEvent.endDate > divideGap) {
			result.push(collapsedEvent)
			collapsedEvent = collapse({}, ev)
		} else {
			collapsedEvent = collapse(collapsedEvent, ev)
		}
	}
	if (collapsedEvent?.[ 'title' ]) result.push(collapsedEvent)
	return result
}

You can modify targetCalendar, divideGap, locale ande timeStyle for your purpose.

To beautify;

/* css/custom.css */
.CX3 .event.calendar_Reservation .headline .time {
  display: none;
}

#CX3_POPOVER .title .count,
.CX3 .calendar_Reservation .title .count {
  font-weight: bold;
  color: gray;
}

#CX3_POPOVER .title .count::before,
.CX3 .calendar_Reservation .title .count::before {
  content: "[";
}

#CX3_POPOVER .title .count::after,
.CX3 .calendar_Reservation .title .count::after {
  content: "]";
}

#CX3_POPOVER .description .collapsedEvent {
  line-height: 115%;
  border-bottom: 2px solid silver;

  p {
    margin-top: 0;
    margin-bottom: 0;
  }

  .title {
    font-weight: bold;
  }

  .period {
    text-align: right;
  }

  .description {
    font-style: italic;
    white-space: pre;
    padding-left: 20px;
  }

  .location {
    font-style: italic;
    text-align: right;
  }
}

@Ragged4310
Sure, that’s doable. There’s no reason why it shouldn’t be possible.

This kind of work is domain analysis, which is basically my real-world job.

However, it’s not exactly simple. By simple, I mean it’ll take more than the usual 10 minutes I’d spend diving into this hobby project that genuinely interests me.

And honestly, my rate is quite high. :D (Just kidding.)

Let’s clarify a few things first.

• CX3 is usually useful for viewing events from multiple calendars at once, so you’re probably using other types of calendars (e.g., personal meetings, family schedules) together. For this task, let’s assume that the target “customer reservation” events are in a separate, independent calendar. For convenience, I’ll call this calendar “Reservation” from now on.
• Given the nature of calendars, I assume that there won’t be any overlapping events in the Reservation calendar. Additionally, I’ll assume there are no full-day events or events that span midnight.

With these assumptions, I’ll give it a shot sometime tomorrow when I have some free time. I can’t make any promises, so please don’t get your hopes up too high.

This is not a direct answer to the question, but just for your reference.
The fetch API can be executed directly in the browser, not just in a Node.js environment. You can call the fetch API directly in MMM-MyModule.js without needing node_helper.js.

Additionally, since the fetch API works asynchronously, you can manage the responses of two fetch calls as follows:

• If you need to use the response that arrives first, use Promise.race() or Promise.any().
• If you need to wait for both responses to arrive before proceeding, use Promise.all().

Using these methods can help you manage data synchronization more efficiently.