MMM-CalendarExt3Agenda

[sdetweil]

@rkorell said in MMM-CalendarExt3Agenda:

In addition there is a “[CX3A] Module is not prepared yet, wait a while.”

its just a warning/informational message… doesn’t cause a problem

[rkorell]

@sdetweil O.K., thanks!

[rkorell]

For Your Information:

as per Sam’s tip I will ignore the “not prepared” message.

For the described problem I’ve chosen the “hard” (not nice) approach:
I’ve eliminated the “intelligent” approach to set color and symbol with a functional design and have “hard” coded evere single condition.

• Not brillant, but: works.
• For my perception it is even much faster to load.
  in the washup with this I finally also resolved my color problem (described in an other thread) with two very simple CSS modifications - the given guidance led to no result, I’ve T&E’rrored

.CX3A .event .title {
        color: var(--calendarColor);
}
.CX3A .event .time {
        color: var(--calendarColor);
}

as the appropriate items to set the color for singl events to the icon color.

The “hard” variant of my X3A module is now as folelows:

		{
		  module: "MMM-CalendarExt3Agenda",
		  position: "top_left", 
		  //header: "Wichtige Termine",
		  config: {
			  			eventTransformer: (ev) => {
				            if (ev.title.search("Restmüll") !== -1) {ev.isFullday = [true], ev.color = "grey" }
				            if (ev.title.search("Papier") !== -1) {ev.isFullday = [true], ev.color = "blue"}
				            if (ev.title.search("Gelber Sack") !== -1) {ev.isFullday = [true],ev.color = "yellow"}
				            if (ev.title.search("Biomüll") !== -1) {ev.isFullday = [true],ev.color = "black"}
							if (ev.title.search("Restmüll & Papier & Gelber Sack") !== -1) {ev.isFullday = [true],ev.title = "Alle Tonnen",ev.color = "fuchsia"}
							if (ev.title.search("Reise") !== -1) {ev.symbol = [ "fa-solid fa-briefcase" ],ev.color = "cyan" }
							if (ev.title.search("Arzt") !== -1) { ev.symbol = [ "fa-solid fa-user-doctor" ], ev.color = "red"  }
							if (ev.title.search("Grillen") !== -1) { ev.symbol = [ "fa-solid fa-grill-hot" ], ev.color = "red"  }
							if (ev.title.search("Flug") !== -1) { ev.symbol = [ "fa-solid fa-plane" ], ev.color = "Gold"  }
							if (ev.title.search("Urlaub") !== -1) { ev.symbol = [ "fa-solid fa-plane" ], ev.color = "Gold"  }
							if (ev.title.search("Krankenhaus") !== -1) { ev.symbol = [ "fa-solid fa-hospital" ], ev.color = "red"  }
							if (ev.title.search("Fahrt") !== -1) { ev.symbol = [ "fa-solid fa-car" ], ev.color = "cyan"  }
							if (ev.title.search("Auto") !== -1) { ev.symbol = [ "fa-solid fa-car" ], ev.color = "cyan"  }
							if (ev.title.search("Hochzeit") !== -1) { ev.symbol = [ "fa-solid fa-heart" ], ev.color = "Gold"  }
							if (ev.title.search("Hochzeitstag") !== -1) { ev.isFullday = [true],  ev.symbol = [ "fa-solid fa-heart" ], ev.color = "Gold"  }
							if (ev.title.search("Abendessen") !== -1) { ev.symbol = [ "fa-solid fa-utensils" ], ev.color = "yellow"  }
							if (ev.title.search("Restaurant") !== -1) { ev.symbol = [ "fa-solid fa-utensils" ], ev.color = "yellow"  }
							if (ev.title.search("Geburtstag") !== -1) { ev.isFullday = [true], ev.symbol = [ "fa-solid fa-birthday-cake" ], ev.color = "green"  }
							if (ev.title.search("Workshop") !== -1) { ev.symbol = [ "fa-solid fa-screwdriver-wrench" ], ev.color = "white"  }
							if (ev.title.search("Service") !== -1) { ev.symbol = [ "fa-solid fa-screwdriver-wrench" ], ev.color = "green"  }
							if (ev.title.search("Friseur") !== -1) { ev.symbol = [ "fa-solid fa-scissors" ], ev.color = "white"  }
							if (ev.title.search("Rad") !== -1) { ev.symbol = [ "fa-solid fa-biking" ], ev.color = "red"  }
							if (ev.title.search("Fahrrad") !== -1) { ev.symbol = [ "fa-solid fa-biking" ], ev.color = "red"  }
							if (ev.title.search("Zahnarzt") !== -1) { ev.symbol = [ "fa-solid fa-fa-tooth" ], ev.color = "red"  }
							if (ev.title.search("Arzt") !== -1) { ev.symbol = [ "fa-solid fa-stethoscope" ], ev.color = "red"  }
							if (ev.title.search("Kino") !== -1) { ev.symbol = [ "fa-solid fa-film" ], ev.color = "blue"  }
							if (ev.title.search("Film") !== -1) { ev.symbol = [ "fa-solid fa-film" ], ev.color = "blue"  }
							if (ev.title.search("Training") !== -1) { ev.symbol = [ "fa-solid fa-book" ], ev.color = "cyan"  }
							if (ev.title.search("Party") !== -1) { ev.symbol = [ "fa-solid fa-ticket-simple" ], ev.color = "green"  }
							if (ev.title.search("Theater") !== -1) { ev.symbol = [ "fa-solid fa-ticket-simple" ], ev.color = "green"  }
			            return ev
				        }, // end Eventtransformer

						// useWeather: false ,
						showMiniMonthCalendar: false,
						//onlyEventDays: 10  -- Nur Tage mit terminen anzeigen ist in der custom.css eingetragen, DAS funktioniert...
						endDayIndex: 30, 
		  
		      	  } // end config CalenderExt3Agenda 

		},  // End module CalenderExt3Agenda   

It would be nice if I can get some information regarding background of the errors described above…

Regards,
Ralf

[MMRIZE]

@rkorell
Do you have any sketch for AS-IS and TO-BE?

[Kelemvor]

I’m currently fighting with a problem that I have one calendar that doesn’t always show up. I don’t know if it’s a timing thing or what. I put in waitFetch: 120000 to see if that would give it more time to load, but it doesn’t always help. Sometimes all the calendars show up. Sometimes one is missing, and it’s always the same one.

It shows the Calender-Fetcher as Broadcasting events from the calendar, but they just don’t show up on the screen. Anyone have any ideas what the problem might be?

[sdetweil]

@Kelemvor there is an open issue where the node helper says it is broadcasting, but the module doesn’t get the notification .

https://github.com/MagicMirrorOrg/MagicMirror/issues/3380

if you change the order of calendars in default calendar, does it continue to fail the same?

and you have the clipping fix on , right?

[Kelemvor]

@sdetweil I do have the Clipping thing on. Right now, the problem calendar is the second one in the config area of the main calendar module. I’ll swap it with the first one and see what happens.

[Kelemvor]

Well, swapping the order seems like it might have helped. I restarted MM a few times and it seems like they are all showing up now. I’ll keep an eye on it. :)
Thanks

[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