MMM-CalendarExt3

[Dav8574]

@MMRIZE
How to add a event where do you place.

{
  "title": "Leeds United - Chelsea",
  "startDate": 1650193200000,
  "endDate": 1650199500000,
  "fullDayEvent": false,
  "class": "PUBLIC",
  "location": false,
  "geo": false,
  "description": "...",
  "today": false,
  "symbol": ["calendar-alt"],
  "calendarName": "tottenham",
  "color": "gold",
  "calendarSeq": 1, // This would be the order from `calendarSet` of configuration
  "isPassed": true,
  "isCurrent": false,
  "isFuture": false,
  "isFullday": false,
  "isMultiday": false
}

[MMRIZE]

@Dav8574
??? I cannot understand what you meant. Explain in more detail what you want.

[sdetweil]

@Dav8574 you add calendar entries to a Google or similar calendar system

you use the ical url for that cake dar to the default calendar modules in mm, which download and parse the events, and then broadcast them to other modules

where Ext3, picks them up and produces different views of the entries

[luisestrada]

Hi again,

For some reason my calendars stopped working again, it seems it only shows two items in the past from two different calendars, but only once.

And it seems to be the missing ones are private ics from google calendar. This occurred just right after the new update. I tried ever changing the private url in google and even reinstalling MagicMirror with no luck.

[sdetweil]

@luisestrada Ext3 gets entries broadcast from the default calendar.

there was a change(me), that may have caused entry truncation, if you have maximumEntries set in any calendar entry

[luisestrada]

@sdetweil it may sound funny but now, I see all the future events but the ones that already passed, disappeared.

and just in case:

broadcastPastEvents: true,

[sdetweil]

@luisestrada there is another setting to broadcast past events too ( not by default)

[almightyyoshi]

Hi, all. How can I remove the border for a specific calendar? I got this from @MMRIZE

.CX3 .event.fullday,
.CX3 .event.multiday {
        border-left: 4px solid var(--calendarColor);
        border-bottom: 1px solid var(--calendarColor);

.CX3 .event.singleday {
        border-left:4px solid var(--calendarColor);

There are a couple of calendars where I have icons so I don’t want to use any border. I’ve tried a few different ways (including calendarName_{Music}, data-calendar-name=“Music”), but none worked, so it seems I’m doing something incorrectly. A little help, please?

[MMRIZE]

@almightyyoshi

/* To remove all the borders from all the events */
.CX3 .event {
  border:  none;
}

/* To remove all the borders from the events of specific calendar */
.CX3 .event.calendar_YOURCALENDARNAME {
  border: none;
}

REMARK

• You’d better assign a name of calendar with safe characters (without whitespace, special characters or emoji, …)
• You might have wanted to remove background, not the border itself. Anyway you asked how to remove the border, so I answered.

[luisestrada]

@sdetweil said in MMM-CalendarExt3:

@luisestrada there is another setting to broadcast past events too ( not by default)

Which one is that?

[MMRIZE]

@luisestrada

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

@MMRIZE said in MMM-CalendarExt3:

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.