MMM-CalendarExt3

almightyyoshi

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.

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!

sfb

@MMRIZE I found the discrepancy! It show up in the correct order on Chromium based browsers, however is in the reverse order when viewed on Firefox.

@sfb said in MMM-CalendarExt3:

@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!

MMRIZE

@sfb
interesting symptom.
I suspect some CSS property compatibility issues.(maybe -webkit and -moz diffrence) I’ll look inside at what happens in Firefox. Anyway, MM is supposed to work on Electron in standalone mode, So I regard Chromium as a de facto standard environment of MM.

sfb

@MMRIZE Thanks for looking into it! Totally understandable. I’ve been testing MM serving from a docker container and viewed in various environments, so it’s not a typical setup.

nmacd

I am very new to this so I apologize if this is a dumb question. I love the layout here, but I am having an issue getting the weekly calendar to populate. I have the default calendar and its working, but what I am trying to do is to have my google account show up in the weekly.
Thanks, and again I am sorry if this is simple. Any help would be appreciated.

MMRIZE

@nmacd

mode: 'week',

in the config section of the module would be that.
Could you upload your config here to let me see what you were trying?

nmacd

@MMRIZE
{
module: “calendar”,
position: “top_center”,
config: {
broadcastPastEvents: true, // <= IMPORTANT to see past events
calendars: [
{
url: “https://calendar.google.com/calendar/”,
name: “Calendar”, // <= RECOMMENDED to assign name
color: “red” // <= RECOMMENDED to assign color
},

						]
		}
	},
	{
		module: "MMM-CalendarExt3",
		position: "bottom_center",
		title: "",
		config: {
			mode: "month",
			instanceId: "basicCalendar",
			locale: 'en-US',
			maxEventLines: 5,
			firstDayOfWeek: 1,
			calendars: ['https://calendar.google.com/'] - 
	}
	},
	{

I have my calendar string in there from google I just deleted the identifier.

IMG_7385 (1).jpg

As you can see the calendar event test is showing top center, but is not on the calendar.
I like the current view just would like the calendar to populate.

Also in my config file everything is lined up just didn’t transfer well.

Thanks again for your patience

MMRIZE

@nmacd
I think your google calendar has so many events, so the past old events(years or months ago events) would be also huge numbers. They might consume all the quota of ‘maximumEntries’. Probably that is not the bug of the default calendar module, but also not expected behaviors.
Anyway someone said it would be fixed in 2.21. I wish that upgrade could fix this kind of issue.

Until then, adjust your maximumEvents and maximumNumberOfDays to include recent events to the broadcasted notification.