Calendar, MMM-CalendarExt3, and MMM-Carousel

[jubbles]

Hello!

New to Magic Mirror, but I have setup a few modules and added some custom css to different modules.

My goal: To create a three-month calendar, that uses MMM-Carousel to rotate between Current Month, (Next) Second Month, and the (Next) Third Month.

I have a Google calendar with events into 2025 loaded into the Calendar module to ensure that there are events that should be loading. Currently, I have only information showing up in the current month and no information for the next two months. I’m beginning to wonder if I also need multiple instances of the calendar module to pair with all three instances of MMM-CalendarExt3?

The second issue I am having I believe is with MMM-Carousel. At the moment, the Current month does not transition and instead is moved up and off screen to where you can see only the last week of the calendar. It’s almost as if the first slide that is setup is not rotating off screen like it should.

I have tried a number of different things, adding the position to the MMM-Carousel config and commenting out the position in the MMM-CalendarExt3 module, I have tried adding multiple instances of the calendar module to hopefully “pair” up with the MMM-CalendarExt3 module, but all attempts have not worked.

I can attach a snippet of my MMM-CalendarExt3 config and the MMM-Carousel config if that will be helpful.

Thank you all for taking a look at this, any and all assistance is much appreciated! Thank you all for all the work you all do for random people on the internet!

[MMRIZE]

@jubbles
To show 3 sequenced month-instances of the CX3 modules;

{
	module: "calendar",
	header: "US Holidays",
	position: "top_left",
	config: {
		maximumEntries: 100,
		maximumNumberOfDays: 365,
		calendars: [
			{
				symbol: "calendar-check",
				url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
			}
		]
	}
},		
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "THISMONTH",
		mode: "month",
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "NEXTMONTH",
		mode: "month",
		monthIndex: 1,
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "NEXTNEXTMONTH",
		mode: "month",
		monthIndex: 2,
	}
},

I don’t use MMM-Carousel, so get a help from others.

[dennisrosenbaum]

Dear @jubbles,

I think a full .config file would help here to investigate.

[jubbles]

@dennisrosenbaum I have the config scrubbed of personal info. Do I need to zip the config file before I upload it? It’s telling me invalid file format when I attempt to upload the .js file for the config. Apologies for the ignorance, first time posting and uploading.

[sdetweil]

@jubbles ugly, but you can paste it here
use a code block

paste text, blank line above and below
select text pasted
hit the button </>

[sdetweil]

@jubbles i posted a reply on discord

[sdetweil]

@MMRIZE

i setup three ext3 instances with mmm-pages, with the proper filter to get events only for each configured month

it did take setting the reference date for each, which exposes a problem.

when this month ends the reference dates will be wrong on all three instances , as its set in config.js

ill post an issue with the configs

edit: this last part is my fault… I accidentally deleted the ‘return true’ after the test…
also i do notice w the ref date for today it shows labor day from the past, if i set the ref date to sept 1
it does not. is this because labor day is in the past events list?, not future from sept 1

[MMRIZE]

@jubbles
To show 3 sequenced month-instances of the CX3 modules;

{
	module: "calendar",
	header: "US Holidays",
	position: "top_left",
	config: {
		maximumEntries: 100,
		maximumNumberOfDays: 365,
		calendars: [
			{
				symbol: "calendar-check",
				url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
			}
		]
	}
},		
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "THISMONTH",
		mode: "month",
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "NEXTMONTH",
		mode: "month",
		monthIndex: 1,
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "NEXTNEXTMONTH",
		mode: "month",
		monthIndex: 2,
	}
},

I don’t use MMM-Carousel, so get a help from others.