Good catch. Thank you. This fixed the problem. The only format above that works and changes the color of the text is:

.CX2 .event.fred {
color:#F00;
}

Hello,

I think I have tried all the working solutions on here to color code events by calendar type. I have failed at all of them. I am using the Upcoming view. Any help is appreciated.

Here is a section of my config/config.js

calendars : [
  {
    name: "Fred",
    icon: "maki:bicycle-11",
    url: "https://calendar.google.com/calendar/ical/[snip]/public/basic.ics",
    classname: "fred"
  },

I have tried all of these options in css/custom.css and none of them have worked:

This did NOT work

/* style Fred */
.CX2 .fred {
color:#F00;
}

This did NOT work

/* style Fred Upcoming*/
.CX2 .fred.upcoming {
color:#F00;
}

This did NOT work

.CX2 .event.fred {
color:#F00;
}

This did NOT work

transform: (event) => {
if (event.calendarName.search(“Fred”) > -1) {
color:#F00;
},
return event
},

Thanks in advance

Wow. Impressive. Thank you for providing so much detail in your post.

@lavolp3 Believe it or not, I tried. :) Linux load on the Nexus 7" tablet was dropped recently.

@lavolp3 Thanks for the comment. I agree, MM is so much better. I have a feeling that if I used a newer tablet that supported a more modern version of Android, I could find a full-screen browser that supports JavaScript and MM.

[Edit: I updated the Android System WebView app and not MM runs within the Android Fully Kiosk Browser app. Yay!]

So, I love MagicMirror and have the code running on a huge extra monitor in my office. The problem is, I am too cheap to buy a huge piece of two-way glass/plexi to build a proper MagicMirror. I came up with an unorthodox alternative - A super old 7" Android tablet placed behind a piece of two-way plexiglass in an existing frame. Here is what I did:

• Found an old frame that was deep enough to hide an old Nexus 7 WiFi tablet behind
• Order a piece of two-way plexiglass to fit the frame from www.tapplastics.com. My piece was 12"x16"
• Cut a 7.8"x4.5" hole in the back of the frame backing for the Nexus 7 tablet to poke through.
• Spray paint the frame backing gloss black to match the Nexus 7 and make the two blend in better
• Drill a hole in the frame side to insert a Mini-USB charging cable for the Nexus 7
• Attach the Nexus 7 to the frame backing. I am using strong tape at the moment
• Install VMLite VNC Server app for Android just in case I needed remote access to the tablet
• Install the Fully Kiosk Browser app for Android on the Nexus
• Here is where the problems started. It turns out that the Fully Kiosk Browser does not support the JavaScript in our beloved MagicMirror. That made me sad. I could display the clock but not the Dark Sky weather module. I tried a bunch of other full screen browsers but they would not work either. Chrome worked but would not go full-screen.
• My solution was to use the Fully Kiosk Browser with DAkBoard.com instead of MagicMirror. Sad, but it works great.
• Power draw was my second problem. The Nexus 7 will only draw about 380 mA from a 2,100 mA charger. The battery would actually drain while plugged in and the screen on. To fix this, I dropped the system brightness to about 20%. Now the Nexus 7 stays charged.

[For some reason, my inline photo would not display, but you can find it here: https://github.com/DennisFaucher/MagicMirror/blob/master/MagicMirror.jpeg]