@sdetweil Thank you Thank you Thank you!

It’s a small change to the overall look, but it gives me the knowledge to understand how it all works together.

Appreciate the 1:1 support I’m getting from you right now :-D

@sdetweil Any chance of an example of what to put and where if you get time? I’m totally new to CSS and can’t work out what you mean, and searching the forums/google - I can’t work out how to name a parameter in JS that creates html. I’m stumped!

I have had a go, but to be honest, I can’t seem to get much at all to change in the calendar module from custom.css.

Starting with setting the font for the entire calendar block, I tried the following in custom.css:

.calendar {
  text-align: center;
  font-size: 40px;
  font-family: Arial, Helvetica, sans-serif;
}

This just made the items center justified, but changed nothing in the header or any font sizes.

Then I tried this. It’s based on the structure of one of my module’s CSS - which works for that module, but not the built in calendar. Also, nothing changed this time.

.calendar .header {
  text-align: center;
  font-size: 40px;
  font-family: Arial, Helvetica, sans-serif;
}

Then I tried just .header {} to see if that had any impact - which it didn’t.

The calendar header is already a named - if I inspect the elements, I can see this - but this means very little to me.

I’m guessing I need to work out how to give the calendar header a bespoke classname - which I can then use the above syntax to define the display properties?

I did manage to make the calendar header match my desired appearance by modifying main.css - but I know this isn’t ideal, and will probably be lost on updates.

Thanks @sdetweil

What sort of system resources would two instances consume? I’m running on a Pi 4b, that’s also being used as a local web server and weather station. So critical functions - would two instances of MM cause high cpu/memory usage?

I think the time it would take me to learn enough CSS to build responsive pages for my 4/5 devices would exceed my current free time :-D

Cheers again!

Just wondering if it is possible to have a different URL on the local host to load a different config?

i.e. http://192.168.1.101:8080/ points to my default, config, and is loaded on MM dedicated portrait screen.

But, http://192.168.1.101:8080/browser.html points to a different layout optimised for a landscaped screen.

And http://192.168.1.101:8080/ios.html points to a different layout optimised for a phone screen.

I would want them all loading the same modules (ish), but display them differently

@sdetweil Thank you Thank you Thank you!

It’s a small change to the overall look, but it gives me the knowledge to understand how it all works together.

Appreciate the 1:1 support I’m getting from you right now :-D

Hello!

I seem to be getting an intermittent error in the calendar module. It works, colours, iconifies, etc etc 95% of the time.

But occasionally, it shows no entries but shows “Error in the calendar module. Check logs for more details.”

Then a few minutes later, the message will be gone, and the entries back.

(screenshots taken pre and post CSS edits for another post… Ignore change in font size… that’s expected!)

NM2 MM Log …

Could it be an intermittent network connection issue?

0|mm       |     at TLSSocket.socketErrorListener (node:_http_client:442:9)
0|mm       |     at TLSSocket.emit (node:events:526:28)
0|mm       |     at emitErrorNT (node:internal/streams/destroy:157:8)
0|mm       |     at emitErrorCloseNT (node:internal/streams/destroy:122:3)
0|mm       |     at process.processTicksAndRejections (node:internal/process/task_queues:83:21) {
0|mm       |   type: 'system',
0|mm       |   errno: 'EAI_AGAIN',
0|mm       |   code: 'EAI_AGAIN'
0|mm       | }
0|mm       | [02.12.2022 13:13.38.141] [ERROR] Calendar Error. Could not fetch calendar:  https://calendar.google.com/calendar/ical/xxxx.calendar.google.com/public/basic.ics Error: Not Found
0|mm       |     at NodeHelper.checkFetchStatus (/home/pixrdp/MagicMirror/js/node_helper.js:120:9)
0|mm       |     at process.processTicksAndRejections (node:internal/process/task_queues:96:5)
0|mm       | [02.12.2022 13:18.38.845] [ERROR] Calendar Error. Could not fetch calendar:  https://calendar.google.com/calendar/ical/xxxx.calendar.google.com/public/basic.ics Error: Not Found
0|mm       |     at NodeHelper.checkFetchStatus (/home/pixrdp/MagicMirror/js/node_helper.js:120:9)
0|mm       |     at process.processTicksAndRejections (node:internal/process/task_queues:96:5)

@sdetweil Any chance of an example of what to put and where if you get time? I’m totally new to CSS and can’t work out what you mean, and searching the forums/google - I can’t work out how to name a parameter in JS that creates html. I’m stumped!

I have had a go, but to be honest, I can’t seem to get much at all to change in the calendar module from custom.css.

Starting with setting the font for the entire calendar block, I tried the following in custom.css:

.calendar {
  text-align: center;
  font-size: 40px;
  font-family: Arial, Helvetica, sans-serif;
}

This just made the items center justified, but changed nothing in the header or any font sizes.

Then I tried this. It’s based on the structure of one of my module’s CSS - which works for that module, but not the built in calendar. Also, nothing changed this time.

.calendar .header {
  text-align: center;
  font-size: 40px;
  font-family: Arial, Helvetica, sans-serif;
}

Then I tried just .header {} to see if that had any impact - which it didn’t.

The calendar header is already a named - if I inspect the elements, I can see this - but this means very little to me.

I’m guessing I need to work out how to give the calendar header a bespoke classname - which I can then use the above syntax to define the display properties?

I did manage to make the calendar header match my desired appearance by modifying main.css - but I know this isn’t ideal, and will probably be lost on updates.

@sdetweil Thanks, my bad, I saw the post but missed the title. It’s the built-in calendar I want to change the title font for.

I’m building a digital smart calendar with MagicMirror, Raspberry Pi and a spare monitor. It’s going brilliantly, I’ve tweaked loads and solved lots of little issues I had thanks to the community and documentation.

There is one final piece of my jigsaw puzzle that I can’t seem to solve - that is that MMM-MonthlyCalendar (KolbyJack) doesn’t show the repeating count value or title for recurring events. The in-built calendar module shows it perfectly - see screenshot - but the number value doesn’t seem to transfer over to the monthly view.

Is this a config issue or a feature limitation, and is there anything I can do to fix it?

I’m thinking for a brute force/hacky fix, I could add the java code to the MMM-MonthlyCalendar based on the built-in calendar (if the attributes are carried across…) (if that’s allowed!).

@nschertz

Did you get anywhere on this?