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

Do you have ANY settings in the custom.css file that are working? In my case I had to explicitly add the line

customCss: “css/custom.css”,

to the config.sh file. Once I did that then items in the file started to take affect. I have not tried absolute values for the width but I have used the following successfully.

.region.top.right {
width: 23%;
}

.region.top.left {
width: 78%;
}

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

Actually I posted this question to the MMM-CalendarExt2 github issues page and a new version was added today to address the problem. He added the ability to display the month and year.

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.

I have had this problem too using the calendar module and it seems to be related to node-ical addition that parses the ical files. See link text to that post which has my solution at the bottom.

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.

Are there any calendar modules out there (other than MMM-calendarext and MMM-calendarext2) which display the full month calendar with events from multiple calendars on it? I’ve tried the above 2 listed modules and they seem overly complicated and not exactly what I am looking for. For example, if I were to use dakboard their calendar looks like the one shown below. Is there anything like this for MM or does anyone have a set of configs to make the above modules look like this?

I’ve solved this problem by replacing the node-ical script that the default calendar modules uses with a fork of it.

I did some research and found that the default calendar module uses the node-ical modules to parse calendar data. I notice that it is based off of https://github.com/peterbraden/ical.js. I also found https://github.com/jens-maus/node-ical that is based off of the original peterbraden/ical.js. but seems to have been updated to use the npm package moment-timezone.

I did a drop in replacement and it seems to work:

cd modules/default/calendar/vendor
mv ical.js ical.js.orig
git clone https://github.com/jens-maus/node-ical
mv node-ical/ ical.js
cd ical.js
npm install

Restarted MM and now my timezones are showing up properly. So I made my own modules out of this so it won’t get overwritten by updates.