MMM-CalendarExt3

p1lspeda

@sdetweil Thanks for pointing me in the right direction.
Seems I need to play around with css.

sdetweil

@p1lspeda see the second link below in my signature for using the developers window elements tan

gonzonia

I just did a new build of my MM to upgrade to Bookworm and update to no longer use unsupported modules. Everything went well for the most part except my calendars aren’t showing. This is in the Error log from start up -

[2025-02-17 11:56:43.570] [33m[WARN] [39m [33m[1m[MMM-CalendarExt3.js:390:11][0m [CX3] Module is not prepared yet, wait a while.[39m 
[2025-02-17 11:56:43.576] [33m[WARN] [39m [33m[1m[MMM-CalendarExt3.js:390:11][0m [CX3] Module is not prepared yet, wait a while.[39m 
[2025-02-17 11:56:43.668] [33m[WARN] [39m [33m[1m[MMM-CalendarExt3Agenda.js:186:11][0m [CX3A] Module is not prepared yet, wait a while.[39m 
[2025-02-17 11:56:43.673] [33m[WARN] [39m [33m[1m[MMM-CalendarExt3Agenda.js:186:11][0m [CX3A] Module is not prepared yet, wait a while.[39m 
[2025-02-17 11:56:43.690] [33m[WARN] [39m [33m[1m[MMM-CalendarExt3Agenda.js:186:11][0m [CX3A] Module is not prepared yet, wait a while.[39m

I can see in the main log that the Calendar module is getting data -

[2025-02-17 17:12:47.050] [34m[INFO] [39m [34mCalendar-Fetcher: Broadcasting 584 events from https://calendar.google.com/calendar/ical/XXXXXXX/basic.ics.[39m 
[2025-02-17 17:12:47.215] [34m[INFO] [39m [34m[1m[calendar.js:699:7][0m sorting events count=130[39m 
[2025-02-17 17:12:47.297] [34m[INFO] [39m [34m[1m[calendar.js:699:7][0m sorting events count=112[39m 
[2025-02-17 17:12:47.309] [34m[INFO] [39m [34m[1m[calendar.js:739:7][0m slicing events total maxcount=10[39m

I’ve tried the

git submodule update --init --recursive

from the install instructions and it didn’t seem to help. Thoughts?

sdetweil

@gonzonia if you installed MagicMirror 2.30
did you also install the fix?

https://forum.magicmirror.builders/topic/19282/version-2-30-0-calendar-fix-for-clipping-broadcast-events?page=7

gonzonia

@sdetweil No. I had not seen that. Installing now. Thanks!

redink

Would it be possible to combine the calendar color indicator at the time using just CSS?

Right now, it’s a colored circle and the time next to it and I was wondering if it would somehow be possible to have the time be inside the circle, or have the time be a different background color.

My display is quite small, and saving a few extra pixels would be nice.

alfi153

Hello.
Is it possible that with the Calender-ext3 in the weekly display the calendar entries are displayed in two or three lines?

CyruS1337

Hello everyone

I hope you can help me. I’m trying to get the calendar to display in Calendar Ext3.

This is what my configuration looks like

                        {
                          module: "calendar",
                          position: "top_left",
                          config: {
                            broadcastPastEvents: true, // <= IMPORTANT to see past events
                            calendars: [
                              {
                                url: "https://calendar.google.com/calendar/ical/....................ics",
                                name: "Andreas", // <= RECOMMENDED to assign name
                                color: "red" // <= RECOMMENDED to assign color
                                }
                        ]
                        }
                      },
                        {
                          module: "MMM-CalendarExt3",
                          position: "bottom_bar",
                           title: "",
                           config: {
                            mode: "month",
                            instanceId: "basicCalendar",
                            locale: 'de-CH',
                            maxEventLines: 5,
                            firstDayOfWeek: 1,
                            calendarSet: ['Andreas'],
                          }
                },

sdetweil

@CyruS1337 did you install the fix?

https://forum.magicmirror.builders/topic/19282/version-2-30-0-calendar-fix-for-clipping-broadcast-events

CyruS1337

@sdetweil

Great, it worked. I have one more question.
Do I have to use the “calendar” module from MagicMirror, or would the MMM-MyCalendar module also work?

						{
			module: "MMM-MyCalendar",
			position: "bottom_right",	// This can be any of the regions. Best results in left or right regions.
			header: 'Kalender Andreas',
		  config: {
			colored: true,
			maxTitleLength: 30, 
			maximumEntries: 4,
			displayRepeatingCountTitle: true,
			timeFormat: "HH:mm",
			dateFormat: "DD:MM:YYYY",
			joiningWord: "um",
			calendars: [
			{
				url: 'https://calendar.google.com/calendar/ical/................./basic.ics',
				color: "#5b53d4",
				symbol: 'calendar',
				auth: {
					user: 'username',
					pass: 'superstrongpassword',
					method: 'basic'
								}
			},
			],
	}
		},
						{
			module: "MMM-MyCalendar",
			position: "bottom_right",	// This can be any of the regions. Best results in left or right regions.
			header: 'Kalender Daniela & Andreas',
		  config: {
			colored: true,
			maxTitleLength: 30, 
			maximumEntries: 4,
			displayRepeatingCountTitle: true,
			timeFormat: "HH:mm",
			dateFormat: "DD:MM:YYYY",
			joiningWord: "um",
			calendars: [
			{
				url: 'https://calendar.google.com/calendar/ical/................./basic.ics',
				color: "#f05db0",
				symbol: 'calendar',
				auth: {
					user: 'username',
					pass: 'superstrongpassword',
					method: 'basic'
								}
			},
			],
	}
		},

sdetweil

@CyruS1337 MAYBE it will work, but it is a clone of the default cal from 3 years ago, with the broken repeating schedule code…
which I just fixed in the latest release 2.30.0, Jan 1…

CyruS1337

@sdetweil thanks a lot. It works

p1lspeda

Hi,
CSS is driving my crazy.

As you can see in the above screenshot, today (Tuesday) the top (weather, today’s Date & Month) take up the entire width.
This is fine.
The “problem” was yesterday with the additional “CW13” which led to overlapping.
I was wondering; if I could minimize the padding around the current date (the red area in the screenshot), theoretically the space should be big enough for all info to be next to each other

I tried adjusting the css

.CX3 .today .cellDate {
  padding: 1px 8px;
  }

but unfortunately, that did not have any effect.

Can somebody point me in the right direction ?
Thanks

sdetweil

@p1lspeda I do not know , but you can use the developers window to fiddle with css changes live

see the second link in my signature below

also see this topic where we discussed css and the dev window just a couple days ago
https://forum.magicmirror.builders/topic/19559/css-modifications-on-a-module-which-has-no-own-css-styles

BKeyport

@p1lspeda

I think you’ll find that it’s because of the .cellDate property - it’s set to flex-grow: 3

Almost everything on that line is also connected to .cellHeader.

I disable the CW line manually (from habit, don’t know if it’s an option to do in config) along with a few other modifications (including eliminating weather through config):

.CX3 .cellHeader {
  text-align: right;
  height: var(--cellheaderheight);
  padding: 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 100%;
}

/* Disable CW date */
.CX3 .cw {
	display: none;
}

This results in the header taking up the entire space.

Look for the .cellHeader properties in the main CSS file, and copy them over to your custom.css to mess with them all you want and see what happens.

Pay special attention to justify-content in .cellHeader in combination with the flex-grow in .cellDate

sdetweil

@BKeyport you can override in dev window, no need to copy

BKeyport

@sdetweil right, but once you have the changes you want, you have to figure out how to implement them, and I’ve noticed with CX3 and some other modules, sometimes the dev window flat out lies where to stuff the CSS for final.

sdetweil

@BKeyport you copy/paste from the top right to custom.css
with the selected selector from right of bottom left pane w the modulename class prefix

will post images later, in car now

sdetweil

@BKeyport never seen it lie

p1lspeda

Thanks folks,
much appreciated that you invest your free-time to help simpletons like me.
My custom.css now includes

.CX3 .cellHeader .cellDate {
        flex-grow: 0;
}

.CX3 .cw::before {
        content: "CW";
        margin-right: 0px;
}

which seems to achieve what I was/am looking for.