@chrisfr1976 said in MMM-CalendarExt3 possible to round the corners?:
@bobbylx
Have you tried to add a border-radius to .CX3 .weekGrid? I don‘t know if that works, but maybe… :)
Worth a shot, but that didn’t do it. Now that I know what wording creates that rounded corner, I’ll just experiment and see what happens. Hah, I’ll get it eventually!
And if this helps, here is my custom.css.
custom.css
body {
background-Image: url("background01.jpg");
background-size: cover;
position: absolute;
margin: 0px;
height: 100%;
width: 100%;
}
header {
border-bottom: none;
}
.wi.dimmed.wi-sunset {
color: orange;
}
.wi.dimmed.wi-sunrise {
color: yellow;
}
.wi-day-sunny {
color: yellow;
}
.wi-day-cloudy {
color: yellow;
}
.wi-rain {
color: grey;
}
.wi-thunderstorm {
color: grey;
}
.wi-snow {
color: white;
}
.wi-fog {
color: white;
}
.wi-night-clear {
color: white;
}
.wi-night-cloudy {
color: grey;
}
.wi-night-showers {
color: blue;
}
.wi-night-rain {
color: blue;
}
.wi-thunderstorm {
color: yelow;
}
.wi-night-snow {
color: white;
}
.wi-night-alt-cloudy-windy {
color: grey;
}
.clock, .weather, .MMM-MoonPhase, .MMM-WeeklySchedule {
display: inline-flex;
margin-right: 25px;
margin-left: 25px;
}
.lessontime {
text-align: right;
white-space: nowrap;
padding-right: 2em;
width: 1ex;
font-size: 27px;
color: white;
}
.lesson{
text-align: left;
font-size: 27px;
color: white;
}
.MMM-CalendarExt3 {
background-color:rgba(255, 255, 255,0.4);
border-radius:20px;
padding: 8px; }
CX3 .cell {
border: 1px solid var(--celllinecolor);
background-color: var(--cellbgcolor);
height: calc(
var(--cellheaderheight) + var(--cellfooterheight) +
calc(var(--eventheight) * var(--maxeventlines))
);
position: relative;
border-radius: 25px; /*adjust as you like it*/
}
.CX3 .weekGrid {
display: grid;
width: 100%;
grid-template-columns: repeat(7, [cell-start] 1fr [cell-end]);
grid-auto-columns: 0fr;
margin-top: 5px; /* ADD THIS*/
}
.CX3 .cw {
display:none;
}
.CX3 .cellContainer .cell:nth-child(1) .cw {
display: none;
}
.CX3 .cw::before {
display: none;
}
.CX3 .event.singleday {
border-left:4px solid var(--calendarColor);
}
.CX3 .event.singleday:not(.useSymbol)::before {
content: '';
}
.CX3 .event.singleday .headline:not(.useSymbol)::before {
display: none;
.CX3 .cell.today {
border: 2px solid #fff; /* default was 1px, so you can change to 2px or whatever */
}
.CX3 .thisMonth {
background-color: rgb(255 255 255 / 10%);
}
@chrisfr1976 Thanks for that. It definitely increased the space between the day name and top of the cells, but the rounded corner didn’t work for me. I’ll keep tweaking that. It probably wouldn’t look like I want, if that applies to each cell. I’m hoping round to just corners of the overall calendar, not each cell, so it matches the background.
Hello all, so I’m looking at making some small customization’s now on my Calendar. I would like to round the corners (the black line) so it matches the rounded corner of the translucent background. Also, how can I add spacing between the name of the weekday and the top edge of the calendar below, not sure if you can see in the screenshot but the Y in each day of the week is touching the bar. I assume this is all done in the custom.css, just would like some guidance on what field to add/change to accomplish this? Thanks in advance.
@sdetweil You sir are correct, that fixed it. I guess I should have read some release notes, haha. Thanks for your help.
Hello all, I’ve got an issue I hope someone can help with. My MagicMirror has been working great for a year or so. I use MMM-Calext3, and have generic holidays and a personal google calendar shown. It has worked without issue.
A few days ago, I was trying to install a module that puts the display to sleep on a schedule and whatnot. In the process, I goofed up my config.js and the mirror would launch but had errors (wrong characters in wrong places type issues). I did not touch any of my calendar entries nore the calendar modules. While troubleshooting why my power/sleep module wasn’t working I saw I was behind on the MM base version, so I updated. I don’t recall updating anything else. I finally just restore the config.js to the working version i copied before I started.
So now, my MM works, CalEXT3 launches, but I’m not getting any events passed from the default calendar. Again, I did not change a single character in the calendar entries, what is below is what was working fine 48 hours ago. Can someone smarter than myself take a look? I did npm start, but is seems to hang up after the System information line. I left it about 10 minutes with no change or additional lines showing up, eventually just had to ctrl-c out of it. I can put the calendar ICS links in a browser and they still work.
let config = {
address: "localhost", // Address to listen on, can be:
// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
// - another specific IPv4/6 to listen on a specific interface
// - "0.0.0.0", "::" to listen on any interface
// Default, when address config is left out or empty, is "localhost"
port: 8080,
basePath: "/", // The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
// you must set the sub path here. basePath must end with a /
ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
// or add a specific IPv4 of 192.168.1.5 :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
useHttps: false, // Support HTTPS or not, default "false" will use HTTP
httpsPrivateKey: "", // HTTPS private key path, only require when useHttps is true
httpsCertificate: "", // HTTPS Certificate path, only require when useHttps is true
language: "en",
locale: "en-US",
logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
timeFormat: 12,
units: "imperial",
modules: [
{
module: "alert",
},
{
disabled: true,
module: "updatenotification",
position: "top_bar"
},
{
module: "clock",
position: "top_bar"
},
{
module: "weather",
position: "top_bar",
config: {
weatherProvider: "openweathermap",
type: "current",
location: "Holly Springs",
locationID: "4471641", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: "cbbb4aab37f038db12caadaece805ecf"
}
},
{
module: "weather",
position: "top_bar",
header: "",
config: {
weatherProvider: "openweathermap",
type: "forecast",
location: "",
locationID: "4471641", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: "cbbb4aab37f038db12caadaece805ecf"
}
},
{
module: "MMM-MoonPhase",
position: "top_bar",
config: {
updateInterval: 43200000,
hemisphere: "N",
resolution: "detailed",
basicColor: "white",
title: true,
phase: true,
size: 155,
moonAlign: "end",
textAlign: "end",
alpha: 0.7,
riseAndSet: {
display: true,
lon: -78.8,
lat: 35.6,
gmtOffset: -5.0
}
}
}, {
module: "MMM-CalendarExt3",
position: "bottom_bar",
title: "",
config: {
mode: "",
weekIndex: 0,
weeksInView: 5,
instanceId: "basicCalendar",
locale: 'en-EN',
maxEventLines: 5,
firstDayOfWeek: 0,
refreshInterval: 120000,
animationSpeed: 0,
useSymbol: false,
useMarquee: false,
fontSize: '25px',
useWeather: true,
displayWeatherTemp: true,
calendarSet: ['family','us_holiday'],
weatherPayload:(payload) => {
if (Array.isArray(payload?.forecastArray)) {
payload.forecastArray = payload.forecastArray.map((f) => {
f.maxTemperature = Math.round(f.maxTemperature * 9 / 5 + 32)
f.minTemperature = Math.round(f.minTemperature * 9 / 5 + 32)
return f
})
}
return payload
},
eventTransformer: (ev) => {
if (ev.title.search('Allie') > -1) ev.color = '#ec4899'
if (ev.title.search('Em','Emily')> -1) ev.color = '#c084fc'
if (ev.title.search('Mom')> -1) ev.color = '#06b6d4'
if (ev.title.search('Dad')> -1) ev.color = '#3b82f6'
return ev
}
}
},
{
module: "calendar",
position: "",
config: {
broadcastPastEvents: true,
calendars: [
{
url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
name: "us_holiday",
color: "red"
}
]
}
},
{
module: "calendar",
position: "",
maximumNumberOfDays: 60,
config: {
animationSpeed: 0,
fetchInterval: 160000,
broadcastPastEvents: true,
useSymbol: false,
calendars: [
{
url: "*******",
name: "family",
color: "yellow",
user: '**',
pass: '**',
method: 'basic'
}
]
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }
pi@raspberrypi:~/MagicMirror/config $ npm start
> magicmirror@2.28.0 start
> DISPLAY="${DISPLAY:=:0}" ./node_modules/.bin/electron js/electron.js
[2024-09-05 18:52:35.091] [LOG] Starting MagicMirror: v2.28.0
[2024-09-05 18:52:35.152] [LOG] Loading config ...
[2024-09-05 18:52:35.159] [LOG] config template file not exists, no envsubst
[2024-09-05 18:52:35.178] [WARN] Invalid module position found for this configuration: {
module: 'calendar',
position: '',
config: { broadcastPastEvents: true, calendars: [ [Object] ] }
}
[2024-09-05 18:52:35.181] [WARN] Invalid module position found for this configuration: {
module: 'calendar',
position: '',
maximumNumberOfDays: 60,
config: {
animationSpeed: 0,
fetchInterval: 160000,
broadcastPastEvents: true,
useSymbol: false,
calendars: [ [Object] ]
}
}
[2024-09-05 18:52:35.184] [LOG] Loading module helpers ...
[2024-09-05 18:52:35.187] [LOG] No helper found for module: alert.
[2024-09-05 18:52:35.189] [LOG] No helper found for module: clock.
[2024-09-05 18:52:35.191] [LOG] No helper found for module: weather.
[2024-09-05 18:52:35.193] [LOG] No helper found for module: weather.
[2024-09-05 18:52:35.241] [LOG] Initializing new module helper ...
[2024-09-05 18:52:35.243] [LOG] Module helper loaded: MMM-MoonPhase
[2024-09-05 18:52:35.244] [LOG] No helper found for module: MMM-CalendarExt3.
[2024-09-05 18:52:35.244] [LOG] All module helpers loaded.
[2024-09-05 18:52:35.264] [LOG] Starting server on port 8080 ...
[2024-09-05 18:52:37.137] [LOG] Server started ...
[2024-09-05 18:52:37.142] [LOG] Connecting socket for: MMM-MoonPhase
[2024-09-05 18:52:37.144] [LOG] Starting module helper: MMM-MoonPhase
[2024-09-05 18:52:37.156] [LOG] Sockets connected & modules started ...
[2024-09-05 18:52:37.681] [LOG] Launching application.
[2024-09-05 18:52:47.741] [INFO] System information:
### SYSTEM: manufacturer: Raspberry Pi Foundation; model: Raspberry Pi 3 Model B Rev 1.2; raspberry: [object Object]; virtual: false
### OS: platform: linux; distro: Raspbian GNU/Linux; release: 11; arch: arm; kernel: 6.1.21-v7+
### VERSIONS: electron: 29.1.6; used node: 20.9.0; installed node: 20.8.0; npm: 10.1.0; pm2: 5.3.1
### OTHER: timeZone: America/New_York; ELECTRON_ENABLE_GPU: undefined
@MMRIZE said in MMM-CalendarExt3:
@bobbylx
To emphasize this month, I added this to the cells of this month..CX3 .thisMonth { background-color: rgb(255 255 255 / 10%); }
rgb(RED GREEN BLUE / TRANSPARENCY);could be what you were searching.
Thanks again, this did it.
@MMRIZE said in MMM-CalendarExt3:
@bobbylx
For today cell border; Append this into yourcss/custom.css/* css/custom.css */ .CX3 .cell.today { border: 2px solid #fff; /* default was 1px, so you can change to 2px or whatever */ } For shadow behind the cell... Could you tell me more details or example?
Thank you, I’ll give that a try.
For the shadow, maybe not the right term, in my screenshot see how the previous days have a light but transparent white color to them. I’d like all the cells to be shaded like that, i can play with the colors, ie white vs gray etc. but I’m just not sure how to add the background color to all cells then make it transparent. That make sense? I know my terms are not correct…
Hello all, so I’ve got MMM-Calendarext3 working just how I want and now working on some personalization. Can anyone advise what to change and where to add some shadow behind the date cells? Kind of like the shadow behind the previous days, I’d like to add some light gray or something to the entire calendar just so it doesn’t get lost in my wallpaper.
Second, anyone know how/where to change the border thickness for the current day?
thanks in advance.
@sdetweil said in MMM-CalendarExt3:
@bobbylx said in MMM-CalendarExt3:
module: "compliments", position: ""must be a valid position if specified…
you can disable a module by adding
disabled: true,after the module: line
you can also comment out the position
// position:“…”this would be how you use the default calendar with Ext3…
it would work, but not be shownbackup, backup, backup…
see my scripts, backup to private repo on github… restore from there
versionable…
3 tiny files… and any keyfiles/token files…
https://github.com/sdetweil/MagicMirror-backup-restore
Thanks, just made that change, found a couple more that needed attention. I also checked my history in this thread, I’ve posted my config before asking other questions so I was able to borrow some lines. Getting close now.
@MMRIZE said in MMM-CalendarExt3:
@bobbylx
CX3* series may not work on MIDORI, sorry. It’s too old browser, doesn’t support advanced modern JavaScript technologies.
I had been using it with Midori until just a few days ago when I decided to reload. It wasn’t fast or always the best, but I’m using a Pi zero W so limited on browsers right now. I’ll be picking up a Pi 3 or 4 soon then I’ll do this all over again.
