@Turtle said in MMM-CalendarExt2:

@Sean said in MMM-CalendarExt2:

@Turtle
I don’t know why, but some nowadays version of MagicMirror has been missing css/custom.css. Just create empty text file and name it as custom.css then save it to your css directory.

@Sean - I thought I could do that but wanted to make sure but before I did that though I was able to find another css file called “MMM-CalendarExt2” in another folder and made some changes to that file which seems to be working. Of course, I made a backup of it just in case but for some reason, that file is acting like custom.css.

Custom.css is the only file that doesn’t get over written when you update MM or Calendar-Ext2. That is why it exists. If you modify main.css then a MM update will wipe out the changes. Same thing is true of CalendarExt2.css.

@Turtle In the CSS folder you should also have a custom.css file (in addition to the main.css file) that was created when you installed MagicMirror.

@JRB1988 I can confirm that 7 calendars works fine. I wonder if you have a syntax issue on the last one in your list. You should be able to look at the log window and see each of the calendars being read and the number of entries that are selected.

@suspect24 Here is how I implemented the transform function.

Background: my daughter plays on a softball team that contains the word “Panic”. I want to change the background color to match the team color and I want to include a softball icon for the event.

I add the following code to the defaultSet section in MMM-CalendarExt2. This means every time the word “Panic” is found in an event title that the commands following are executed.

Note: I have an If…else If structure here so I can actually transform a number of items.

defaultSet: {
						calendar: {
							maxItems: 500,
							scanInterval: 1000*60*1,
							beforeDays: 5,
							afterDays: 60,
							maxIterations: 100,
						},
						view: {
							timeFormat: "h:mm A",
							transform: function(event) {
								if (event.title.search("Panic") > -1) {
								event.icon = "noto-softball";
								event.className = "view_panic";
								} else if (event.title.search("Arin") > -1) {
								event.icon = "noto-softball";
								} else if (event.title.search("Violin") > -1) {
								event.icon = "emojione-monotone:violin";
								}
								return event;
							},							
						},
						scene: {}
				},

Now that I have assigned a className object to the events that contain the word “Panic” I can use that object in the custom. css file.

.CX2 .event.view_panic {
	background-color:rgba(139,0,139,1);
	}

There may be other ways to do this but this one worked out well for me.

@suspect24 There are a couple ways to make the change.

Are you trying to change all the entries from a specific calendar? If you are you want to assign a className to the calendar and then use that className in the custom.css file.

