Standard calendar Determine text alignment

Clubjack

Hey guys.

Today I experimented a little with the standard calendar for a simple overview. So far I am satisfied. However, the text alignment bothers me a bit, as you can see in the picture. Is it possible to adjust this via the css?!
Calendar 1 and 2 looks good
The eventtitel and Symbol from calendar 3 is to much right
Eventtitel From 4 and 5 ist right alignment, but would Look better if its left

0_1577648082866_IMG_20191229_203356.jpg

sdetweil

@Clubjack so, how did you do 5 calendars?

affects how to fix them
left edge of 2 looks too far left compared to 1

show the config.js

Clubjack

Hey.
Here is the config from the first an second calendar. the others are created same way

{
                        module: "calendar",
                        header: "Test1",
                        position: "top_left",
                        config: {
                                maximumEntries: "7",
                                timeFormat: "absolute",
                                urgency: 1,
                                getRelative: 12,
                                fullDayEventDateFormat: "DD.MMM",
                                dateFormat: "DD.MMM HH:mm",
                                calendars: [
                                        {
                                                symbol: "toolbox",
                                                url: "https://calendar.google.com/calendar/ical/.../basic.ics"   }
                                ]
                        }                                                                                                                                                                                            },
                {
                        module: "calendar",
                        header: "Test2",
                        position: "top_left",
                        config: {
                                maximumEntries: "7",
                                timeFormat: "absolute",
                                urgency: 1,
                                getRelative: 12,
                                fullDayEventDateFormat: "DD.MMM",
                                dateFormat: "DD.MMM HH:mm",
                                calendars: [
                                        {
                                                symbol: "calendar-check",
                                                url: "https://calendar.google.com/calendar/ical/.../basic.ics"   }
                                ]
                        }
                },
......

sdetweil

@Clubjack said in Standard calendar Determine text alignment:

                    position: "top_left",

and the other positions?

top_right?

do you have any custom.css entries?

Clubjack

@sdetweil
Oh yes.
Calendar 4 an 5 are with the same settings, only Position is top_right.

I have an entry in custom.css, but without the entry it is the same alignment.

 body {

 }

.MMM-DarkSkyForecast .module-content {
        width: 550px;
}
.calendar .module-content {
        width: 550px;
}

sdetweil

@Clubjack right, .module-content doesn’t mean anything

U are lucky most modules don’t support multiple instances like that.

My ‘guess’ is that there is some padding wrap in front of the tables for the calendar.

I would use the developers window, elements tab, to explore the css tree for each.

Note that because they are the same module name, one css entry will affect all of them

Clubjack

What Do You mean with “developers window, elements Tab”? Where can i find it?

Clubjack

@sdetweil
Hey…
I tried something.
If one of the displayed event titles (calendar 3) gets longer, then the alignment fits.
This means that the calendar symbol and the event title align together.
It would be better if the calendar symbol were always aligned to the left and the event title follows it.

sdetweil

@Clubjack said in Standard calendar Determine text alignment:

What Do You mean with “developers window,

the developers window is opened with

keyboard = ctrl-shift-i (its a toggle, once, its on… next time its off)
at startup time = npm start dev

note that if you use a windows machine for development and a pi to display, you can ALSO display on your windows box, by going to http://pi_address:port (the config.js has to allow any system to connect so whitelist=[], and address= “”)
and then use the dev window THERE

Clubjack

@sdetweil
Hey…
In the meantime I managed to align everything. Via the custom.css.
Now I installed the MMM-GoogleTasks module according to the instructions and inserted my API ID.
Then I restarted the MM and since then I only have a black screen in a window called electron.
I hope I don’t have to set everything up now. My brain is starting to smoke.

sdetweil

@Clubjack so, when a module dies in the modulename.js file, it will usually kill the screen display.

so you need to open the developers window (ctrl-shift-i) and look thru the console for any errors reported

Clubjack

@sdetweil oh man. What would i do without You. 🙈
Found the error… Suddenly the node_helper was not found.
I get it back with an older Thread from You.
Thank You for all

sdetweil

@Clubjack the next release has a fix so that the node_helper error should never happen anymore

Clubjack

Unfortunately, a new little question. Is it possible to change the color of today’s events in the standard calendar module?

sdetweil

@Clubjack looking at the code, it appears there is no distinction between today and any other day in handling the class for the event title . so no…

it only checks for the config option colored and titleClass

titleWrapper.innerHTML = this.titleTransform(event.title) + repeatingCountTitle;

			var titleClass = this.titleClassForUrl(event.url);

			if (!this.config.colored) {
				titleWrapper.className = "title bright " + titleClass;
			} else {
				titleWrapper.className = "title " + titleClass;
			}

shiring

@clubjack

Can you share the Solution? Thanks