MMM-CalendarExt3

[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… :-).