MMM-CalendarExt3

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

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.

sfb

@MMRIZE Sorry if this has already been reported: I just installed MMM-CalendarExt3 and it appears to be listing my calendar events (Google Calendar .ics) in reverse order (events on each day are listed from latest to earliest). Not sure what additional information is helpful, but I’m using month view, locale is en-US, using timeFormat: 12, and this is all that’s in my module config:

              {
			module: "MMM-CalendarExt3",
			position: "bottom_center",
			title: "",
			config: {
				mode: "month",
				instanceId: "basicCalendar",
				locale: 'en-US',
				maxEventLines: 5,
				firstDayOfWeek: 1,
				calendarSet: ['work', 'home', 'us-holidays', "leisure"],
			}
		},

Any idea what might be happening? Thank you!