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

[BKeyport]

@sdetweil yeah, I put it back… both it, and the target I wrote up don’t target it.

[sdetweil]

@BKeyport ok , ill look at it tomorrow. i dont use agenda normally

[sdetweil]

@BKeyport ok, he has an attribute on the agenda day, which contains the count of events
this will hide the day if there are no events

.CX3A [data-events-counts='0'] {
  display: none;
}

[FMancuso5]

@sdetweil

Thanks for the info. I read through that thread and made some adjustments. I have waitFetch for both CX3 and CX3A set for 20 seconds. I left the refresh intervals at 30 min. Prior to the waitFetch, at startup the CX3 module would have a calendar or two missing, but it would correct at the next refresh interval. With waitFetch, all events display when the calendar is drawn, which makes obvious sense. The extra time helped.

That didn’t change the CX3A module though. It’s still blank in the bottom right corner of the screen, save for my “Next 3 Days” header. It stays blank even when I shorten the refreshInterval to run it through some extra cycles. All the necessary calendars are broadcasting without issue, I can see that on the terminal when I stop MM. I’m trying to make sense of it because my understanding is that both CX3 and CX3A modules grab the default calendar broadcasts simultaneously. And my weekly CX3 module is functioning perfectly right next to it.

[sdetweil]

@FMancuso5 can you show the agenda config?

here is mine

    {
      module: "MMM-CalendarExt3Agenda", // https://github.com/MMRIZE/MMM-CalendarExt3Agenda
      position: "top_left",
      classes:"page1",
      config: {
        showMiniMonthCalendar: false,
        refreshInterval: 3600000, // Should be one hour
        waitFetch: 20000,
        firstDayOfWeek: 0,
        startDayIndex: 1,
        endDayIndex: 30,
        animationSpeed: 0,
        useSymbol: true,
        useWeather: false,
      },
    }

[FMancuso5]

@sdetweil

{
            module: "MMM-CalendarExt3Agenda",
            position: "top_right",
            header: "Next 3 Days",
            config: {
                showMiniMonthlyCalendar: false,
                instanceId: "basicAgenda",
                locale: "en-US",
                startDayIndex: 0,
                endDayIndex: 3,
                calendarSet: ["John", "Jane", "Joe", "Jill", "Family", "Important"],
                waitFetch: 30 * 1000,
                refreshInterval: 30 * 60 * 1000,
            }
        }

[sdetweil]

@FMancuso5 one thing, for all config and logs, PLEASE use the code wrapper here in the forums…

to do this

copy the text you want to post
paste into the message editor, blank line above and below
select the text you just pasted
hit the </> button over the editor

I fixed the prior post

[sdetweil]

@FMancuso5 said in MMM-CalendarExt3Agenda:

            startDayIndex: 0,
            endDayIndex: 3,

sorry to ask dumb question, are there events in the next 3 days?
if you remove those do you get a display?

if you comment out the calendarSets does that make a difference

waitFecth, 30 seconds, then nothing til refreshInterval…(30 minutes)

make waitFetch longer, 60*1000 (1 minute)
to test

[BKeyport]

Sam: Here’s a live example of no-event item, and an event item. The count don’t show unless it’s got 1 event. Module_4 is blank, Module_5 is showing one event.

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

<div id="module_5_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 class="cell thisMonth thisYear year_2025 month_8 date_10 weekday_0 seq_0 week_32 weekend weekend_2" data-events-counts="1">
                    <div class="cellHeader">
                        <div class="cellHeaderMain">
                            <div class="cellDay relativeDay relativeNamedDay relativeDayGap_1"><span class="dateParts literal seq_0 unit_none">tomorrow</span></div>
                            <div class="cellDate"><span class="dateParts weekday seq_0">Sunday</span><span class="dateParts literal seq_1">, </span><span class="dateParts month seq_2">Aug</span><span class="dateParts literal seq_3"> </span><span class="dateParts day seq_4">10</span></div>
                            <div class="cw">32</div>
                        </div>
                        <div class="cellHeaderSub"></div>
                    </div>
                    <div class="cellBody">
                        <div class="fullday"></div>
                        <div class="single">
                            <div class="event calendar_Sounders future singleday" data-calendar-seq="1" data-calendar-name="Sounders" data-color="#5D9741" data-description="Calendar not up to date? Check https://fixtur.es/up-to-date" data-title="Los Angeles Galaxy - Seattle Sounders FC" data-full-day-event="false" data-geo="false" data-location="" data-start-date="1754877600000" data-end-date="1754883900000" data-today="false" data-symbol="fas fa-fw fa-futbol" style="--calendarColor: #5D9741; --oppositeColor: white;">
                                <div class="headline useSymbol"><span class="symbol"><span class="fas fa-fw fa-futbol"></span></span>
                                    <div class="time startTime inDay"><span class="eventTimeParts hour seq_0">7</span><span class="eventTimeParts literal seq_1">:</span><span class="eventTimeParts minute seq_2">00</span><span class="eventTimeParts literal seq_3"> </span><span class="eventTimeParts dayPeriod seq_4">PM</span></div>
                                    <div class="time endTime inDay"><span class="eventTimeParts hour seq_0">8</span><span class="eventTimeParts literal seq_1">:</span><span class="eventTimeParts minute seq_2">45</span><span class="eventTimeParts literal seq_3"> </span><span class="eventTimeParts dayPeriod seq_4">PM</span></div>
                                    <div class="title">Los Angeles Galaxy - Seattle Sounders FC</div>
                                </div>
                                <div class="description">Calendar not up to date? Check https://fixtur.es/up-to-date</div>
                                <div class="location"></div>
                            </div>
                        </div>
                    </div>
                    <div class="cellFooter"></div>
                </div>
            </div>
        </div>
    </div>
</div>

[sdetweil]

@BKeyport you want the whole module gone. right?