@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-left 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;
}

Like many have commented on here it seems that the updateNotification module will often crash and cause the MM to display a black screen and the logs to show an out of memory error. The suggestion by many has been to disable the updateNotification module. I too had this problem and this week went about looking into what was going on. I found a post that indicated the problem could be due to the module firing off update checks for ALL installed modules simultaneously. That intrigued me to think about if it was possible to use the javascript setTimeout() function to add a delay between each modules update check. In updateNotification’s node_helper.js file I added the setTimeout() around the sg.git.fetch() call with a 60sec delay added for each module to be checked:

                var i = 1;
                simpleGits.forEach(function(sg) {
                      console.log("scheduling update of " + sg.module);
                      setTimeout(function(){
                        var time = new Date();
                        console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + "-->" + sg.module);
                        sg.git.fetch().status(function(err, data) {
.....
                     }, 60000*i);
                     i++;
                });

This did what I expected in that the modules were updated 1 at a time with a 60sec delay between each. However, as I had the debugging statement to print out when the module was scheduled and when it actually fired I noticed something odd.

On the first updateInterval all modules were updated as expected.
On the 2nd updateInterval each modules was updated 2 times.
On the 3rd updateInterval each modules was updated 3 times.
etc …

It appears that there is a bug in the updateNotification module in that it just keeps appending all of the modules to the end of an array and on the updateInterval it checks all rows in the array. So in my case the first update fires off 6 checks at the same time, the 2nd update 12 checks, the 3rd update 18 checks, …, the 20th check 120 checks. I can see how this could easily run into an out of memory condition if there are many modules to checked and all are fired off at the same time especially on a machine such as a pi with limited memory to start with.

As a test I have taken out my setTimeout code and added in a line to clear the contents of the simpleGits array after each update. For example I now have this:

                this.scheduleNextFetch(this.config.updateInterval);
                simpleGits.length = 0;
        },

        scheduleNextFetch: function(delay) {

Has anyone seen this or think this may be the cause of the updateNotification out of memory errors?

It sounds like the pi does not have the desktop running. Did you happen to configure the ~/.config/lxsession/LXDE-pi/autostart and put lines in it? If so then there is a good chance that perhaps this file is taking precedence over the /etc/xdg/lxsession/LXDE-pi/autostart file. If that is the case then the entries to start the desktop may not get executed. Try removing/renaming the ~/.config/lxsession/LXDE-pi/autostart and reboot and see what happens. If you get the desktop GUI that way then you may want to add these lines to the ~/.config/lxsession/LXDE-pi/autostart file:

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
@point-rpi

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

I had this same question and the developer told me that you can add static text via the “title” parameter to the month view but nothing dynamic.

I was able to find a workaround though. In my case all I cared about was the month/year to be displayed above the calendar. Therefore I used the MMM-DateOnly module. In your case I suspect you will have to change the fullscreen_above to something like top_left and then set a width on the MMM-CalendarExt2 itself to make it take up the full screen. Then you can add the default clock (with showDate=false) on the top_left too and add the MMM-DateOnly to the top_right. Might be close to what you want.

Take a look at the thread at https://forum.magicmirror.builders/topic/11001/config-for-a-simple-clean-montly-calendar which was the same question but under a different heading and got more response. I ended up using MMM-CalendarExt2 and custom css. I don’t recall having a problem with the time info not displaying myself though.

I found that the default update interval of the updatenotificaton module to be 10 minutes. That causes MM to check each of the installed modules every 10 minutes to determine if they are updated. While I don’t have usage issues for internet I found that 10 minutes seems way too often than need be. I adjusted mine back to 21600000 ms (6 hours).

By logo do you mean the legend that is below the calendar event details on the right-hand side of the screen? If so then that is using the MMM-SimpleLogo module with the below config and an image that is 294x135 pixels.

{
  module: "MMM-SimpleLogo",
  disabled: false,
  position: "top_right",
  config: {
    position: "right",
    text: "",
    width: "250px"
  }

Note that the width: 250px is used so that it will be centered within the right-hand “column”.

@Clubjack
Here is what I am currently using.

I believe one of these should probably work:

.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;
}

@mr-fliffer
I never resolved the problem either. I went ahead and just used a single module for my purposes.

When I was running MMM–CalendarExt2 as shown in https://forum.magicmirror.builders/topic/11001/config-for-a-simple-clean-montly-calendar?_=1604002766358.

As I recall the current week was always the first row in the calendar and it showed the next 6 weeks below that. I don’t recall for sure that it worked that way but seem to recall it working that way. As you can see in the screenshot Wed the 11th is highlighted and it is in the first row.

I believe one of these should probably work:

.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;
}

@Clubjack
I am not quite sure what you mean by the Event-Bar. Is that the height of a row or title size or what exactly are you talking about? I no longer use the calendar as my needs were only for about 1 years time but might be able to help if you can tell me exactly what part you need to modify.

@Plainbroke-0

Take a look at https://forum.magicmirror.builders/topic/11001/config-for-a-simple-clean-montly-calendar/8 as it has the css and necessary config needed.

By logo do you mean the legend that is below the calendar event details on the right-hand side of the screen? If so then that is using the MMM-SimpleLogo module with the below config and an image that is 294x135 pixels.

{
  module: "MMM-SimpleLogo",
  disabled: false,
  position: "top_right",
  config: {
    position: "right",
    text: "",
    width: "250px"
  }

Note that the width: 250px is used so that it will be centered within the right-hand “column”.

Take a look at the thread at https://forum.magicmirror.builders/topic/11001/config-for-a-simple-clean-montly-calendar which was the same question but under a different heading and got more response. I ended up using MMM-CalendarExt2 and custom css. I don’t recall having a problem with the time info not displaying myself though.

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

@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-left 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;
}

@Clubjack
Here is what I am currently using.