MMM-CalendarExt3

MMRIZE

All CX3* modules (CalendarExt3, CalendarExt3Agenda, CalendarExt3Timeline) need event provider(e.g. default calendar module or MMM-GoogleCalendar or something similar) as a source of events. (You can hide the module with configuration or CSS)

Configuration itself is very simple.

{
	module: "calendar",
	header: "Fun Holidays",
	position: "top_left",
	config: {
		broadcastPastEvents: true,
		maximumNumberOfDays: 45,
		calendars: [
			{
				fetchInterval: 7 * 24 * 60 * 60 * 1000,
				symbol: "calendar-check",
				url: "https://ics.calendarlabs.com/709/45a0bb64/Fun_Holidays.ics",
				color: "green",
			}
		]
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	header: "My Calendar for 3 weeks",
	config: {
		mode: 'week',
	}
},

It will show;

Everything you need is described in README.md.
But you can get many examples in this thread itself. (Read from first post. :D)

The most important part of the configuration would be these;

mode: week or month.
If you adopt week view, you might need these also ; weekIndex, weeksInView.

All other options are… just options. You can try whatever you want with fun.

Heavy CSS tweek is possible. You can ask me.

Rather, you may need to carefully config your events provider(usually, default calendar module) - most ambiguous accidents happen there.

pastormingle

@MMRIZE So on version ext2 i had 3 calendars that combine my weekly and upcoming together only used different colors to differentiate them. How do i add the additional calendars here? I had google calendar and business outlook calendar.

pastormingle

@pastormingle I added the calendar but it still only shows the one calendar not the addional calendar on the weekly view. here is my configuration.

{
  module: "MMM-CalendarExt3",
  position: "bottom_bar",
  title: "Mikes Calendar",
  config: {
    mode: "week",
    instanceId: "basicCalendar",
   // locale: 'de-DE',
   weekIndex: 0,
    maxEventLines: 5,
    firstDayOfWeek: 1,
    fontSize: "30px",
        //calendarSet: ['us_holiday', 'abfall', 'mytest'],
   calendars: [
      {
        url: "http://outlook.office365.com/owa/calendar/*****f2033a09d6504d21833241fb44dcf8c3c@dxc.com/a53b201c85bf4825a9290ce3ec96a8b2457585490405428856/calendar.ics",
        auth: {
          user: "******",
          pass: "******",
        },
      },
      {
        url:"https://calendar.google.com/calendar/ical/******/private-34995d14cf5ec15efc8bd68f680c508e3/basic.ics",
        auth: {
          user: "*******",
          pass: "C******",
        },
      },
    ],
  },
},

		{
			module: "calendar",
			header: "Upcoming Meetings",
			position: "top_left",
			config: {
				calendars: [
					{
						fetchInterval: 7 * 24 * 60 * 60 * 1000,
						symbol: "calendar-check",
						url: "http://outlook.office365.com/owa/calendar/f2033a0***9d6504d21833241fb44df8c3c@dxc.com/a53b201c85bf4825a92*****b2457585490405428856/calendar.ics",                                                    
                                                                                                                                                                                                         
					}
				]
			}
		},

sdetweil

@pastormingle please, always use code block for config contents

paste into editor
select pasted text
hit code block button
</>

I fixed prior post

MMRIZE

@pastormingle
Just add calendars into your default calendar module, without touching CX3.

MMRIZE

@pastormingle

{
	module: "calendar",
	header: "calendar source",
	position: "top_left", // <-- Remove this line to hide this module.
	config: {
		broadcastPastEvents: true,
		maximumNumberOfDays: 45,
		calendars: [
			{
				symbol: "calendar-check",
				url: "https://ics.calendarlabs.com/709/45a0bb64/Fun_Holidays.ics",
				color: "red",
			},
			{
				symbol: "car-side",
				url: "webcal://sync.roktcalendar.com/webcal/cb99a33a-87e2-47a6-a11a-69f2eb563101",
				color: "orange",
			},
			{
				symbol: "recycle",
				url: "https://www.kriftel.de/kalender/abfallkalender-2023-bezirk-1-3/events.ics",
				color: "green",
			},
		]
	}
},

I just added additional calendars to the default calendar module.
It will show;

pastormingle

@MMRIZE Instead of the month i only one week or 7 days at all time displayed. Once the day has passed it should drop off.

MMRIZE

@pastormingle said in MMM-CalendarExt3:

@MMRIZE Instead of the month i only one week or 7 days at all time displayed. Once the day has passed it should drop off.

weeksInView:1 would one-week view of CX3. But what you really want was days view of CX2, and I have dropped that view from CX3 (Because the new CalendarExt3Agenda will get the role alternately, And I think it is better organized and easy to get info.)

But if you prefer old days view style, just use legacy CX2 instead.

pastormingle

@MMRIZE When i put in for 3 calendar it’s only displaying the one for google1 account.

{
	module: "calendar",
	header: "calendar source",
	position: "top_left", // <-- Remove this line to hide this module.
	config: {
		broadcastPastEvents: true,
		maximumNumberOfDays: 45,
		calendars: [
			{
				symbol: "calendar-check",
				url:"outlook",
				color: "red",
			},
			{
				symbol: "car-side",
				url:"google1",
				color: "orange",
			},
			{
				symbol: "recycle",
				url:"google2",
				color: "green",
			},
		]
	}
},
   {
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	header: "My Calendar for 3 weeks",
	config: {
		mode: 'week',
	}

MMRIZE

@pastormingle
Did you test with my example URL or yours?
I need the real URL of calendar feeds to diagnose. send URLs to my email. (eouia0819@gmail.com)

pastormingle

@MMRIZE should be in your email box… thanks.

MMRIZE

@pastormingle replied. From now on, let’s discuss this with email. I’ll leave the summary here later.

pastormingle

@pastormingle Seems that when i loaded the outlook.ics it takes it about 10 min loaded when add addiational calendars. I have not errors in the log but it just slow to load when you restart if you have other calendars. What could it be? Do you have a fix for this?

MMRIZE

@pastormingle
Is fetching slow? Or is drawing slow? Different reason, different solution.
If fetching is slow; That is not my bad. Adjust interval of fetching calendar in calendar module.
If drawing is slow(after fetched normally); Adjust waitFetch and refreshInterval. This thing is not “FIX”, just “configuration”

However more frequent Fetching would give the ics host server more traffic.
10mins late change, I think it’s sufficiently affordable. Your mirror is not the train time signboard of the station.

pastormingle

@MMRIZE Not sure which is just doesn’t work till after 10 min passes… If i only put the outlook calendar in it’s instentances. where do you abjust the fetch?

whimsicality

@MMRIZE thank you so much for this! I successfully hid the times with the CSS you gave. But when I input the eventtransformer code, it causes NaN:NaN to show before all the events. Do you have any insight?
)

MMRIZE

@whimsicality
Show me what you did.

whimsicality

@MMRIZE
IMG_3610 Large.jpeg

IMG_3611 Large.jpeg

IMG_3609 Large.jpeg

MMRIZE

@whimsicality
Hmmm. Works for me.

Maybe your ev.startDate would not be a valid format. (Are you using default calendar module? Or others? - like MMM-GoogleCalendar or something)
You can check with this code.

eventTransformer: (ev) => {
	if (!ev.isFullday) {
		console.log("Check", ev.title, ev.startDate)
		let t = new Date(ev.startDate)
		let time = (t.getMinutes() == 0) ? String(t.getHours()) : String(t.getHours() + ":" + t.getMinutes())
		ev.title = `<span class="myTime">${time}</span> ${ev.title}`
	}
	return ev
}

It will show additional info in your dev-console.

furry131

Hello Good Sirs,

I have been banging my head against the wall for 2 days on this and cannot get my calendar to show up with any of the dates. I went back and read a few days back and saw the basic set up you did for fun holidays and tried to replicate it with the same code but I get the same results.

I can see my default running on the right side like it is supposed to. But the C3 loads on the bottom but doesn’t give any cells. (see screenshot) Just the header. I deleted the Module and reinstalled same thing. So I am assuming it is something to do with my config.

Any help is appreciated.

 {
			disabled:false,
			module: "calendar",
			header: "Furlong Calendar",
			position: "top_right",
			config: {
				broadcastPastEvents: true, // <= IMPORTANT to see past events
				maximumNumberOfDays: 45,
				calendars: [
					{
						fetchInterval: 7 * 24 * 60 * 60 * 1000,
						symbol: "calendar-check",
						name: 'us_holiday',
						url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
						color: "rgb(235,20,16)", // <= RECOMMENDED to assign color
					},
									{
						name: "Furlong Family",
                                                url: "webcal://p132-caldav.icloud.com/published/2/MTYxOTc4Nzc3MTYxOTc4N0UtCeAoDU9jR_G3F17Eh3VRz9FwPUKI9GaiJPDRlUx9w0xueLmCtnzAAks9h8v7F0TiHM6R7cKBwKH_2PXqGZ0",
                                                //color: "rgb(235,20,16)"
					},
									{
					
						name: "Soccer",
                                                url: "https://api.playmetrics.com/calendar/304/team/111688-1156AA5E.ics",
                                                // color: "rgb(235,20,16)"
					},
					
					
				]
			}
		},
        

{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	header: "My Calendar for 3 weeks",
	config: {
		mode: 'week',
	}
},