MMM-CalendarExt3Agenda

BKeyport

Anyone know how to get CX3A to completely hide when not in use? Example:

The blank space is a CX3A instance that the earliest event is 47 days away as of writing - I have calendar set to only get 30 days ahead.

relevant code:

	module: "calendar", // Built in
			// position: "top_left",  // Curr7ently hidden
			config: {
				animationSpeed: 0,
				broadcastEvents: true,
				broadcastPastEvents: true,
				fetchInterval: 60000, // minimum 1 minute. 
				maximumNumberOfDays: 30,
				maximumEntries: 999999,
				calendars: [
                                     (insert calendar list here)

		{
			module: "MMM-CalendarExt3Agenda", // https://github.com/MMRIZE/MMM-CalendarExt3Agenda
			position: "bottom_left",
			config: {
				showMiniMonthCalendar: false,
				calendarSet: ["Kraken"],
				instanceId: "2",
				refreshInterval: 3600000, // Should be one hour
				waitFetch: 1,
				firstDayOfWeek: 0,
				startDayIndex: 1,
				endDayIndex: 30,
				animationSpeed: 0,
				useSymbol: true,
				useWeather: false,
				onlyEventDays: 1,
			},
		},

:root {
  --color-text: #999;
  --color-text-dimmed: #666;
  --color-text-bright: #fff;
  --color-background: #000;
  --font-primary: "Roboto Condensed";
  --font-secondary: "Roboto";
  --font-size: 24px;
  --font-size-xsmall: .75rem;
  --font-size-small: 1rem;
  --font-size-medium: 1rem;
  --font-size-large: 1rem;
  --font-size-xlarge: 1rem;
  --gap-body-top: 60px;
  --gap-body-right: 60px;
  --gap-body-bottom: 60px;
  --gap-body-left: 60px;
  --gap-modules: 30px;
}

.region .container {
  display: block;
}

/* adjust modules to display side by side */
.MMM-CalendarExt3Agenda {
  display: inline-flex;
  margin-right: 5px;
  margin-left: 5px;
}

(plus font-size adjustments to use the variables, and elimination of the description field, not shown)

sdetweil

@BKeyport there is nothing built in, but you might be able to use css to do this

i used google search for
css count of child elements
and got this

notice the third choice (excluding no children)

so maybe you can target with no children display:none for the module has(= 0)

BKeyport

@sdetweil I’m not understanding, and I can’t find anything that makes sense to me when I search the same.

Here’s what I know - CX3A generates exactly 3 DIVs inside the module div when empty:

<div id="module_4_MMM-CalendarExt3Agenda" class="module MMM-CalendarExt3Agenda MMM-CalendarExt3Agenda" style="order: 0;">
    <header class="module-header" style="display: none;">undefined</header>
    <div class="module-content">
        <div class="bodice CX3A_undefined CX3A">
            <div class="agenda"></div>
        </div>
    </div>
</div>

It generates more when visible.

Should I be targeting like

.MMM-CalendarExt3Agenda:has(div:nth-child(3):last-child) {

?

sdetweil

@BKeyport

given this article

i think this should work, as the div with the agenda class has no children, aka: is empty

.MMM-CalendarExt3Agenda:has(.agenda:empty) { 
  display:none;
}

FMancuso5

Hi,

Having an issue with CX3A not displaying events. I have below the module configurations. The calendar setup for CX3 works perfectly, and they’re all defined in the default calendar module. The header appears for the Agenda in the bottom right as well, just no events are displayed. I know there was a clipping issue with the maxEntries on the default calendar. I have them all set to 100, and this is a fresh install of MM and all the modules as of this morning, so I didn’t think that was an issue. I’m also not seeing any errors logged while MM is running. I must be missing something.

{
            module: "MMM-CalendarExt3",
            position: "top_center",
            config: {
                mode: "week",
                instanceId: "basicCalendar",
                locale: "en-US",
                maxEventLines: 8,
                weeksInView: 5,
                weekIndex: 0,
                fontSize: 26,
                calendarSet: ["John", "Jane", "Joe", "Jill", "Family", "Important"],
                refreshInterval: 30 * 60 * 1000,
            }
        },
        {
            module: "MMM-CalendarExt3Agenda",
            position: "top_right",
            header: "Next 3 Days",
            config: {
                instanceId: "basicAgenda",
                locale: "en-US",
                startDayIndex: 0,
                endDayIndex: 3,
                calendarSet: ["John", "Jane", "Joe", "Jill", "Family", "Important"],
                refreshInterval: 30 * 60 * 1000,
            }
        }

sdetweil

@FMancuso5 see this post
https://forum.magicmirror.builders/post/127508

BKeyport

@sdetweil I added it, and it seemed to delete all the calendars, so I removed it, and they’re still gone.

They are broadcasting correctly from calendar.
I’ve restarted both the server and the client.

ACK!

sdetweil

@BKeyport again watch out for waitFetch and refreshInterval

if the events come AFTER waitfetch (default 5 seconds)
they wait til refreshInterval (default 30 minutes)

BKeyport

@sdetweil ~~both are set low, and it worked before. -~~ – whoops - forgot I moved refresh up on those as they don’t change very much. Restored them to 1 minute for testing.

– and it don’t seem to be targeting correctly. does nothing.

sdetweil

@BKeyport and you removed the custom.css entry