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.