MMM-CalendarExt3 Formatting questions

[MMRIZE]

@Studio472

• How can I change the time format? I only see a section to change locale, not specific format.

Generally, the time format depends on its locale. If you want to change the format by force, use eventTimeOptions. Javascript standard object Intl is used. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters

For example;

locale: "en-US",
eventTimeOptions: {hour: "numeric", hour12: true},

will show like this;

locale: "en-US",
eventTimeOptions: {hour: "2-digit", hour12: false},

Under some locales, it will display different format.

locale: "ko-KR",
 eventTimeOptions: {hour: "2-digit", hour12: false},

Or you can handle it with CSS Juggling, For example;

locale: "en-US",
 eventTimeOptions: {timeStyle: "short"},

And append this to your custom.css

.CX3 .event .eventTimeParts.dayPeriod {
  display: none;
}

.CX3 .event .eventTimeParts.hour {
  font-weight: bold;
  color: coral;
}

Then you can get like this;

[MMRIZE]

@Studio472 said in MMM-CalendarExt3 Formatting questions:

Can the colored ‘dot’ or icon be removed?

Add this to your custom.css

.CX3 .event .headline.useSymbol .symbol {
  display: none;
}

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