@sdetweil

I didn’t have to give a credit card, I don’t have one either, so it won’t work at all? Is the location option correct? Thanks for the effort and answering the questions

@Sam-0 I read your post but I can’t figure it out. Does the entire option not work or did I make a mistake somewhere?

I can’t get the module to work. I entered the free API key but no data is provided. I suspect a typo or setting that I am not doing correctly. I would appreciate your help with possible working examples. Thank you in advance for your efforts.

config:
            {
                // See 'Configuration options' for more information.
                weatherProvider: 'openweathermap',
                weatherEndpoint: '/onecall',
                apiKey: '57657657576',
                apiVersion: '3.0',
location:'Amsterdam,Netherlands'
                type: 'forecast',
                colored: true,
                fade: false,
                maxNumberOfDays: 3,
                degreeLabel: 'true',
                showWindDirectionAsArrow: 'true',
                decimalSymbol: ','
            }		},

@sdetweil

cd ~/MagicMirror
npm install node-ical@latest

This worked for me too thks.

@Sam-0
I’m a little further along in the problem. It is not specifically included in the MMM-CalendarExt3. I see that the default calendar has not been updated. Only after restarting the Rasperry Pi will the agenda update again.

Does anyone have an idea what this could be or what I can look at?

After updating MMM-CalendarExt3, the data is no longer updated. So I do see the old data, but if I make an adjustment in the agenda that week, you will not see it appear. Not until I restart the Raspberry. Then I see the data. It seems that the automatic update no longer happens.

Does anyone have an idea? I use the Outlook link. Or is there a setting with which I can influence the refresh of the data? If you need any specific information, please let me know.

Thanks for the effort.

@thartley said in MMM-HolidayLights beautiful CSS for a slightly calmer light:

@Sam-0 Thank you for this module and the css code.
I like that the lights are partially covering the information that is already being displayed in the upper area, but the “twinkle” effect lets the information show through when the bulbs go into their dim phase. It is kind of a 3D effect.
I usually struggle with trying to modify css to tweak settings. Your comments/notes in your HolidayTemplate.css file explained things nicely for what the various parts do and how they control parts of the light string.
Using that information, I added a couple more colors (blue and orange) to a copy of the Christmas.css file. With all the examples you provided, I was able to copy code snippets from your other examples and paste them into my Christmas test copy, edit their position numbers, and add two more instances in the “.strand li:nth-child…” section of the css file. One thing that wasn’t notated in your documentation was what color name (ex: blue or red) each section creates, but you did tell us to go to https://www.colorhexa.com/ where we can get the information. From there it’s an easy task to get the color names and add a color name comment for each light in the css file.
I grabbed the code for the blue and orange from your Pride.css file. Blue is light #2, orange is light #5 from that css file.
One last comment - my normal MM setup is pretty basic. I can run my Le Potato with just a heat sink and the CPU temperature stays at 46C. With the Holiday Lights module running, it gets up to 67C so I reinstalled the 10cm fan that came with the case and it’s down to 49C.

Thanks for your comment. To be clear, I am not the creator of this module. But I enjoyed adjusting the colors and sharing this css. What you also indicated and I now see the connection is that my CPU heat also increased. I have installed heat sinks for this.

I share this beautiful CSS for a slightly calmer light.
This is the module:
https://github.com/justjim1220/MMM-HolidayLights.

Show what yours looks like or your adjustments.

/* to modify, follow the commented directions
 * please report any problems or issues, I'm always glad to help! */

.MMM-HolidayLights {
    width: 100%;
    align-self: center;
}
.strand {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	margin: -15px 0 0 0;
	padding: 0;
	pointer-events: none;
}

.strand li {
	position: relative;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	width: 36px;
	height: 75px;
	border-radius: 50%;
	margin: 20px;
	display: inline-block;
	-webkit-animation-name: flash-1;
	animation-name: flash-1;
	-webkit-animation-duration: 1.7s;
	animation-duration: 1.7s;
}



.strand li:nth-child(2n+1) {
	-webkit-animation-name: flash-2;
	animation-name: flash-2;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}

.strand li:nth-child(3n+2){
	-webkit-animation-name: flash-3;
	animation-name: flash-3;
	-webkit-animation-duration: 1.4s;
	animation-duration: 1.4s;
}

.strand li:nth-child(4n+3) {
	-webkit-animation-name: flash-4;
	animation-name: flash-4;
	-webkit-animation-duration: 1.1s;
	animation-duration: 1.1s;
}

.strand li:before {
	content: "";
	position: absolute;
	background: #090;
	width: 32px;
	height: 9.33333px;
	border-radius: 3px;
	top: -6.66667px;
	left: 1px;
}

