MMM-CalendarEXT2 - Change Icon Size



  • 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


  • Module Developer

    @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.



  • @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!