Finally I found what was wrong.
The issue lies in the wrong parsing logic from the default calendar module about repeated full-day events with TimeZone by RRULE.
If you have installed CX3 v1.8.2, Reinstall again or back to 1.8.1 (I rolled back again to 1.8.1)
Then see this;
https://github.com/MMRIZE/MMM-CalendarExt3/wiki/To-fix-wrong-repeated-fullday-event-displaying-(MM-2.27)
.CX2 .eventMain {
display: flex;
justify-content: space-between;
}
But this is valid only when you show title and time only on daily view mode. When you need a more complex case, another approach may be needed.
@shall_ @alaric10000
It happens when the event is regarded as FulldayEvent but not to start at 0 O’clock. I updated the module to fix it.
https://github.com/MMRIZE/MMM-CalendarExt3/pull/141
Update the module and check it.
@shall_
Can you send me the ics file? (eouia0819@gmail.com)
@ludoRaspberry
Well, ideally there is a way to compile C/C++ codes to Native Node JS library to use inside of nodeJS, however it is not so easy.
@shall_
CX3 doesn’t parse ics file directly, so probably the default calendar app (or any event provider) must have responsibility.
But for an instant solution, you can use preProcessor or event payload to make a hotfix by force.
BEFORE
/* in your CX3 module config */
preProcessor: (event) => {
if (["SomeCalendarName", "AnotherCalendarName"].includes(event.calendarName)) {
event.startDate = Number(event.startDate) - 1000 * 60 * 60
event.endDate = Number(event.endDate) - 1000 * 60 * 60
}
return event
}
AFTER
If all your calendar has that issue, you can omit if statement.
preProcessor: (event) => {
event.startDate = Number(event.startDate) - 1000 * 60 * 60
event.endDate = Number(event.endDate) - 1000 * 60 * 60
return event
}
@flemmingss
Set enough ‘maximumEntries’, ‘maximumNumberOfDays’ and ‘pastDaysCount’ of the default calendar.
@daryl_thorpe
https://github.com/eouia/MMM-Whereis
This is not the exact one you want, but similar.
@flemmingss
Your RAR is not downloadable by security issue. Anyway, is there CX3_Shared/CX3_Shared.mjs in position? Your error log says it is not accessible on your system.
@flemmingss
You may still need to complete the installation of the module. You may have missed these instructions on installation;
npm install
git submodule update --init --recursive
Or, you are using Docker, and for some reason, css/custom.css and modules/MMM-CalendarExt3/CX3_Shared/CX3_Shared.mjs seems not being loaded. I’m not familiar with Docker so not sure.
I copied your config and test works.
To check whether there is issue;
MMM-LogExt to record the front-end logs into the backend log.@Illimar said in Need help with modules not displaying:
getDaysLeft() and dateFormat() are defined as member methods of the module, but you are using them as general functions.
var days = getDaysLeft(i);
It should be;
var days = this.getDaysLeft(i);
Or, even better is; to define getDaysLeft as a general function inside of getDom(), because only there the function is used once and nowhere else. It doesn’t need to be defined as a member of the module.
getDom: function() {
const getDaysLeft = (i, config) => {
const date = Date.now();
...
}
let wrapper = document.createElement('div');
wrapper.style.color = this.config.textColor;
for (let i in this.config.dates) {
let days = getDaysLeft(i, this.config);
...
@greedyvegan
newsfeed item could have a container with selector withImage or not.
<div class="container {% if config.showImage and image %} withImage {% endif %}">
{% if config.showImage and image %}
<div class="newsfeed-image" style="background-image: url({{image}})"></div>
{% endif %}
So you can specify your style for each case, withImage or not.
.MMM-anotherNewsFeed .module-content .container {
text-align: right;
...
}
.MMM-anotherNewsFeed .module-content .container.withImage {
text-align: left;
...
}
Image and contents are arranged by container’s display:flex so you can reorder or justify with flex-related attributes.
@lightfixer2000
I’m not using vdirsyncer to get iCloud or Google private/family calendars as iCal. So I have no idea.
Instead I use MMM-CalDAV. Sorry.
@greedyvegan
It will look better to arrange newsfeed module more harmonized.
/* css/custom.css */
/* This is just and example. Adjust to your color and dimensions */
.MMM-anotherNewsFeed .newsfeed-image {
min-width: 150px;
min-height: 150px;
max-width: 150px;
max-height: 150px;
margin: 10px 20px 10px 10px;
border-radius: 15px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.region .module.MMM-anotherNewsFeed {
width: 600px;
height: 300px;
border-radius: 15px;
margin-top: 0;
background-color: #333;
}
/* in your module config of CX3 */
eventTransformer: (ev) => {
if (ev.title.search('Tom') > -1) ev.class = 'tom'
if (ev.title.search('John') > -1) ev.class = 'john'
return ev
},
/* css/custom.css */
.CX3 .event.tom {
color: blue;
}
.CX3 .event.john {
color: green;
}
@Hobbit
console.log() was used just to check event object has which properties. You can remove that line.
Sometimes, .description has no value at all, as false or null. In that case .description.search() couldn’t be perform, so whether check .description is not false or null at first hand. that’s all.
Some enhanced features of my module require JS or CSS skills. So sorry.
@greedyvegan That is not an error, just warning you can ignore it.
@Hobbit
Hmmm… you are using CX3? or CX3A? minimonth... options are for CX3A, not CX3
Anyway,
/* In your config.js */
{
module: "MMM-CalendarExt3",
position: "bottom_bar",
config: {
eventTransformer: (ev) => {
console.log(ev)
if (ev.description && ev.description.search('foo') > -1) {
ev.color = 'green'
ev.title = '[FOO] ' + ev.title
}
return ev
},
}
},
@KristjanESPERANTO
Maybe. :) I’m so lazy. hahaha… To be honest I have been forgetting this module until now.