MMM-CalendarExt3

[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