ok i'm stumped #124
Replies: 14 comments 24 replies
-
|
Show me front-dev console log(Ctrl+Shif+i maybe) |
Beta Was this translation helpful? Give feedback.
-
|
i assume this could be a part of the problem
|
Beta Was this translation helpful? Give feedback.
-
|
What is your MM version? And Chromium/Electron version? |
Beta Was this translation helpful? Give feedback.
-
|
so MM v2.22.0 and if you're going to say update either of those, then i'll need a little guidance to not mess the whole thing up please :-) |
Beta Was this translation helpful? Give feedback.
-
|
Chromium 116 you said may be your desktop browser, not related to MM's Electron. Your MM 2.22 is using individual Chromium 108. |
Beta Was this translation helpful? Give feedback.
-
|
so if i update MM (whats the latest version right now) it will automatically update chromium to 110? do you think that might be my issue? and thanks for the attention to this. i'm pretty stubborn and very frustrated i can't figure this out. |
Beta Was this translation helpful? Give feedback.
-
|
Latest MM 2.25 is using Electron 26 which has Chromium 116. So it will work I think. |
Beta Was this translation helpful? Give feedback.
-
|
awesome, i'm backing up my MM folders right now and then will try the upgrade |
Beta Was this translation helpful? Give feedback.
-
|
ok, upgraded to 2.25 and this sparked a while new issue. Now MM isn't even starting and i get this error in the terminal after i run npm start
[24.12.2023 19:27.26.394] [LOG] Starting MagicMirror: v2.25.0
|
Beta Was this translation helpful? Give feedback.
-
|
ok so i removed the module which was giving me the problem now i have another couple of issues i cant remove the week numbers (CW 50) so the best i could do was remove the "CW " and make it invisible. i tried the code in custom css but it didnt change anything .CX3 .cw { i can change the background, i can change the broder color around today but i cant change any other colors. i'm using 3 calendars and wanted them to have individual colors like i have in other calendar modules but it's not working, i have the colors established in the calendar module in the config.js and also tried adding the color values to this module in the config...but nothing then i tried changing any entries that said "Chloe work" to red using the following the custom css and nothing eventTransformer: (event) => { sorry to be a bother, but i really like the module and am trying to make it work
|
Beta Was this translation helpful? Give feedback.
-
|
and where are you establishing color values like "crimson" and "dodgerblue"? |
Beta Was this translation helpful? Give feedback.
-
|
looking back at the calendar it seems like it is changing the background only for all day events. not sure if that helps |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for late reply. It was holidays. :D
<div class="cell today thisMonth thisYear year_2023 month_12 date_26 weekday_2" data-date="1703545200000" data-events="0" data-has-events="false" id="1703545200000_1703606470290" data-popoverble="true"><div class="cellHeader"><div class="cw">52</div><div class="cellDate"><span class="dateParts month seq_0">Dec</span><span class="dateParts literal seq_1"> </span><span class="dateParts day seq_2">26</span></div></div><div class="cellBody"></div><div class="cellFooter"></div></div>So you can select the cell of today like this; .CX3 .cell.today {
border: 1px solid #fff;
background-color: gray;
}
https://github.com/MMRIZE/MMM-CalendarExt3?tab=readme-ov-file#styling-with-css
It's weird. The color you assigned in your default calendar module(or whichever calendar event provider module), it should be applied in this module. {
module: "calendar",
header: "US Holidays",
position: "top_left",
config: {
calendars: [
{
name: "US Holidays",
symbol: "calendar-check",
color: "green",
url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
}
]
}
},
{
module: "MMM-CalendarExt3",
position: "bottom_bar",
title: "my calendars",
config: {
mode: "month",
displayLegend: true,
eventTransformer: (event) => {
if (event.title.includes("Day")) event.color = "red"; // Originally it was "green"
return event;
}
}
}
},
.CX3 .weekend {
color: crimson;
font-weight: bold;
}
.CX3 .weekend_2 {
color: crimson;
}
.CX3 .weekend_1 {
color: dodgerblue;
}You can override them in your
By default, /* In your custom.css */
.CX3 .event .headline .title {
color: var(--calendarColor);
}
|
Beta Was this translation helpful? Give feedback.
-
|
happy holidays, glad you stepped away. thanks again for your attention to this trying to pick these apart one by one **i started with a "clean" config.js and completely removed the custom CSS the symbols (which i had removed) are reflecting proper color and also are reflecting the event transformer arghhh!! i feel like its so close here is the "clean" config.js file /* MagicMirror² Config Sample
{ } }; /*************** DO NOT EDIT THE LINE BELOW ***************/ |
Beta Was this translation helpful? Give feedback.
-
|
So... all your issues are solved now? |
Beta Was this translation helpful? Give feedback.
-
|
i wish ;-) so actually none of them are solved
i dont mean to be a pain in the butt, but thanks for all of your help with this |
Beta Was this translation helpful? Give feedback.
-
|
body { .clock .time { .clock .date { .MMM-WOTD header { font-size: 20px; eventTransformer: (ev) => { .MMM-WOTD { } .MMM-History .header { .MMM-History { .CX3 { } .CX3 .event .headline.useSymbol .symbol { .CX3 .cw { .CX3 .cw::before { .CX3 .weekend { .CX3 .cell.today { .CX3 .thisMonth { .MMM-Dad-Jokes { } |
Beta Was this translation helpful? Give feedback.
-
|
First, your
/* custom.css */
.CX3 .cellContainer .cell:nth-child(1) .cw {
display: none;
}I forgot I had revealed CW on the first cell of the weekdays. I think this will work.
To decorate the event, there are two dynamic magic values, /* custom.css */
.CX3 .event.singleday .headline .title {
color: var(--calendarColor);
}
And you don't have to use
https://developer.mozilla.org/en-US/docs/Web/CSS/named-color Of course, you can use HEX colour instead named colour value like
To prevent that kind of mistake, I prepared By default; .CX3 .event.fullday,
.CX3 .event.multiday {
background-color: var(--calendarColor); /* Color by config or eventTransformer */
color: var(--oppositeColor); /* Auto calculated color by --calendarColor */
...
}.CX3 .event { /* singleday event */
color: var(--defaultcolor);
...
}So try my answer No.3. |
Beta Was this translation helpful? Give feedback.
-
|
holy crap! i think you fixed everything. yes, it works when i put in the config and not the custom css how would i change it to instead of changing the color of the text i wanted to give it a background color (like the full and multi-day events) and give the text the opposite color. I've been trying to figure out the wording but nothing is working |
Beta Was this translation helpful? Give feedback.
-
/* config.js */
eventTransformer: (ev) => {
if (ev.title.includes('Chloe work')) ev.class = "chloe"
return ev
},/* custom.css*/
.CX3 .event.chloe {
background-color: var(--calendarColor);
color: var(--oppositeColor);
border-radius: 4px;
}
.CX3 .event.singleday.chloe .headline .title {
color: var(--oppositeColor);
}
.CX3 .event.singleday.chloe .headline.useSymbol .symbol {
color: var(--oppositeColor);
} |
Beta Was this translation helpful? Give feedback.
-
|
And displaying end time is possible, but usually there is not enough space in the cell.(unless you are using 4k display) |
Beta Was this translation helpful? Give feedback.
-
|
so you turned chloe into a preset and assigned it where necessary...thats brilliant!! last one, if i did want to include the end time, what would that look like? |
Beta Was this translation helpful? Give feedback.
-
.CX3 .event.singleday.chloe .headline .time.endTime {
display: inherit;
order: 4;
margin-left: auto;
}W: 1080px; W: 1920px; |
Beta Was this translation helpful? Give feedback.
-
|
This is really amazing and definitely a learning experience. Thanks so much for all of your help and especially all of your patience. I "think" I have all of my issues addressed but i'll reach out again if any other questions pop up You were an incredible help and I can't thank you enough |
Beta Was this translation helpful? Give feedback.
-
|
ok , a couple more quick ones. and i had asked about abbreviating any times from 9:00 to just 9 in another thread and what you suggested didnt work |
Beta Was this translation helpful? Give feedback.
-
|
When you want to hide symbol of a specific calendar .CX3 .event.CUSTOMCLASS .headline.useSymbol .symbol { /* Replace "CUSTOMCLASS" to yours */
display: none;
} |
Beta Was this translation helpful? Give feedback.
-
|
so in my config i have this and then in my custom css i have this .CX3 .event.ellen-calendar .headline.useSymbol .symbol { /* Replace "CUSTOMCLASS" to yours */ unfortunately it didnt do anything |
Beta Was this translation helpful? Give feedback.
-
|
That seems |
Beta Was this translation helpful? Give feedback.
-
|
sorry, is this right? still doesnt seem to be working }, |
Beta Was this translation helpful? Give feedback.
-
|
This module doesn't have |
Beta Was this translation helpful? Give feedback.
-
|
im sorry, then i dont understand where to put it |
Beta Was this translation helpful? Give feedback.
-
|
MMM-CalendarExt3 does not have a To hide symbols for a specific calendar, use config.js (inside MMM-CalendarExt3 config): eventTransformer: (event) => {
if (event.calendarName === "ellen") event.class = "ellen-calendar"
return event
},css/custom.css: .CX3 .event.ellen-calendar .headline.useSymbol .symbol {
display: none;
} |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
MMM-CalenderExt3
i feel like i tried everything before i came on here and asked for help. I followed the install (not upgrade) instructions, pretty straightforward and when i ran the magic mirror i just get a very small DECEMBER at the bottom of the screen, with a line underneath it and thats it. no calendars, no errors, no nothing.
i have a bunch of other modules running fine, but to be sure, i went back and used a completely clean config.js file and got the same thing. i tried using the sample config file included in the packet and still nothing. i even got a fresh calendar.js in case i tweaked something at some point.
like i said, followed the instructions exactly.
just looking for some ideas and where to start looking. or maybe someone has come across the same issue?
thanks in advance
-M
Beta Was this translation helpful? Give feedback.
All reactions