MMM-CalendarExt3Agenda

[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;
}