MMM-CalendarExt3

[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%;
}

[p1lspeda]

@sdetweil
I could narrow it down to cellWeather but I cannot find any css-styles in the module’s *.css :/
This means I am lost as to where to start testing :(

[sdetweil]

@p1lspeda
they are there…

.CX3 .cellHeader .cellWeather {
  color: white;
  margin: 2px;
  font-size: 100%;
  align-self: center;
}

.CX3 .cellHeader .cellWeather .icon {
  font-size: 100%;
  font-weight: bold;
}

.CX3 .cellHeader .cellWeather .maxTemp {
  color: white;
  font-weight: bold;
  font-size: 90%;
}

.CX3 .cellHeader .cellWeather .minTemp {
  color: darkgray;
  font-weight: normal;
}

.CX3 .cellHeader .cellWeather .temperature {
  display: var(--displayWeatherTemp);
  padding-left: 5px;
  font-size: 90%;
}

.CX3 .cellHeader .cellWeather .maxTemp::before {
  content: " \25b2";
}

.CX3 .cellHeader .cellWeather .minTemp::before {
  content: " \25bc";
}

.CX3 .cellHeader .cellWeather .temperature::after {
  content: "° ";
}

[p1lspeda]

@sdetweil

I am sorry :(
Might need some new glasses after all

[sdetweil]

@p1lspeda sometimes the class references are not standalone

.cellWeather

the selector says when the element (in tree) has ALL these classes… then
if no spaces then if THIS element has ALL these classes

[p1lspeda]

@sdetweil
I managed to figure it out.
Just had to play around with the font-size and now it’s as I like it,
Thanks for your patience.

[sdetweil]

@p1lspeda awesome

did you use the dev window?