Thanks folks,
much appreciated that you invest your free-time to help simpletons like me.
My custom.css now includes
.CX3 .cellHeader .cellDate {
flex-grow: 0;
}
.CX3 .cw::before {
content: "CW";
margin-right: 0px;
}
which seems to achieve what I was/am looking for.
Hi,
CSS is driving my crazy.
As you can see in the above screenshot, today (Tuesday) the top (weather, today’s Date & Month) take up the entire width.
This is fine.
The “problem” was yesterday with the additional “CW13” which led to overlapping.
I was wondering; if I could minimize the padding around the current date (the red area in the screenshot), theoretically the space should be big enough for all info to be next to each other
I tried adjusting the css
.CX3 .today .cellDate {
padding: 1px 8px;
}
but unfortunately, that did not have any effect.
Can somebody point me in the right direction ?
Thanks
@sdetweil Thanks for pointing me in the right direction.
Seems I need to play around with css.
Re: MMM-CalendarExt3
Next (easy) question:
My CX3 module doesn’t have symmetrical borders (left & right), i.e. the left border is smaller than the right border.
I want to maximize the width or at least have symmetrical borders.
Border = distance between module edge and display edge
See the screenshot:
How can I adjust these in my custom.css ?
My custom.css includes
body {
margin: 10px;
position: absolute;
height: calc(100% - 30px);
width: calc(100% - 30px);
}
A hint/clue/idea would be very much appreciated.
Thanks !
@sdetweil
thanks for the help.
Did that - no change.
Same problem and I have no idea where to start an look
Edit: HA ! I decreased the refreshIntervall and it seems as that did the trick - I could have probably just waited 30min (but I’m impatient)
Hi,
I’ve just come across this great module, but I cannot quite get it to work.
My default calendar module shows multiple google-calendar based calendars/entries.
This works fine.
However: CX3 only shows the ‘work’ calendar and I do not know why.
Can anybody point me in the right direction ?
Edit: so I got it working (somehow) but the calendar entries take forever to show up in CX3.
Why is that ?
[2025-02-07 12:31:47.169] [INFO] Calendar-Fetcher: Broadcasting 12 events from https://calendar.google.com/calendar/ical...
[2025-02-07 12:31:47.701] [INFO] Calendar-Fetcher: Broadcasting 27 events from https://calendar.google.com/calendar/ical...
[2025-02-07 12:31:48.719] [INFO] Calendar-Fetcher: Broadcasting 70 events from https://calendar.google.com/calendar/ical...
[2025-02-07 12:31:49.691] [INFO] Calendar-Fetcher: Broadcasting 42 events from https://calendar.google.com/calendar/ical...
[2025-02-07 12:31:50.976] [INFO] Calendar-Fetcher: Broadcasting 36 events from https://calendar.google.com/calendar/ical...
[2025-02-07 12:31:56.453] [INFO] Calendar-Fetcher: Broadcasting 93 events from https://calendar.google.com/calendar/ical...
Thanks
my CX3 config:
{
module: "MMM-CalendarExt3",
position: "bottom_bar",
title: "",
config: {
mode: "week",
weekIndex: "0",
weeksInView: "2",
instanceId: "basicCalendar",
//locale: 'de-DE',
maxEventLines: 8,
firstDayOfWeek: 1,
calendarSet: null,
}
},
my default calendar module config:
{
module: "calendar",
position: "bottom_right",
header: "Calendar",
config: {
broadcastPastEvents: true,
colored: false,
coloredSymbolOnly: false,
maximumEntries: 8,
maxTitleLength: 50,
maximumNumberOfDays: 180,
timeFormat: "relative",
getRelative: 60 * 24,
urgency: 60,
calendars: [
{
url: 'https://calendar.google.com/calendar...',
symbol: 'calendar', // MAINZ 05 CALENDAR
name: 'mainz05',
colour: 'white',
},
{
url: 'https://calendar.google.com/calendar...',
symbol: 'calendar', // MAIN GOOGLE CALENDAR
name: 'personal',
colour: 'white',
},
{
url: 'https://calendar.google.com/calendar...',
symbol: 'calendar', // FORMULA 1 CALENDAR
name: 'f1',
colour: 'white',
},
{
url: 'https://calendar.google.com/calendar...',
symbol: 'calendar', // EB MAINZ
name: 'eb_mainz',
colour: 'white',
},
{
url: 'https://calendar.google.com/calendar...',
symbol: 'calendar', // PRO RUNDE
name: 'pro_runde',
colour: 'white',
},
{
url: 'https://calendar.google.com/calendar...',
symbol: 'calendar', // BUSINESS TRIPS
name: 'work',
colour: 'white',
},
],
},
},
I cannot help you, as I do not have a solution.
BUT: I have the exact same problem
{
module: "MMM-PublicTransportHafas",
position: "top_right",
config: {
stationID: "000405041", // Replace with your stationID!
stationName: "Höfchen/Listmann", // Replace with your station name!
direction: "", // Show only departures heading to this station. (A station ID.)
ignoredLines: [], // Which lines should be ignored? (comma-separated list of line names)
excludedTransportationTypes: [], // Which transportation types should not be shown on the mirror? (comma-separated list of types) possible values: StN for >
timeToStation: 10, // How long do you need to walk to the next Station?
showColoredLineSymbols: true, // Want colored line symbols?
useColorForRealtimeInfo: true, // Want colored real time information (timeToStation, early)?
showTableHeadersAsSymbols: true, // Table Headers as symbols or text?
maxUnreachableDepartures: 0, // How many unreachable departures should be shown?
maxReachableDepartures: 10, // How many reachable departures should be shown?
customLineStyles: "", // Prefix for the name of the custom css file. ex: Leipzig-lines.css (case sensitive)
showOnlyLineNumbers: false // Display only the line number instead of the complete name, i. e. "11" instead of "STR 11"
}
},
{
module: "MMM-PublicTransportHafas",
position: "top_right",
config: {
stationID: "008003816", // Replace with your stationID!
stationName: "Römisches Theater", // Replace with your station name!
direction: "", // Show only departures heading to this station. (A station ID.)
ignoredLines: [], // Which lines should be ignored? (comma-separated list of line names)
excludedTransportationTypes: [], // Which transportation types should not be shown on the mirror? (comma-separated l$
timeToStation: 5, // How long do you need to walk to the next Station?
showColoredLineSymbols: true, // Want colored line symbols?
useColorForRealtimeInfo: true, // Want colored real time information (timeToStation, early)?
showTableHeadersAsSymbols: true, // Table Headers as symbols or text?
maxUnreachableDepartures: 0, // How many unreachable departures should be shown?
maxReachableDepartures: 10, // How many reachable departures should be shown?
customLineStyles: "", // Prefix for the name of the custom css file. ex: Leipzig-lines.css (case sensitiv$
showOnlyLineNumbers: false // Display only the line number instead of the complete name, i. e. "11" instead of$
}
},
@BKeyport
You sir, are great.
Thank you for being so patient.
@BKeyport
Thanks!
Either I am doing something wrong (and cannot see it) or there is still an issue with getting the module fully transparent.
After the update and my custom.css this is what it looks like:
custom.css:
/* MMM-Multimonth */
.MMM-Multimonth .settings {
/* --background-color: transparent; */
--background-dimmed: rgba(255,255,255,0); /* var(--color-background); /* For dimmed (previous/next month in current grid), use the global background color */
--background-weekday: rgba(255,255,255,0); /*var(--color-background); /* For normal days, use global background */
--background-weekend: rgba(255,255,255,0); /*var(--color-background); /* For the days defined as your weekend, change the background to cornflowerblue */
--background-current: Grey; /* for the current day, change the background to yellow */
--background-header: rgba(255,255,255,0); /*var(--color-background); /* for the month and year line, use green background */
--background-weekno: Grey; /* for the week number, use a grey background */
--background-dow: rgba(255,255,255,0); /* var(--color-background); /* For the days of the week, use global background */
--color-weekday: var(--color-text); /* For normal days, use global normal text */
--color-weekend: var(--color-background); /* For the days defined as your weekend, change the text to the background color */
--color-current: var(--color-background); /* for the current day, change the text to the background color */
--color-dimmed: var(--color-text-dimmed); /* For dimmed (previous/next month in current grid), use the global dimmed text color */
--color-header: var(--color-text-bright); /* for the header lines, use the global bright text color */
--color-weekno: var(--color-text-bright); /* for the week numbers, use the global bright text color */
--color-dow: var(--color-text); /* for the days of the week header, use the global text color */
--color-event: Red; /* For events, the color of the underline */
--back-rounding: 8px; /* Set the radius of the background rounded edges. See documentation for border-radius elsewhere */
--alignment: center; /* Adjust the text alignment */
}
as you can see (my background is not black, it’s grey-ish atm).
Thanks for all your help
@BKeyport said in MMM-Multimonth:
rgba(255,255,255,0);
You are a star!
Thanks - I got the rounded edges working.
As for full transparency - we’re not quite there yet.
CSS:
.MMM-Multimonth .settings {
/* --background-color: transparent; */
--background-dimmed: rgba(255,255,255,0); /* var(--color-background); /* For dimmed (previous/next month in current grid), use the global background color */
--background-weekday: rgba(255,255,255,0); /*var(--color-background); /* For normal days, use global background */
--background-weekend: rgba(255,255,255,0); /*var(--color-background); /* For the days defined as your weekend, change the background to cornflowerblue */
--background-current: Grey; /* for the current day, change the background to yellow */
--background-header: rgba(255,255,255,0); /*var(--color-background); /* for the month and year line, use green background */
--background-weekno: Grey; /* for the week number, use a grey background */
--background-dow: rgba(255,255,255,0); /* var(--color-background); /* For the days of the week, use global background */
--color-weekday: var(--color-text); /* For normal days, use global normal text */
--color-weekend: var(--color-background); /* For the days defined as your weekend, change the text to the background color */
--color-current: var(--color-background); /* for the current day, change the text to the background color */
--color-dimmed: var(--color-text-dimmed); /* For dimmed (previous/next month in current grid), use the global dimmed text color */
--color-header: var(--color-text-bright); /* for the header lines, use the global bright text color */
--color-weekno: var(--color-text-bright); /* for the week numbers, use the global bright text color */
--color-dow: var(--color-text); /* for the days of the week header, use the global text color */
--color-event: Red; /* For events, the color of the underline */
--back-rounding: 8px; /* Set the radius of the background rounded edges. See documentation for border-radius elsewhere */
--alignment: center; /* Adjust the text alignment */
}
results in:
Did I oversee something ?
Thanks