Here is an example:

				calendars: [
					{
						name: "MHS Softball",
						url: "https://calendar.google.com/calendar/ical/example.ics",
						className: "cal_mhs_softball",
					},

Then in the custom.css file you would include the entry to change the background color of the specified className. Like this:

.CX2 .event.cal_mhs_softball {
	background-color:rgba(128,0,0,1);
	}

I have also successfully used the transform function to search the Title of an event for a specific keyword. Once found I assign an event.className to that event. Then in the custom.css file I can change the background color for that specific event className.

@sdetweil good to know. Thanks!

@elaineezhu it looks to me like you may need to use quotes (“) around module name and position instead of apostrophe (‘). I can’t verify this makes a difference because I am not able to test it.

@elaineezhu Make a copy of the config.js.sample file and name the copy config.js. Then you can edit the config.js file as needed.

Hi @Sean
After the syntax corrections you highlighted my MM was working fine. Today I added an entry into one calendar and it did not show up on my MM. I looked at the log and the [CALEXT2] tasks are not showing up to query any calendars.

I went and looked at my mm-out.log file and found some strange messages.

[CALEXT2] calendar:BOPA >> Scanning start with interval:60000
[CALEXT2] calendar:BOPA >> Scanned: 7, Selected: 7
[CALEXT2] calendar:Chris >> Scanning start with interval:60000
[CALEXT2] calendar:Chris >> getaddrinfo EAI_AGAIN calendar.google.com calendar.google.com:443
[CALEXT2] calendar:Kim >> Scanning start with interval:60000
[CALEXT2] calendar:Kim >> getaddrinfo EAI_AGAIN calendar.google.com calendar.google.com:443
[CALEXT2] calendar:BOPA >> Scanning start with interval:60000
[CALEXT2] calendar:BOPA >> Scanned: 7, Selected: 7
[CALEXT2] calendar:BOPA >> Scanning start with interval:60000
[CALEXT2] calendar:BOPA >> Scanned: 7, Selected: 7

It appears that when the getaddrinfo… messages appear that the calendar is no longer accessible to the module and it is no longer scanned. Above I show the message for 2 calendars but eventually every calendar I have programmed gets this error message.

What is happening and is there a way to automatically recover from this error?

Note: it looks like this may be a Google issue but I am wondering if there is a way to elegantly handle the error or get a notification that an error occurred? It also happened to different calendars at different times so I don’t think it was an issue with my network.

Edit: further inspection this may be a local network issue. Would still like to know if there is a way to recover from these errors.

@Sean No, it’s fine. I just didn’t notice the syntax difference when I created the default section.

Thanks again for your help.

@Sean That did the trick. You used Calendars (with an S) for the main code section but the default section only used calendar (without the s). I didn’t notice the syntax difference. Thanks for the help.

@Sean I think I have it figured out now. If looks like putting the calendar scanInterval in the default section (look at the code I posted above) doesn’t apply it to all the calendars. Instead it looks like they are using a default value of 30 minutes. Does that make sense?

@Sean where is this log file located? I will take a look at it and see what I can find.

@Sean I understand that they are not synced. I can run a test where I set both values to 1 minute (each). I can then make a change in my calendar then come back to the MM 10 minutes later and nothing has changed.

Last night I added an item to my calendar and waited for a couple of hours and it never appeared. Today it is added to the MM calendar. It is like it finally refreshed at midnight when it had to adjust the days.

I am now left wondering if the scanInterval in the default section is actually only used at startup and at midnight.

Edit: I added the scanInterval into the section for a specific calendar and it solved the problem. It looks like when the scanInterval is in the default section that it must not be applied to each calendar. The result is that each calendar is only scanned once per day (or so it seems).

@Sean I have the rotateInterval set to 0 and the updateInterval set to (5 minutes).

I will post my code below but I will need to removed the URL to my calendars.

		{	/*MMM-CalendardExt2*/
			module: 'MMM-CalendarExt2',
			config: {
				rotateInterval: 0,	//rotate between scenes default = 60*1000; 0 disables
				updateInterval: 5*60*1000,	//If not auto-rotated
				firstDrawingDelay: 10*1000,	//delay to allow calendar parsing
				locale: "en",
				defaultSet: {
						calendars: {
							maxItems: 500,
							scanInterval: 1000*60*5,
							beforeDays: 5,
							afterDays: 60,
							maxIterations: 100,
						},
						view: {
							timeFormat: "h:mm A",
							transform: function(event) {
								if (event.title.search("Panic") > -1) {
								event.icon = "noto-softball";
								event.className = "view_panic";
								} else if (event.title.search("Arin") > -1) {
								event.icon = "noto-softball";
								} else if (event.title.search("Violin") > -1) {
								event.icon = "emojione-monotone:violin";
								}
								return event;
							},							
						},
						scene: {}
				},
				calendars: [
					{
						name: "Chris",
						url: "https://calendar.google.com/calendar/ical...basic.ics",
						className: "cal_chris",
					},
					{
						name: "Kim",
						url: "https://calendar.google.com/calendar/ical...basic.ics",
						icon: "twemoji-medical-symbol",
						className: "cal_kim",
					},
					{
						name: "Lauren",
						url: "https://calendar.google.com/calendar/ical...basic.ics",
						className: "cal_lauren",
					},
					{
						name: "Ryan",
						url: "https://calendar.google.com/calendar/ical...basic.ics",
						className: "cal_ryan",
					},
					{
						name: "MHS Softball",
						url: "https://calendar.google.com/calendar/ical/...basic.ics",
						icon: "noto:softball",
						className: "cal_mhs_softball",
					},
					{
						name: "Softball Badgers",
						url: "https://calendar.google.com/calendar/ical/...basic.ics",
						icon: "noto-badger",
						className: "cal_badgersoftball",
					},
					{
						name: "BOPA",
						url: "https://calendar.google.com/calendar/ical...basic.ics",
						icon: "emojione-musical-score",
						className: "cal_bopa",
					},
				],
				views:[
					{
						name: "View_Daily",
						mode: "daily",
						position: "top_left",
						calendars: ["Chris","Kim","Lauren","Ryan","MHS Softball","Softball Badgers","BOPA"],
						hideOverflow: false,
						filterPassedEvent: false,
						slotCount: 2,
						maxItems: 500,
					},
					{
						name: "View_Upcoming",
						mode: "upcoming",
						slotTitle: "UPCOMING",
						position: "top_center",
						maxItems:10,
						maxDays: 3,
						hideOverflow: false,
						filterPassedEvent: true,
						calendars: ["Chris","Kim","Lauren","Ryan","MHS Softball","Softball Badgers","BOPA"],
						className: "views_upcoming",
					},
					{
						name: "View_5D_Overview",
						title: "CALENDAR",
						mode: "daily",
						type: "row",
						position: "bottom_bar",
						maxItems: 500,
						slotCount: 5,
						hideOverflow: false,
						filterPassedEvent: false,
						calendars: ["Chris","Kim","Lauren","Ryan","MHS Softball","Softball Badgers","BOPA"],
					},
				],
				scenes:[
					{
						name: "DEFAULT",
						views: ["View_Daily","View_5D_Overview"],
						className: "Scene_Default",
					},
				],
			},
		},//end of calendarext2 module
	],

};

