MMM-CalendarExt3

[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.

[Selph]

I’m having trouble with setting my locale.

My setup is simple enough and when I try to set the locale to “de-DE” it works but when I try to set it to Icelandic it just defaults to English.

{
        module: "MMM-CalendarExt3",
	position: "bottom_center",
	config: {
		locale: "is-IS"
	}
},

My config.locale is set to "is-IS" and my config.language is set to "is". For the clock module this seems to work.

Any ideas? The is.json in the translation folder is in order and it is also included in the translations.js.

I encounter the same problem in the Agenda version of the calendar.

[MMRIZE]

@Selph
It is not the translation’s problem.
This module (and agenda) depends on its internationalization to Intl internal Javascript object. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl). That is supposed to be a standard method for I18N/L10N in JavaScript world.
But unfortunately, Chromium(Electron of MagicMirror is using it) is known to have a bug in handling Icelandic locale ‘is’ or ‘is-IS’, and not been fixed yet.
https://support.google.com/chrome/thread/26467925/icelandic-locale-formating-wrong?hl=en

Sorry. At this moment, I cannot help about it.

[sdetweil]

@MMRIZE can he use chromium browser instead of electron to work around this issue?

[MMRIZE]

@sdetweil
It’s all Chromium based browser’s issue; chrome, chromium, and even MS edge.

[sdetweil]

@MMRIZE ok, no workaround…

[Selph]

Well that is indeed unfortunate. Thanks for the info, I appreciate it. I guess I’ll try to hardcode the translation values into CalendarExt3.js for now.

[almightyyoshi]

@MMRIZE
Thanks for the help. I actually just had to specify singleday and fullday along with the calendar name, which I’m ashamed I didn’t think of before.