MagicMirror² v2.12.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 {
    color:#FFA500;

    (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)?

    Thanks

    Julian


  • Module Developer

    @julian

    1. .CX2 .Family is not working? try this in your css/custom.css
    .CX2 .event.Family {
      color:#FFA500
    }
    

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

    .CX2 .event.Family.fullday {
      background-color:#FFA500;
      color:#000;
    }
    

    Or…
    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 {
      background-image:none;
    }
    


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

    Julian


Log in to reply