MMM-CalendarExt3

MMRIZE

broadcastPastEvents : enable the feature
maximumNumberOfDays : how old events would be gathered
maximumEntries : give enough rooms otherwise your too old events would consume your default slots.

sdetweil

maximumEntries : give enough rooms otherwise your too old events would consume your default slots.

I may have messed this one up on latest release…

altho documented as a different setting for each calendar, it did not work.
(wasn’t used)
I added it back, BUT now it chops off at maximumEntries…

the author of the PR has fixed it again in develop branch…
broadcast all, chop off for display later

EphraimB

[17.07.2022 12:36.14.788] [INFO] Calendar-Fetcher: Broadcasting 10 events.

		{
			module: "calendar",
			//position: "top_left",	// This can be any of the regions. Best results in left or right regions.
			config: {
				instanceId: "WeeklyCalendar",
				colored: true,
				showLocation: true,
				maxTitleLength: 50,
				maxLocationTitleLength: 50,
				calendars: [
					{
						url: 'https://calendar.google.com/calendar/ical/emb16social%40gmail.com/public/basic.ics',
						symbol: 'calendar'
					},
				],
			}
		},
		{
		  module: "MMM-CalendarExt3",
		  position: "bottom_center",
		  title: "Personal calendar",
		  config: {
			mode: "week",
			instanceId: "WeeklyCalendar",
			weekIndex: 0,
			weeksInView: 1,
			firstDayOfWeek: 0,
			calendarSet: ['personal']
		  }
		},

It displays on the calendar but not the ext3 extention

MMRIZE

@EphraimB
You are referring a calendar which has the name of “personal” in your “calendarSet”, but there is no calendar in your “calendar” module’s config like that. That’s the reason.

EphraimB

@MMRIZE Thank you. It’s fixed.

almightyyoshi

@MMRIZE

Not sure what I’m doing wrong. I’ve tried the following:

.CX3 .event.calendar_Music {
        border: none;
}

.CX3 .event.calendar_"Music" {
        border: none;
}

.CX3 .event.calendar_MUSIC {
        border: none;
}

.CX3 .event.calendar_"MUSIC" {
        border: none;
}

.CX3 .event.calendar_music {
        border: none;
}

.CX3 .event.calendar_"music" {
        border: none;
}

Do calendar names pull from the default calendar module, or do they need to be specified somewhere within CX3?

BKeyport

@almightyyoshi Most browsers have some form of a debugging screen. On Windows Edge browsers, the feature is called DevTools.

If you use that, and load the webpage direct from the Pi, pausing you can debug the hell out of the results direct from your work right there, then simply copy working CSS over to your custom.css file after you’re done.

It’s rather sweet. Use it all the time.

sdetweil

@almightyyoshi cal names, both…

sdetweil

@BKeyport see https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1657744269845

about learning how to use the dev window to find and set classes and styles

MMRIZE

@almightyyoshi

If your calendar module has some configuration like this;

{
  module: "calendar",
  header: "Schedules",
  position: "top_left",
  config: {
    calendars: [
      {
        symbol: "calendar-check",
        url: "...",
        color: "red",
        name: "Music",
      },
...

Events on this calendar will be represented in MMM-CalendarExt3 as like this.

<div class="event calendar_Music PUBLIC fullday future useSymbol" data-calendar-seq="0" data-calendar-name="Music" data-color="red" ... > ... </div>

So you can use CSS Selector like this.

.CX3 .event.calendar_Music {
  ...
}

If you want, you can add more CSS Specifity to grab more specific target events.

But that is not the real cause of your issue.

Your real issue is;

.CX3 .event.calendar_Music {
        border: none; // <-- Here;
}

In the default CSS of this module, a single event has no border, and a full-day event has a regional background colour(and box-sizing model is border-box), so even though you remove the border, you cannot distinguish what changed, you probably have thought the CSS grammar might have been wrong because nothing looked changed. That was why you lost your way.