Just a general question. I have my calendar pulling from 6-7 different Google calendars. I have the module configured to retrieve the calendar data every 5 minutes. I did this to allow changes made to an entry to be updated pretty quickly on my display.

The issue is if I modify a calendar entry in my Google calendar it doesn’t get updated in the MM calendar display. If I stop MM and then restart it then everything will be correct. But leaving it running it doesn’t update with the changes. I have also seen this if I deleted a calendar entry it will remain in my MM calendar on the display.

Here is the code I am using. I put the scan interval for the calendars in the default section.

				locale: "en",
				defaultSet: {
						calendars: {
							maxItems: 500,
							scanInterval: 1000*60*5,
							beforeDays: 5,
							afterDays: 60,
							maxIterations: 100,
						},

@scuppasteve said in MMM-CalendarExt2:

@Sean That worked perfectly . How would you go about making the slot event background not be a black gradient? I just want the whole thing to be transparent.

You can adjust the background color in the CSS file.

Since you already defined the eventName: “CHORES_CAL” you can use it in CSS.

syntax:

background-color: rgba(red, green, blue, alpha);

alpha: 0~1 (0:transparent, 1:opaque)

Try this in your CSS file.

.CX2 .event.CHORES_CAL {
	background-color:rgba(0,0,0,0);
	}

I believe that will make the background transparent for all the events in that eventName class.

@Sean said in MMM-CalendarExt2:

@cskenney said in MMM-CalendarExt2:

I also want to change the background-color and possibly the (font) color.

Sorry for the late reply. At weekends, I rarely am in front of computer.
You can define class in your CSS. then assign it into your transfrom code.

transform: (event) => {  
  if (event.title.search("Recycle") > -1) {
    event.icon = "mdi:recycle"
    event.className = "CLASS_RECYCLE" // in your css/custom.css, define color and bgcolor for this class
  },
  return event
},

I figured that out about an hour ago and was coming back to the forums to revise my post. Thanks for confirming what I did works!

@BKeyport said in MMM-CalendarExt2:

@cskenney Your code almost got it. - had to remove the comma on line 68 there, but it now checks out…

I’m glad it worked for you. I edited the code above to remove the comma in case someone else tries to use it. I originally missed it when I edited your code.

@sdetweil @BKeyport I had the same issue with the arrow function. I did node -v and my system is v10.15.2. I was able to work around the issue by using the older notation like shown below.

FYI - I just revised your code so you can copy and try it.

65:  transform: function(event)  {  
66:	if (event.title.search("Recycle") > -1) {
67:	event.icon = "mdi:recycle";
68: 	}
69: 	return event;
70: },

EDIT - line 68 revised to fix an error