MagicMirror² v2.11.0 is available! For more information about this release, check out this topic.
READ THE CHANGELOG BEFORE UPDATING!

Config for a simple clean montly calendar



  • Re: MMM-CalendarExt2

    Is there a way to format the calendar so it looks like the attached image. This is from a dakboard example but is clean and simple. I’ve tried some configuration of the MMM-calendarext2 but not getting anywhere close. Basically looking to get plain white text, equal sized “day” boxes, and a color chip/button to designate what calendar an event is from.

    Some pointers would be great.

    Imgur



  • @mlcampbe
    Did you ever get a reply? I have been looking for that exact calendar setup.



  • @Plainbroke-0
    Not exactly like it. I made one that looks like this post and I am pretty happy with it.

    https://forum.magicmirror.builders/topic/9601/some-magicmirror-modules-are-really-confusing/6#

    Actually I have changed my setup from the above screenshot. I switched from the “month” view to a “week” view so that I can show the next 7 weeks on my screen. The current week is always the top row and then 6 following weeks afterwards.



  • Hey.
    Is it possible to see your Design? I am searching for a clean Design too.



  • @Clubjack
    Here is what I am currently using.

    Imgur



  • @mlcampbe
    Thank You. I Like it.
    Which Module did you use? CalendarExt or Ext2?
    Possible to get your config?



  • @Clubjack
    On the right-hand side I am using the modules all in the top-right region:
    default clock
    MMM-DarkSkyForecast
    default calendar
    MMM-SimpleLogo (used to display a static image that is my calendar color legend)

    The main calendar is using MMM-CalendarExt2 in the top-right region with 7 different google/icloud calendar URLs defined in the “calendars” section of the module. The rest of the MMM-CalendarExt2 config in the config.js is for the view/scene and I am using this:

    views: [
              { 
                name: "view1",
                mode: "week",
                slotCount: "7",
                maxItems: "1000",
                hideOverflow: false,
                slotMaxHeight: "95px",
                monthFormat: "MMMM YYYY",
                position: "top_left",
                calendars: []
              },
            ],
            scenes: [
              {  
                name: "DEFAULT",
              },
            ],
    

    All of the formatting is done within the custom.css file which is heavily customized like this:

    body {
            background-size: cover;
            margin: 20px; 
            height: calc(100% - 40px);
            width: calc(100% - 40px);
    }
    
    .xsmall {
            font-size: 17px;
    }
    
    .region.top.right {
            width: 23%;
    }
    
    .region.top.left {
            width: 77%;
    }
    
    .calendar .time {
            padding-left: 20px;
            color: #FFF;
            font-weight: normal;
    }
    
    .MMM-DarkSkyForecast .module-content {
            width: unset;
    }
    
    .CX2 {
            --font-size: 14px;
    }
    
    .CX2 .event {
            padding: 0px;
    }
    
    .CX2 .weekSlot .timelineSleeve {
            height: calc(var(--font-size) + 5px);
    }
    
    .CX2 .weeksmark {
            display:none;
    }
    
    .CX2 .event.passed::before {
            background: none;
    }
    
    .CX2 .cellSlot.weekday_6 .slotSubTitle {
            color: #F66;
    }
    
    .CX2 .cellSlot.weekday_7 .slotSubTitle {
            color: #F66;
    }
    
    .CX2 .cellSlot .slotTitle, .CX2 .cellSlot .slotSubTitle, .CX2 .cellSlot .slotAltTitle {
            font-size: 20px;
            color: #FFF;
    }
    
    .CX2 .today .slotHeader {
            background: rgba(64,64,64,0.8);
            color: #000;
    }
    
    .CX2 .today .slotHeader .slotTitle {
            color: #FFF;
    }
    
    .CX2 .today .slotContent {
            background: #eeeeee69;
            #border: 1px solid white;
    }
    
    .CX2 .me, .me.event.fullday {
            border-radius: 5px;
            background-color: #83CCD5;
            color: #000;
    }
    
    .CX2 .wife, .wife.event.fullday {
            border-radius: 5px;
            background-color: #EB738B;
            color: #000;
    }
    
    .CX2 .social, .social.event.fullday {
            border-radius: 5px;
            background-color: #D59C73;
            color: #000;
    }
    
    .CX2 .piano, .piano.event.fullday {
            border-radius: 5px;
            background-color: #B4CC5A;
            color: #000;
    }
    
    .CX2 .birthday, .birthday.event.fullday {
            border-radius: 5px;
            background-color: #F0E68C;
            color: #000;
    }
    
    .CX2 .college, .college.event.fullday {
            border-radius: 5px;
            background-color: #A473AC;
            color: #000;
    }
    
    .CX2 .holiday, .holiday.event.fullday {
            border-radius: 5px;
            background-color: #7B9CCC;
            color: #000;
    
    .CX2 .slot > .slotContent {
            background-image: none;
    }
    
    .CX2 .monthViewTitle {
            text-align: left;
    }
    
    .CX2 .eventTitle {
            font-weight: normal;
    }
    


  • @mlcampbe
    Thank You for that.

    I never worked with custom.css before.
    Is there an tutorial for custom.css, to understand all whats inside?



  • @Clubjack said in Config for a simple clean montly calendar:

    Is there an tutorial for custom.css, to understand all whats inside?

    nothing inside, until you add it…

    it overrides (or adds to) the main.css so you can customize the styles of elements
    never modify the main.css



  • @Clubjack
    In my case it was mostly trial and error. I am not a css guru by any stretch of the imagination. You might want to take a look at https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works which has some tips.


Log in to reply