I figured this out - I’m an idiot.
I forgot I added a space after my calendar name under the default calendar module so that the displayLegend option would look a little cleaner formatting wise. I never added that space after my calendar name where EXT3 calls for the calendars you want to display. Once I added that space back in, everything worked.
Thanks again @sdetweil for the quick responses!!!
Its been running for the last ~ 3.5 hours and still no events have displayed on EXT3
@sdetweil I had left it running for a few days after making the change last weekend. I’ll restart it again now and give it ~ 30 min before checking again
I added a couple of ‘blank’ pages in between my pages with content and since doing that, none of my calendar events are displaying on the calEXT3 module.
Previously, I had two pages both with content and it was working fine.
I now have a blank page, content page, blank page again, and the final content page with calEXT3. Since adding those blank pages, the calEXT3 module is empty but all others are reporting ok. The default calendar module is still loading the event stream fine, but nothing makes it to the calendar display. I tried reducing to just a single calendar, no help. I also tried going back to the ‘old’ setup with only 2 pages and it still didnt display anything.
I followed these steps from another post, and it didn’t have an effect either:
https://forum.magicmirror.builders/topic/20189/default-calendar-not-loading-events-after-new-mm-update/10?page=1
cd ~/MagicMirror
# restore calendar.js
git checkout defaultmodules/calendar/calendar.js
git fetch origin pull/4180/head:_fix_304
rm package-lock.json
git switch _fix_304
npm run install-mm
restart MM
Here is my config:
modules: [
{
module: "MMM-pages",
disabled:false,
config: {
timings: {
default: 20000, // rotate every 20 seconds
//2: 30000, // page 2 rotates every 30 seconds
"admin": 30000 // admin hidden page auto-returns after 30 seconds
},
modules: [
["page0"], // class name for page 0
["page1"], // class name for page 1
["page2"], // class name for page 2
["page3"],
],
fixed: ["clock","alert","MMM-GlobalPositioner","MMM-BurnIn","MMM-MySystem"],
hiddenPages: {
"screenSaver": ["screensaver_page"],
"admin": ["admin_page"],
}
}
},
{
module: 'MMM-GoogleMapsTraffic',
classes: "page0",
position: 'middle_center',
header: "Traffic",
disabled: false,
config: {
key: '',
lat: ,
lng: -,
height: '450px',
width: '960px',
styledMapType: "night",
disableDefaultUI: true,
updateInterval: 300000,
backgroundColor: 'hsla(0, 0%, 0%, 0)',
markers: [
{
lat: ,
lng: -,
fillColor: '#9966ff'
}
]
}
},
{
module: "compliments",
classes: "page0",
position: "bottom_bar"
},
{
module: 'MMM-3Day-Forecast',
classes: "page0",
position: 'top_left',
config: {
api_key: '',
lat: ,
lon: -,
units: 'I',
lang: 'en',
interval: 300000
}
},
{
module: "calendar",
disabled:false,
classes: "page2",
//header: "Our Calendar",
position: "top_center",
config: {
coloredSymbol:true,
coloredText:true,
maximumEntries:15,
showLocation:true,
maxTitleLength:50,
maxLocationTitleLength:50,
fontSize:40,
tableClass: "medium",
//wrapEvents:true,
calendars: [
{
name: "Hh ",
color: 'yellow',
fetchInterval: 7 * 24 * 60 * 60 * 1000,
symbol: "calendar-check-o",
url: "webcal:/"
},
],
}
},
{
module: "MMM-MoonPhase",
position: "top_right",
classes: "page0",
config: {
updateInterval: 4320000,
hemisphere: "N",
resolution: "detailed",
basicColor: "white",
title: true,
phase: true,
nextFull: true,
size: 200,
moonAlign: "center",
textAlign: "center",
alpha: 0.7,
riseAndSet: {
display: false,
}
}
},
{
module: "MMM-GlobalPositioner",
config: {
debug: false,
delay: 1000,
maxAttempts: 5,
modules: [
{
name: "MMM-MySystem",
position: { bottom: -30, left: 15 }
},
//add as much modules as you like
]
}
},
{
module: "MMM-MySystem",
position: "bottom_bar",
header: "",
disabled: false,
config: {
showHeader: false,
showCpuUsage: true,
showCpuTemp: true,
showMemory: false,
showDisk: false,
showUptime: true,
showIPeth: false,
showIPwifi: false,
tempUnit: "F",
updateInterval: 10000
}
},
{
module: "MMM-BurnIn",
position: "bottom_bar", // whatever, doesn't render anything
config: {
updateInterval: 15, // in Minutes
invertDuration: 5 // in Seconds
}
},
{
module: "MMM-CalendarExt3",
disabled:false,
//waitFetch:20000,
classes: "page2",
position: "bottom_bar",
title: "",
config: {
mode: "week",
instanceId: "main",
showWeekNumber: false,
waitFetch:5000,
useSymbol: true,
displayLegend: true,
maxEventLines: 12,
useWeather: true,
firstDayOfWeek: 0,
calendarSet: ['', 'Hh'],
}
},
{
module: 'MMM-Screencast',
position: 'bottom_right', // This position is for a hidden <div /> and not the screencast window
config: {
position: 'bottomRight',
castName: 'MagicMirror',
height: 300,
width: 500,
}
},
]
};
@sdetweil This fixed it for me, both calendar event streams are pulling in colors and even across all ‘modes’ of EXT3 now. (month, week, day) and its extending out to all events I can see on the calendar.
Thank you both so much for all of the help on this, my two way glass just arrived so timing couldn’t be better!
Thanks!!!
@KristjanESPERANTO So I really don’t know anything about modifying CSS , I can’t locate a custom.css file . Would that be in /magicmirror/CSS or MagicMirror/modules/MMM-CalendarExt3 folders? And where in those respective files should it be placed - just at the top or bottom?
Sorry, I’m not a programmer by any stretch, just a hobbyist trying to figure it out
@sdetweil Still the same results with the coloredSymbol and coloredText unfortunately
@sdetweil clicking on the event did bring the color in on that new view
It didn’t seem like the coloredSymbol and coloredText had an effect, but not sure if I put them in the right spot? Should I remove the old colored:true, value?
{
module: "calendar",
disabled:false,
coloredSymbol:true,
coloredText:true,
classes: "page0",
header: "XX Calendar'",
position: "top_right",
config: {
colored: true,
calendars: [
{
name: "xx_cal",
color: 'yellow',
fetchInterval: 7 * 24 * 60 * 60 * 1000,
symbol: "calendar-check-o",
url: "https:basic.ics"
module: "calendar",
classes: "page0",
coloredSymbol:true,
coloredText:true,
header: "YY Calendar'",
position: "top_right",
config: {
colored: true,
calendars: [
{
name: "yy_cal",
color: 'green',
fetchInterval: 7 * 24 * 60 * 60 * 1000,
symbol: "calendar-check-o",
url: "webcal:
@sdetweil No change unfortunately. Both event streams load fine and with color, but the calendar still is displaying everything just white, except for one event that did come with color 
@sdetweil with both disabled it did draw both instances with color
Then turning EXT3 back on I’ve got no color on any events again
@sdetweil I’ll keep messing with coloredText, so far everything is staying white when I use that. Here is the errors I’m seeing
@sdetweil I think I might’ve just found its related to the month / week views of Ext3…
This is how I have it now:
{
module: "calendar",
classes: "page0",
header: "What's Poppin'",
position: "top_right",
config: {
colored: true,
calendars: [
{
name: "xx_cal",
color: 'yellow',
fetchInterval: 7 * 24 * 60 * 60 * 1000,
symbol: "calendar-check-o",
url: "basic.ics"
},
{
name: "yy_cal",
color: 'green',
fetchInterval: 7 * 24 * 60 * 60 * 1000,
symbol: "calendar-check-o",
url: "webcal"
},
],
}
},
When I separate them to two instances, this is the code I have:
{
module: "calendar",
classes: "page0",
header: "XX Calendar'",
position: "top_right",
config: {
colored: true,
calendars: [
{
name: "xx_cal",
color: 'yellow',
fetchInterval: 7 * 24 * 60 * 60 * 1000,
symbol: "calendar-check-o",
url: "basic.ics"
},
],
}
},
{
module: "calendar",
classes: "page0",
header: "YY Calendar'",
position: "top_right",
config: {
colored: true,
calendars: [
{
name: "yy_cal",
color: 'green',
fetchInterval: 7 * 24 * 60 * 60 * 1000,
symbol: "calendar-check-o",
url: "webcal"
},
],
}
},
And without the Pages module, I do get both to load
I went to add Pages back in with the two calendar instance configuration and have EXT3 on week mode, the second calendar stream does not load
And still no color on calendar view on the second page
But then if I switch to month mode in EXT3 streams are loading in and some colors work - but there’s still two events (from the XX calendar) that loaded but did not get color applied.
As I’ve been messing with it, sometimes on the first run it will load both calendar streams when its in week mode, but it usually doesn’t load it after it runs once. Sometimes in month mode, it still doesn’t load the second calendar, so its not 100% accurate
@sdetweil Here is the events with the calendar
Remove the calendar sets and then run npm install again? I did see there is an update for my NPM - should i do that update too?
I also just noticed theres an error with CalExt3 when I close MM
I tried adding the waitFetch and updating and no changes on my end. Do you think doing a clean install might be the next best step?
I believe ext3 was one of the first modules I installed when I started everything this weekend. I do remember having some errors so theres a good chance I messed something up. I just ran npm install again and it processed fine, but no changes on the functionality.
Would it make sense to delete out the folder and try downloading / configuring the module again?
@sdetweil
I do have color on the events list - hopefully this is what you were asking for
I would love to have it broken back out into two separate lists, but when I do that and integrate MMM-Pages, it refuses to load the second calendar stream on the events list and also into the calendar. Its like it just refuses to go out and check.
I think its a limitation of the Pages module, I’ve got it setup for the classes configuration. You can call the same module on different pages, but it doesn’t seem like I can call the default calendar module twice on the same page. I haven’t done much research on the Pages issue, thats my next one to tackle.
Interestingly, looking at the CalendarExt3 view today - none of the future events have color applied to them:
Think I got the code block correct this time - thanks for pointing that out to me.
{
module: "MMM-CalendarExt3",
classes: "page1",
position: "bottom_bar",
title: "",
config: {
mode: "week",
instanceId: "main",
showWeekNumber: false,
//useSymbol: true,
//displayLegend: true,
maxEventLines: 10,
//useWeather: true,
firstDayOfWeek: 0,
calendarSet: ['xx_cal', 'yy_cal'],
}
},
@sdetweil Yup here it is, pretty basic. I’ve tried running the default calendar module twice with one calendar in each config, but then the second calendar fails to load once I also add in the pages module. Goal is to show a list of the events on the first page, and then the second page is just the monthly calendar
{
module: "calendar",
classes: "page0",
header: "What's Happening'",
position: "top_right",
config: {
colored: true,
calendars: [
{
name: "xx_cal",
color: 'yellow',
fetchInterval: 7 * 24 * 60 * 60 * 1000,
symbol: "calendar-check-o",
url: "https://calendar/basic.ics"
},
{
name: "yy_cal",
color: 'green',
fetchInterval: 7 * 24 * 60 * 60 * 1000,
symbol: "calendar-check-o",
url: "webcal:xx//"
},
],
}
},
Currently, my CalendarExt3 module is only applying color to events that are within 48 hours. None of the events on the calendar past 48 hours have any coloring applied to them. I took a read through the pinned CSS guide but I’m not sure how to hunt down the sheet / items I need to change to implement this. I didn’t see anything obvious in the readme to edit this either.
Here is what my calendar looks like right now - only Sams Birthday which is today has color applied
And here is an example from Google where all of the events for the month have color applied to them:
