MMM-CalendarExt3Agenda

MMRIZE

@BKeyport
I refactored all the duplicated logics in these modules and separate it with sub module named ‘CX3_Shared’.
That message happens when that submodule is not loaded(with certain reason). Most suspicious thing would be that submodule is not installed properly. Could you check it again?

https://github.com/MMRIZE/MMM-CalendarExt3Agenda#update-to-120

BKeyport

@MMRIZE Oh, doh! you gave in and had to install a dependancy/submodule! 🤣🤣🤣

Missed that.

BKeyport

Doing some clean up work and some things aren’t working.

The module isn’t updating in my config.

Here is the configs and details.

		{
			module: "MMM-CalendarExt3Agenda", // https://github.com/MMRIZE/MMM-CalendarExt3Agenda
			position: "top_left",
			config: {
				instanceId: "1",
				showMiniMonthCalendar: false,
				firstDayOfWeek: 0,
				startDayIndex: 0,
				endDayIndex: 99,
				minimalDaysOfNewYear: 1,
				animationSpeed: 0,
				useSymbol: false,
				useWeather: false,
				calendarSet: ["Main", "Utility"],
                                eventTransformer: (ev) => {
					if (ev.title.search("Bowling") > -1) {
						ev.color = 'yellow';
					}
					return ev
				},
			},
		},
//top_center
		{
			module: "MMM-CalendarExt3Agenda", // https://github.com/MMRIZE/MMM-CalendarExt3Agenda
			position: "top_center",
			config: {
				showMiniMonthCalendar: false,
				instanceId: "2",
				firstDayOfWeek: 0,
				startDayIndex: 0,
				endDayIndex: 99,
				minimalDaysOfNewYear: 1,
				animationSpeed: 0,
				useSymbol: false,
				useWeather: false,
				calendarSet: ["Seahawks", "Sounders", "Bluejays", "Mariners", "Kraken", "Huskies", "XFL", "ARES", "Holdays"],
				eventTransformer: (ev) => {
					if (ev.title.search("⚾") > -1) {
						ev.title = ev.title.replace("⚾","");
					}
					if (ev.title.search("🏈") > -1) {
						ev.title = ev.title.replace("🏈 ","");
					}
					return ev
				},
			},
		},
		{
			module: "MMM-CalendarExt3Agenda", // https://github.com/MMRIZE/MMM-CalendarExt3Agenda
			position: "top_center",
			config: {
				instanceId: "3",
				showMiniMonthCalendar: false,
				firstDayOfWeek: 0,
				startDayIndex: 0,
				endDayIndex: 99,
				minimalDaysOfNewYear: 1,
				animationSpeed: 0,
				useSymbol: false,
				useWeather: false,
				calendarSet: ["IRS"], 
			},
		},

Here’s all the public calendars for testing. My “Main” calendar is a private google calendar.

// First Calendar
// Stand in public calendar to protect private data:
					{ 
						url: "https://calendar.google.com/calendar/ical/brendan.keyport%40gmail.com/public/basic.ics",
						name: "Main",
					},
					{
						url: "https://recollect.a.ssl.fastly.net/api/places/BC71002A-F27F-11E8-B5B7-6853A40EAB6C/services/579/events.en-US.ics?client_id=91264B66-7113-11ED-8C28-2101D6C077E5",
						name: "Utility",
					},
// Second Calendar
					{
						url: "http://cal.events/VReW45.ics",
						name: "Seahawks",
						color: "#69BE28",
					},
					{
						url: "https://calendar.google.com/calendar/ical/3vejg64nfe9hk5odcphufgis14%40group.calendar.google.com/private-ae3d986ef6488a425755baf7198a1c99/basic.ics",
						name: "Sounders",
						color: "#69BE28",
					},
					{
						url: "https://calendar.google.com/calendar/ical/mp4efjqgjiq6hphri5ppkkm66k%40group.calendar.google.com/private-81bfdc024de66a7639ac010dfe56263a/basic.ics",
						name: "Bluejays",
						color: "#E8291C",
					},
					{
						url: "https://calendar.google.com/calendar/ical/fgl0a1o8duc3quq3mpjlcopk50%40group.calendar.google.com/private-c55f9de420fe504de01c18f263d70fa7/basic.ics",
						name: "Mariners",
						color: "#69BE28",
					},
					{
						url: "https://calendar.google.com/calendar/ical/a6fras24hof5ibrk9q1aeg0igg%40group.calendar.google.com/private-147cebc733aab31784e2ab7f18c13cbc/basic.ics",
						name: "Kraken",
						color: "#69BE28",
					},
					{
						url: "https://gohuskies.com/calendar.ashx/calendar.ics?sport_id=3",
						name: "Huskies",
						color: "#69BE28",
					},
					{
						url: "webcal://calendar.google.com/calendar/ical/d2dba52c05b47583471f0eccbdb79938b9b0d5ef7711298f4c3455fe64ae6ffa%40group.calendar.google.com/public/basic.ics",
						name: "XFL",
						color: "#e93b16",
					},
					{
						url: "https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics",
						name: "Holdays",
					},
					{
						url: "https://calendar.google.com/calendar/ical/futpub9jb1fisumog0u68s9pdc%40group.calendar.google.com/public/basic.ics",
						name: "ARES",
						color: "#FF1493",
					},
					
// Third Calendar
					{
						url: "https://calendar.google.com/calendar/ical/ufeoastn72l4rcaact44k3iff3pfcun5%40import.calendar.google.com/public/basic.ics",
						name: "IRS",
					},

MMRIZE

@BKeyport

This is what I’ve got with your config.
Is it different with what you want? Tell/Show me what you expected. (AS-IS and TO-BE)

BKeyport

@MMRIZE It seems to be loading everything now, but it’s not refreshing with the calendar app. If I add an event, it misses it until it refreshes at the top of the hour. This includes events going “live” - (bold).

sdetweil

@BKeyport what is the calendar refresh rate set to ?

BKeyport

@sdetweil

			module: "calendar", // Built in
			position: "top_center",
			config: {
				animationSpeed: 0,
				broadcastEvents: true,
				broadcastPastEvents: true,
				fetchInterval: 30000,
				maximumEntries: 99,
...

sdetweil

@BKeyport said in MMM-CalendarExt3Agenda:

30000

every 30 seconds?

default is 300000 ms, 5 minutes

BKeyport

@sdetweil did I miss a zero there. Damn. Worked fine until this release of MMM-CX3A, tho.

MMRIZE

@BKeyport
I changed that logic also, because, with some certain circumstances, the disharmony of refresh schedules of each individual calendars and notifications might make too many refreshing/flickering. So I have to change the job.

BKeyport

@MMRIZE I see. I need the calendar to update more frequently, which is why I have my animations off normally. More options set. it now works, like it used to.

Thanks!

Studio472

How do I remove the “fade to black” at the bottom of the agenda?

MMRIZE

@Studio472
Append this to your custom.css

.CX3A .agenda::after {
  display: none;
}

BKeyport

@MMRIZE Boy, we did things the hard way…

/* Fade adjustments */
.CX3A .agenda::after {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 6%;
	width: 100%;
	content: '';
	background-image: unset;
}

MM19198

I was able to get MMM-CalendarExt3 working, but I’m struggling with MMM-CalendarExt3Agenda. I cannot figure out what I’m doing wrong. None of the events appear in the MMM-CalendarExt3Agenda module but they do appear in the MMM-CalendarExt3 module. Any help is appreciated.

Google Calendar Config

{
	module: "MMM-GoogleCalendar",
	header: "Family Calendar",
	classes: "calendar-agenda",
	config: {
		calendars: [
			{
				symbol: "calendar-week",
				calendarID: "myemail@gmail.com",
				name: "mycalendar"
			},
		],
		broadcastEvents: true,
		broadcastPstEvents: true,
		maximumEntries: 100
	}
},

MMM-CalendarExt3 Config

{
	module: "MMM-CalendarExt3",
	position: "top_center",
	title: "Family Calendar EXT3",
	config: {
		mode: "month",
		instanceID: "Ext-Calendar-Month",
		calendarSet: ['mycalendar'],
		weeksInView: 3,
		preProcessor: (e) => {
			if (e.start?.dateTime) {
				  e.startDate = new Date(e.start.dateTime).valueOf()
			} else if (e.start?.date) {
				  e.startDate = new Date('${e.start.date}T00:00:00').valueOf()
			}

			if (e.end?.dateTime) {
				  e.endDate = new Date(e.end.dateTime).valueOf()
			} else if (e.end?.date) {
				  e.endDate = new Date('${e.end.date}T00:00:00').valueOf()
			}

			e.title = e.summary
			e.fullDayEvent = (e.start?.date) ? true : false
			return e
		}
	}
},

MMM-CalendarExt3Agenda Config

{
	module: "MMM-CalendarExt3Agenda",
	position: "top_left",
	title: "Something",
	config: {
		instanceId: "Ext3-Calendar-Agenda",
		calendarSet: ['mycalendar'],
		firstDayOfWeek: 1,
		startDayIndex: -1,
		endDayIndex: 10,
		showMiniMonthCalendar: false,
		preProcessor: (e) => {
			if (e.start?.dateTime) {
				  e.startDate = new Date(e.start.dateTime).valueOf()
			} else if (e.start?.date) {
				  e.startDate = new Date('${e.start.date}T00:00:00').valueOf()
			}

			if (e.end?.dateTime) {
				  e.endDate = new Date(e.end.dateTime).valueOf()
			} else if (e.end?.date) {
				  e.endDate = new Date('${e.end.date}T00:00:00').valueOf()
			}

			e.title = e.summary
			e.fullDayEvent = (e.start?.date) ? true : false
			return e
		}
	}
},

MM19198

I was able to get it working. For those that may need to resolve this in the future, the answer was at this link:

https://github.com/MMRIZE/MMM-CalendarExt3Agenda#update-to-120

When some submodule is not updated, try this.

cd ~/MagicMirror/modules/MMM-CalendarExt3Agenda
git submodule update --init --recursive

danidanial

I was able to get it working. For those that may need to resolve this in the future, the answer was at this link: :backhand_index_pointing_right_light_skin_tone:

https://github.com/MMRIZE/MMM-CalendarExt3Agenda#update-to-120

When some submodule is not updated, try this.

cd ~/MagicMirror/modules/MMM-CalendarExt3Agenda
git submodule update --init --recursive

MarNog

@MMRIZE Thanks for the module! I see your first screenshot and looks like you have multiple calendars using the original MMM-Calendar and MMM-CalendarExt3Agenda modules. What setting do you use to get it working like this? I setup mine, but I cant figure out what do do on the original MMM-Calendar module to display only one specific calendar and another calendar to be displayed using Ext3Agenda module. Also, what is the best way to get hyphens in the column to be between the times when using 2 digits for hours?

Screenshot 2023-07-30 121447.jpg

{
	module: "calendar",
	header: "Cabrillo's Dates and Deadlines",
	position: "bottom_right", //When you want to hide default calendar module, just remove position of calendar module.
	config: {
		maxTitleLength: 50,
		wrapEvents: true,
		tableClass: "small",
		maximumEntries: 13,
		//sliceMultiDayEvents: true,
		calendars: [
			{
			symbol: "calendar-check",
			name: "Cabrillo_Dates_Deadlines", // <-- specify calendar name
			url: "https://calendar.google.com/calendar/ical/c_5a2463022055508fcb5a604f131895484562edb98904940f4efb3fa1c1362e47%40group.calendar.google.com/public/basic.ics",
			},
			{
			// HOW to REMOVE this one from the Calendar Module??
			url: "https://calendar.google.com/calendar/ical/c_jvq8rotabh0rrru2qeo2oec9gc%40group.calendar.google.com/public/basic.ics",
			name: "CTC_Schedule", // <-- specify calendar name
			color: "skyblue", // <-- if you don't want to get color, just remove this line.
			broadcastPastEvents: true, // <-- need to broadcast past events
			maximalNumberOfDays: 30, // <-- how old events would be broadcasted
			maximumEntries: 100, // <-- assign enough number to prevent truncating new events by old events.
			symbol: 'calendar-check', // <-- when you want to display symbol. If you don't want, just set as `symbol:[],`
			}
		]
	}
},



{
  module: "MMM-CalendarExt3Agenda",
  position: "top_left",
  title: "CTC TA Schedule",
  config: {
    instanceId: "CTCCalendar",
    firstDayOfWeek: 1,
    startDayIndex: 0,
    endDayIndex: 2,
    showMiniMonthCalendar: false,
    calendarSet: ['CTC_Schedule'],
    eventFilter: (ev) => {
             if (ev.title.startsWith("OUT")) {
             	return false
             	}
	     return true
	},
  }
},

Thank you

BKeyport

@MarNog Multiple instances of the calendar module. One with position in place for the ones you want to show with the default module, one without a position for the ones you want to display with CX3A.

MMRIZE

@MarNog
Interesting. You might have added some custom CSS, so hard to guess what happened at the moment.
I think the area for time displaying is not so wide enough. Give them more space.

Currently, the hyphen and startTime/endTime condition is defined like this.

/* MMM-CalendarExt3Agenda.css line 187 */
.CX3A .event .time {
  font-size: 75%;
  vertical-align: text-bottom;
}

.CX3A .event .time.notInDay {
  display: none;
}

.CX3A .event .startTime::after {
  content: ' -';
}

.CX3A .event .startTime.notInDay + .endTime.inDay::before {
  content: '- ';
}