MMM-CalendarExt2

[scuppasteve]

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

[cskenney]

@Sean Similar to the Transform method used to identify a keyword in a title and change the icon (birthday is the example) is there a way to do the same thing (identify a key word) and change the color and background-color for that specific item?

My example would be if the word “Softball” is found in the title of a calendar entry it would transform the icon to a softball icon (already have this figured out). I also want to change the background-color and possibly the (font) color.

[jani.karna]

This post is deleted!

[BKeyport]

@sdetweil - It gets worse.

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

Checking file...  /home/pi/MagicMirror/config/config.js
Line 65 col 46 'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
Line 67 col 63 Missing semicolon.
Line 68 col 34 Expected an identifier and instead saw ','.
Line 68 col 34 Expected an assignment or function call and instead saw an expression.
Line 68 col 35 Missing semicolon.
Line 69 col 45 Missing semicolon.

0|mm     | WARNING! Could not validate config file. Starting with default configuration. Please correct syntax errors at or above this line: /home/pi/MagicMirror/config/config.js:68
0|mm     |                                                              },
0|mm     |                                                               ^
0|mm     | SyntaxError: Unexpected token ,
0|mm     |     at new Script (vm.js:74:7)
0|mm     |     at createScript (vm.js:246:10)
0|mm     |     at Object.runInThisContext (vm.js:298:10)
0|mm     |     at Module._compile (internal/modules/cjs/loader.js:678:28)
0|mm     |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:722:10)
0|mm     |     at Module.load (internal/modules/cjs/loader.js:620:32)
0|mm     |     at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
0|mm     |     at Function.Module._load (internal/modules/cjs/loader.js:551:3)
0|mm     |     at Module.require (internal/modules/cjs/loader.js:658:17)
0|mm     |     at require (internal/modules/cjs/helpers.js:20:18)

[sdetweil]

@BKeyport said in MMM-CalendarExt2:

Please correct syntax errors at or above this line: /home/pi/MagicMirror/config/config.js:68
68: }, < ------- remove THAT trailing comma

Line 65 col 46 ‘arrow function syntax (=>)’ is only available in ES6 (use ‘esversion: 6’).

need node V6, which we should be LONG past.
do a node -v

[cskenney]

@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

[BKeyport]

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

Just don’t seem to do anything yet. Tweaking some more.

Actually, it’s doing exactly what it’s designed to do. It shows the icon for the event. I didn’t expect it to leave the title in place too. That’ll do perfect.

[cskenney]

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

[A Former User]

@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
},

[cskenney]

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

[cskenney]

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

[jani.karna]

@Sean said in MMM-CalendarExt2:

@jani-karna

1. Slightly narrow event’s width is intentional to avoid margin of error on calculation. It is hardcoded. But if you want to modify it by yourself,
   https://github.com/eouia/MMM-CalendarExt2/blob/a5d509ada997034f91e0790ad72e87512cb24c60/CALEXT2_Slot.js#L250

eventDom.style.width = width - 15 + "px"

Change 15 to what you want.

Worked perfectly, thank you!

[jani.karna]

@Sean said in MMM-CalendarExt2:

Can I also shrink the gap between events vertically somehow?

Tell me more exact details? Even a picture will help.

What I mean with gap between events is this:

[A Former User]

@jani-karna

Hmmm… in Original CSS, there was no huge gap. It would be only 2px. I think you probably have modified CSS by yourself, but I don’t know what you changed. Sorry, can’t help you.

[jani.karna]

@Sean said in MMM-CalendarExt2:

Hmmm… in Original CSS, there was no huge gap. It would be only 2px. I think you probably have modified CSS by yourself, but I don’t know what you changed. Sorry, can’t help you.

Thats fine, I’ll figure it out.

In the upcoming calendar, I have location or additional information in the events and their font is too big. Can I somehow make it smaller? Here’s a pic, the last row being the additional information:

[A Former User]

@jani-karna
https://github.com/eouia/MMM-CalendarExt2/wiki/4.-Styling
Each event has eventSub (and its sub-elements eventLocation and eventDescription). By default, agenda(upcoming and current) views would reveal eventSub, so, you can use that CSS selector to specify.

[jani.karna]

@Sean said in MMM-CalendarExt2:

@jani-karna
https://github.com/eouia/MMM-CalendarExt2/wiki/4.-Styling
Each event has eventSub (and its sub-elements eventLocation and eventDescription). By default, agenda(upcoming and current) views would reveal eventSub, so, you can use that CSS selector to specify.

Missed that styling part… :grimacing_face: got it working, thank you again!

[code999]

Hello again. is there a way to scroll the events when there are so many on a single day with displaying the (+x).

Thanks.

[A Former User]

@code999
no. i was tried scrolling in my older CALEXT but too burden to rpi.

[A Former User]

@code999
Instead, you can sort and filter the order of events to be shown.