MMM-CalendarEXT2 - Change Icon Size

Apartment_Moose

Hi,

Having some trouble getting the right code in my custom.css for changing icon sizes for this particular module only. any help would be great as i would like to increase the icon size by roughly +15% or so.

Thanks

@Apartment_Moose
It depends on font-size of event basically.
See this;
https://github.com/eouia/MMM-CalendarExt2/wiki/4.-Styling#some-default-sizes

.CX2 { /* default values which are used frequently or dependently */
  --row-min-width: 100px;
  --row-max-width: 1000px;
  --column-min-width: 300px;
  --column-max-width: 400px;
  --font-size: 16px;
}

Adjust --font-size as your wish.

Of course, you can forcibly set eventIcon on CSS also.
By default it is defined like this. (MMM-CalendarExt2.css)

.CX2 .period .eventIcon {
  min-width: calc(var(--font-size) * 2);
  min-height: calc(var(--font-size) * 2);
  margin-right:5px;
  float:left;
}

.CX2 .weekSlot .eventIcon {
  min-width: var(--font-size);
  min-height: var(--font-size);
  margin-right:3px;
  display:block;
  padding-bottom:3px;
}

So you can redefine/override them in your css/custom.css. But for harmony with text, I recommend you to use --font-size globally.

Apartment_Moose

@Sean
thanks for the help, i didnt realize icon size was set by --font-size as well, i will take your advice and run with adjusting the font globally for the module.

thanks alot!

SOLVED MMM-CalendarEXT2 - Change Icon Size