@drwatson Copy the exact same code that @Fozi noted above and put it in the custom.css file.

Below is what I put in my custom.css file.

body {
  margin: 5px;
  position: absolute;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
}

@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.

@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.