MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Getting to grips with the styling of CalendarExt2

  • @sean,

    Loving the new build - I’m a newbie to MM, and am trying to use it to build an electronic wall calendar - similar to a DAKboard, but with a bit more customisation.

    Two quick questions - (i) I can’t get the class customisation by event (to colour them by calendar for instance) to work for me - not sure where it’s going wrong, as the instructions look straightforward - I’ve defined the class for each calendar in the config.js - classname:“Family”, and then set the colour in the custom.css - .CX2 .Family {

    (ii) how do I make the background of the month calendar transparent to see any image behind it (as per the bottom screen shot above)?



  • Module Developer


    1. .CX2 .Family is not working? try this in your css/custom.css
    .CX2 .event.Family {

    If your event is fullday event, it could be overriden. Use this also.

    .CX2 .event.Family.fullday {

    Possible common pitfalls:

    • Mistypo in your config.js about className
    • common CSS mistypos (forgotten closing brace, missed semicolon, …)
    1. By default, there is gradiently transparent background in each slot cell. If you don’t want it;
    .CX2 .slot > .slotContent {

  • @sean

    Thanks for the quick response. Transparent background now sorted - the calendar works really well with your GooglePhotos module as the background !

    Also finally sorted the other problem out - I hadn’t realised it was case-sensitive: classname doens’t work - but className does !

    Thanks for all your help - this is an awesome module…


Log in to reply