.strand li:after {
	content: "";
	top: -20px;
	left: 28px;
	position: absolute;
	width: 52px;
	height: 18.66667px;
	border-bottom: solid #090 2px;
	border-radius: 50%;
}

.strand li:last-child:after {
	content: "";
}

/* the following sections are for the flashing animations
* each light has 2 sections with correspong frames, IE: @-webkit-keyframes flash-1 & @keyframes flash-1
* both sections must match in color
* the 0%, 100% section is the light ON, the 50% sction is the light OFF
* the box-shadow lines MUST br in rgba format to get the 50% of the color
* to find the rgb of a hex color code, go here: https://www.colorhexa.com/
* you may find it easier to use rgb format for the background (0%, 100%) color as well
* the rgb format must have 3 numbers IE: rgba(255, 66, 0)
* to get the 50% effect add an a to the rgb and 0.5 at the end of the rgb
* the rgba format must have 4 numbers IE: rgba(255, 66, 0, 0.5)
* this template is set for 6 different colored lights
* to have less, delete or comment out the last one(s)
* IE: to have only 3 lights, remove the fourth, fifth, & sixth sections */

/* color of 1st light in the string */
@-webkit-keyframes flash-1 {
	0%, 100% {
		background: #daa520; /* change color here */
		box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
	}
	50% {
		background: rgba(255, 215, 0); /* change color here */
		box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
	}
}

@keyframes flash-1 {
	0%, 100% {
        background: #daa520; /* change color here */
        box-shadow: 0px 4.66667px 48px 3px #daa5200; /* change color here */
    }
    50% {
        background: rgba(255, 215, 0); /* change color here */
        box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
    }
}

/* color of 2nd light in the string */
@-webkit-keyframes flash-2 {
	0%,	100% {
		background: #daa520; /* change color here */
		box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
	}
	50% {
		background: rgba(255, 215, 0); /* change color here */
		box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0)); /* change color here */
	}
}

@keyframes flash-2 {
	0%, 100% {
        background: #daa520; /* change color here */
        box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
    }
    50% {
        background: rgba(255, 215, 0); /* change color here */
        box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
    }
}

/* color of 3rd light in the string */
@-webkit-keyframes flash-3 {
	0%,	100% {
		background: #daa520; /* change color here */
		box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
	}
	50% {
		background: rgba(255, 215, 0); /* change color here */
		box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
    }
}

@keyframes flash-3 {
	0%, 100% {
        background: #daa520; /* change color here */
        box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
    }
    50% {
        background: rgba(255, 215, 0); /* change color here */
        box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
    }
}

/* color of 4th light in the string */
@-webkit-keyframes flash-4 {
    0%,	100%{
        background: #daa520; /* change color here */
        box-shadow: 0px 4.6667px 48px 3px #daa520; /* change color here */
    }
    50%{
        background: rgba(255, 215, 0); /* change color here */
        box-shadow: 0px 4.66667px 48px 3px (66, 0, 0, 0.5); /* change color here */
    }
}
    
@keyframes flash-4 {
    0%,	100% {
        background: #daa520; /* change color here */
        box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
    }
    50% {
        background: rgba(255, 215, 0); /* change color here */
        box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
    }
}

/* color of 5th light in the string */
@-webkit-keyframes flash-5 {
    0%,	100%{
        background: #daa520; /* change color here */
        box-shadow: 0px 4.6667px 48px 3px #daa520;
    }
    50%{
        background: rgba(255, 215, 0); /* change color here */
        box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
    }
}
    
@keyframes flash-5 {
    0%,	100% {
        background: #daa520; /* change color here */
        box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
    }
    50% {
        background: rgba(255, 215, 0); /* change color here */
        box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
    }
}

/* color of 6th light in the string */
@-webkit-keyframes flash-6 {
    0%,	100%{
        background: #daa520; /* change color here */
        box-shadow: 0px 4.6667px 48px 3px #daa520; /* change color here */
    }
    50%{
        background: rgba(255, 215, 0); /* change color here */
        box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
    }
}
    
@keyframes flash-6 {
    0%,	100% {
        background: #daa520; /* change color here */
        box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
    }
    50% {
        background: rgba(255, 215, 0); /* change color here */
        box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
    }
}

@MMRIZE said in MMM-CalendarExt3 how do you create multiple events with color css?:

First,
You can assign colour or class per each calendar. So check if your events are separated by different calendars. Check it first.

I only have one calendar. I’ve already looked at an example but it doesn’t seem to work.

I found this example on this forum.

with customer.css
.CX3 .Ben {
color: brown;
}

eventTransformer: function(ev) {
  if (ev.title.search(“Ben”) > -1)  ev.className = “Ben”;
  return ev
}

This doesn’t seem to do much, the color just remains white.
But is this possible?

@MMRIZE

I also tested your code and it works fine too.