MMM-CalendarExt3 Formatting questions

[MMRIZE]

@Studio472

Can an event span 2 rows? dot & time on row 1, name on row 2?

I don’t recommend this.

I don’t like this because it’s ugly and wasting space. And not easy to glance at and hard to recognize events.
So that’s why I have been hiding this.

Anyway, if you really want despite my warning; Append this to your custom.css

.CX3 .eventContainer {
  height: calc(var(--eventheight) * var(--maxeventlines) * 2);
}

.CX3 .cellContainer,
.CX3 .week,
.CX3 .cell {
  height: calc(var(--cellheaderheight) + var(--cellfooterheight) + calc(var(--eventheight) * var(--maxeventlines) * 2));
}

.CX3 .event {
  align-items: flex-start
}

.CX3 .event .headline .title {
  flex-basis: 100%;
}

.CX3 .event .headline {
  flex-wrap: wrap;
}

I dare to say still the original one-line approach is the better, without question;

[Studio472]

@MMRIZE This worked for me, thanks!

[Studio472]

@MMRIZE This did not work for me. However, I was able to find the code in the css file and comment out the style that inserted the icon/symbol.

I don’t have a ‘custom.css’ file. Are you referring to the “MMM-CalendarExt3.css” file?

[sdetweil]

@Studio472 said in MMM-CalendarExt3 Formatting questions:

I don’t have a ‘custom.css’ file. Are

create one

touch ~/MagicMirror/css/custom.css

if you had used my install script, it would have done this for you, see
https://github.com/sdetweil/MagicMirror_scripts

[Studio472]

@MMRIZE I’m not sure the solution, I agree it’s not as pretty, but at least it is informative. Maybe I just need to un-bold my font to make better use of the space.

I am curious how you get the baseball icons in the event title. When I tried changing the icons, very few actually worked.

[Studio472]

@sdetweil Didn’t realize it wasn’t part of the module css. I’m assuming this takes precedence over code in the individual module css files?

custom.css
color: blue

calendarext3.css
color: black

Is the color black or blue?

[Studio472]

@MMRIZE I should have said, ‘2 lines when necessary’. I agree it’s goofy on all events. Another idea is some kind of separator to distinguish 2-line events, make them easier to read.

[sdetweil]

@Studio472 see the doc

https://docs.magicmirror.builders/modules/customcss.html

an entry is

.modulename selector_clause {
     style-settings;
}

so, typically

.MMM-CalendarExt3  ???? {
   color: black;
}

but he doesn’t follow the rules, so his prefix is
.CX3 instead of .MMM-CalendarExt3

I use this for building the selector clause
https://www.w3schools.com/cssref/css_selectors.php

[MMRIZE]

@sdetweil said in MMM-CalendarExt3 Formatting questions:

.CX3 instead of .MMM-CalendarExt3

Of course, .MMM-CalendarExt3 instead of .CX3 would work with the same priority. I just want to type less. :D

.MMM-CalendarExt3 .event .title { ... } /* specificity: 0-3-0 */

and

.CX3 .event .title { ... } /* specificity: 0-3-0 */

both would have the same priority(specificity), so anything would be ok.

[MMRIZE]

@Studio472 said in MMM-CalendarExt3 Formatting questions:

@sdetweil Didn’t realize it wasn’t part of the module css. I’m assuming this takes precedence over code in the individual module css files?

custom.css
color: blue

calendarext3.css
color: black

Is the color black or blue?

blue (while both selectors have the same specificity)

[MMRIZE]

@Studio472 said in MMM-CalendarExt3 Formatting questions:

@MMRIZE This did not work for me. However, I was able to find the code in the css file and comment out the style that inserted the icon/symbol.

I don’t have a ‘custom.css’ file. Are you referring to the “MMM-CalendarExt3.css” file?

By default, when you install MM first, the custom.css doesn’t exist. You have to copy or create one. There is custom.css.sample in css directory. Copy or Rename it.
The Installer script of @sdetweil will do that automatically.