MMM-CalendarExt3Agenda

[BKeyport]

@Wenike My max is set to 20, so I doubt that’s the issue. Here’s mine that works great - with events for weeks (because I follow sports)

module: "calendar", // Built in
//position: "top_right",
config: {
	broadcastEvents: true,
	broadcastPastEvents: false,
	fetchInterval: 30000,
	maximumEntries: 20,
(Calendars follow) 

(cut)

module: "MMM-CalendarExt3Agenda", // https://github.com/MMRIZE/MMM-CalendarExt3Agenda
position: "top_center",
config: {
	showMiniMonthCalendar: false,
	instanceId: "basicCalendar",
	firstDayOfWeek: 0,
	startDayIndex: 0,
	endDayIndex: 99,
	minimalDaysOfNewYear: 1,
	animationSpeed: 0,
	useSymbol: false,
	useWeather: false,
	waitFetch: 0,
	eventTransformer: (ev) => {
		if (ev.title.search("⚾") > -1)
		ev.title = ev.title.replace("⚾️ ","");
		return ev
	},
},

@hogedir - please post your configuration and screenshots like this. You can blur if needed. Alternatively, if you want a daily repeating event for testing, feel free to use my test calendar - I’ll give you the iCal address in private.

[sdetweil]

@BKeyport I introduced a bug in 2.20.

maximumentries includes those in the past incorrectly

you can set it differently for each cal, but if u don’t then the module level value will be used.

the bug is fixed in 2.21 coming oct 1.

[BKeyport]

@sdetweil really? I haven’t noticed. As you can see, I’ve got plenty of events…

good to know, though.

[sdetweil]

@BKeyport really trouble with past events getting counted

[hogedir]

I’ve change it from 100 to 100000 and now its works,
my calendar is showed now. thanks a lot for your reactivity guys, perfect answer.

two other questions : this parameter symbol: ‘camera’ maybe be other value than ‘camera’? I did not understood why camera was by default… is there a list of other symbol values?

other question : I want to extend the text limit showing because it’s looks like limited for the events that not have a eaxct duration like 10:00-12:00

like you have here in your screen :

Thanks.

[BKeyport]

@hogedir The event you point to is generated by the IRS, and is a full day event. the text is theirs.

Here’s my CSS, fully commented for you to borrow:

/* CalendarExt3Agenda */
/* Set CX3a to size, etc. */
.CX3A {
	font-size: 18px;
	min-width: 440px;
	max-width: 440px;
	max-height: 900px;
	overflow-y: unset;
	text-align: left;
	position: relative;
	color: var(--color-text);
	--todayColor: DarkSlateGrey;
	--saturdayColor : orange;
	--sundayColor: darkGoldenRod; 
}

/* Hide useless descriptions, you wanna know, load your calendar */
.CX3A .event .description {
	display: none;
}

/* Hide useless locations, you wanna know, load your calendar */
.CX3A .event .location {
	display: none;
}

/* Set up custom full day look */ 
.CX3A .cellBody .fullday .event {
	color: var(--calendarColor);
	background-color: var(--oppositeColor);
	max-width: 100%;
	padding: 0px 10px;
	width: 100%;
}

/* make fullday events overflow onto next line */
.CX3A .cellBody .fullday .event .title {
	color: inherit;
	overflow: unset;
	white-space: unset;
	text-overflow: unset;
}

/* Add the icon to full day events */
.CX3A .cellBody .fullday .event .headline {
	display: inline-block;
}

/* get rid of the icon for blanks	*/
.CX3A .event .headline .symbol {
  display: none;
}

/* fullday keep the times hidden */
.CX3A .cellBody .fullday .event .headline .time {
	display: none;
}

/* Start Time Adjustments */
.CX3A .event .time.startTime {
	order: 2;
	width: 90px;	
	text-align: right;
}

/* Stretch title to left justify and organize */ 
.CX3A .event .title { 
	flex-grow: 1;
	color: var(--calendarColor);
}

/* change date header to center & change color */
.CX3A .agenda .cellHeader {
	justify-content: center;
	color: var(--text-color);
}

.CX3A .agenda .cellDay {
	color: var(--text-color);
}

/* get rid of spare space & dash */
.CX3A .event .startTime::after {
	content: '';
}

/* Adjust time space */ 
.CX3A .event .time {
	font-size: unset;
 }

/* Remove End time */
.CX3A .event .endTime {
	display: none;
}

/* Adjust how tall app is */
.CX3A .agenda {
	position: relative;
	max-height: 900px;
	overflow-y: hidden;
}

/* Fade adjustments */
.CX3A .agenda::after {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 6%;
	width: 100%;
	content: '';
	background-image: unset;
}

(shading due to developer console)

I decided to change it up, this is what it looks like now.

color of events is set by the calendar functionality, thusly, background is via CSS:

	url: "http://cal.events/VReW45.ics",
	name: "Seahawks",
	color: "#002244",

[BKeyport]

@MMRIZE said in MMM-CalendarExt3:

Small news.
Now it could get the events from randomBrainstormer/MMM-GoogleCalendar module also.

Are you planning on adding this to Agenda? I could use this.

[MMRIZE]

@BKeyport already applied.

[hogedir]

@BKeyport I don’t understand how to extend the full day event like you. mine is limited and i have some space available like that

I want to extend totally the text for fullday event and not having these 3 points “…”

[BKeyport]

@hogedir It’s documented in my CSS above… Look closely you’ll find it. “fullday events overflow” is a clue.

[Wenike]

@BKeyport I appreciate you posting your CSS, it gave me a good base to tweak to make my layout work for me (especially getting each event in the calendar’s color but still dimming when that event is in the past.

[MMRIZE]

Nobody like my default color settings? :(

[BKeyport]

@MMRIZE I did, when I was on a dark background. Then I decided I wanted to go with color to tell events apart, so css work it was.

[Wenike]

@MMRIZE I did! Except I have like 6 calendars defined and I’ve long been used to telling them apart by color on my Google calendar.

[luisestrada]

@hogedir

I edited the max-width value (50% to 100%) in .CX3A .cellBody .fullday .event and solved the issue

[hogedir]

@MMRIZE how do you change the baseball icon please? which one are available to put?

[BKeyport]

@hogedir icons are changed at the calendar level by adding symbol: <some symbol> to each calendar in the calendar module.

https://fontawesome.com/v5/search is where you can look up icons to use. The system can’t use pro icons.

{
	url: "http://cal.events/VReW45.ics",
	name: "Seahawks",
	symbol: "football-ball",						
},

is https://fontawesome.com/v5/icons/football-ball?s=solid&f=classic

[hogedir]

@BKeyport I searched how to Hide the list of events diary and the AGENDA calendar with all the month with days because I just want to show the 3rd part of the module with all the events.

like this : hiding the cross part and the other part with events :

[sdetweil]

@hogedir please see this post

https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1664733698317

about using the developers window (ctrl-shift-i) to examine the web page and find the element u want to address

this content goes into ~.MagicMirror/css/custom.css

.MMM-CalendarExt3Agenda  .?????? {
      display:none;
}

where ??? is the classname of the month view

[BKeyport]

@hogedir hiding the minical is simple: showMiniMonthCalendar: false, in your config. I suggest you read the README.md - it’s all documented.

Everything other than config options is CSS - Feel free to give ideas, and @mmrize and I can help you work it out.