MMM-CalendarExt3

[sdetweil]

@BKeyport you copy/paste from the top right to custom.css
with the selected selector from right of bottom left pane w the modulename class prefix

will post images later, in car now

[sdetweil]

@BKeyport never seen it lie

[p1lspeda]

Thanks folks,
much appreciated that you invest your free-time to help simpletons like me.
My custom.css now includes

.CX3 .cellHeader .cellDate {
        flex-grow: 0;
}

.CX3 .cw::before {
        content: "CW";
        margin-right: 0px;
}

which seems to achieve what I was/am looking for.

[sdetweil]

@BKeyport here is my dev window steps
the background area for the today highlight is smaller than the font size (set with the cx3-… properties)

now w the element selected

can’t copy/paste the selector list bottom,
so copy the element it self

and paste into editor on custom.css

now keep/remove the text to match the bottom selector row

div .cell.today.thisMonth.thisYear.year_2025.month_3.date_25.weekday_2 div.cellHeader div.cellDate

add the module name in front

.CX3 div .cell.today.thisMonth.thisYear.year_2025.month_3.date_25.weekday_2 div.cellHeader div.cellDate {

}

then copy the change in the dev window

and paste into custom.css inside the braces of the thing you just added

.CX3 div .cell.today.thisMonth.thisYear.year_2025.month_3.date_25.weekday_2 div.cellHeader div.cellDate {
 height: 1em;
text-align: left;
}

now. you MIGHT know (or not) that we ONLY need to target the ‘today’ and ‘celldate’ classes , not JUST this ACTUAL date (mar 25)

so we should shorten the selector… so it also works tomorrow

.CX3 div .cell.today div.cellDate {
 height: 1em;
}

every module it different, so it takes some thinking about what you are seeing

[cricket]

Hi - I have struggled with this for the past 24 hours and I cannot figure it. If someone can provide me ELI5 instructions I would appreciate it as CSS is not my strong suit. I am changing things in the custom.css file - perhaps what I want to do cannot be changed there.

I would like to change the width and height of the calendar boxes, regardless of the data in them. I have figured out how to increase font size, but the cell/box size does not grow dynamically as thought it would. Any help appreciated.

.CX3 {
  font-size: 20px;
}

[sdetweil]

@cricket you need to change the – variables he has defined… see the README.md file
https://github.com/MMRIZE/MMM-CalendarExt3?tab=readme-ov-file#styling-with-css

from configuration means

fontSize	'18px'	Default font size of this module.
eventHeight	'22px'	The height of each event.

[cricket]

@sdetweil
Believe me I have and have looked at it at least times, I simply don’t understand how to achieve what I am asking. I have figured out the font size by what I included above. But I don’t understand how change the size of the day cell/box even if it is empty.

[sdetweil]

@cricket so, ‘simple’ way is to add more event lines to the box which will make it taller

maxeventlines: 10 or whatever

maxevents*lineHeight = size of box.
lineHeight = fontsize+4 (in the default config)

all of the important values are configurable in the module config, so you dont have to mess with css for this

[cricket]

@sdetweil said in MMM-CalendarExt3:

@cricket so, ‘simple’ way is to add more event lines to the box which will make it taller

maxeventlines: 10 or whatever

maxevents*lineHeight = size of box.
lineHeight = fontsize+4 (in the default config)

all of the important values are configurable in the module config, so you dont have to mess with css for this

Thank you very much for this - I will give this a go!

[cricket]

@sdetweil
Outstanding - this did exactly what I was looking for. I also a the appreciate the explanation. I am catching on slowly!

[cricket]

@sdetweil

Last thing for me on this - is there a way to move the module down? My screen is portrait and it covers up some top modules. I am trying to move the module down with

.region.middle.center {
        top: 50px;
}

I have experimented with positive and negative numbers with wild results. It pushes the calendar off the screen a the top and only shows about half LOL.

Should I be modifying this in the module section of the config.js file or in the custom.css file as above. With the right commands of course.

[sdetweil]

@cricket awesome!

[sdetweil]

@cricket move,
put it on the bottom instead of center

[cricket]

@sdetweil
Not sure if this is the “right” way but this worked:

.region.middle.center {
        margin-top: 150px;
}

Even a blind squirrel… :-).

[p1lspeda]

Hi folks,
it’s me again with a (probably) simple solution.
After I did a complete fresh install and re-added my custom.css, my Calendar looks a little odd - it triggers my OCD.

I guess I do not need to explain what is bothering me.
Why is the weather info centered on monday ?
How do I get CW, Weather and Current Day in 1 single line ?

This is my current custom.css for MMM-CalendarExt3

.CX3 .cw {
        color: white;
}

.CX3 .weekend_2 {
        color: white;
}

.CX3 .weekend_1 {
        color: white;
}

.CX3 .event {
        border: none;
}

.CX3 .cell {
        border: none;
        background-color: rgba(255,255,255,0);
}

.CX3 .cellHeader .cellDate {
        flex-grow: 0;
}

.CX3 .cw::before {
        content: "CW";
        margin-right: 0px;
}

Ideas/Tips/Hints are much appreciated.
What I do not understand is, that this has changed after I did a fresh install but re-added my backed up custom.css :-/

[sdetweil]

@p1lspeda said in MMM-CalendarExt3:

What I do not understand is, that this has changed after I did a fresh install but re-added my backed up custom.css :-/

did you edit the css in the module folder??
this is WHY you DON’T do that…

[sdetweil]

@p1lspeda first thing is to disable your settings in custom.css and see what the module provides

[p1lspeda]

@sdetweil
not that I can remember as this would mess up things.
Luckily I found a back up my “old” (pre-fresh install) MMM-CalendarExt3.css and my “new” (post-fresh install) MMM-CalendarExt3.css.
And they are a match, so there is no difference.

Any ideas ?

[p1lspeda]

@sdetweil
We are getting there !
The module - without custom.css settings - already triggers my OCD

[sdetweil]

@p1lspeda well, that is ‘today’ style… so thats where I would look…

.CX3 .today .cellDate {
  font-weight: bold;
  background-color: white;
  color: black;
  border-radius: 8px;
  padding: 1px 8px;
  margin: 1px;
  line-height: 100%;
}