request: Event titles on multiple lines

[MHubschmann]

Hi, super great plugin! Im using a smaller screen af my MagicMirror and im having two Monthly calendars side by side (one in lower left and one in lower right), and is therefore running out of horizontal space. All I can see is the time and then three letters of the event title like "09:00 XXX...". In this case having the event title showed on multiple lines would be great.

[klaernie]

Multiline titles are very hard to achieve - it must work for every possible calendar type, and many of the layouts do not work with multiple lines.

Feel free to propose a PR that implements this, but right now we also don't have a test suite, that could prove correctness.

On a functional side, maybe try an alternative way, like using multiple views to switch between current and next month, so both can use more space as only one is shown at a time. This is the way I personally use a next 7 days view for 3 people with private and business events trading places.

[cd36jvn]

I didn't want to create a new issue, as mine is a similar problem. I love this module, but it would be really nice to be able to wrap text of event titles. Unless the title is very short, there just isn't enough space to see the entire thing.

The MMM-CalendarWeek is a good example of what I'm looking for, specifically this picture:

https://github.com/heskja/MMM-CalendarWeek/raw/master/screenshots/mm.png

If there was any way to accomplish this that would be great.

[mpoxberry]

I was able to figure out some custom CSS to at least get events on the month view show up over two lines.

/* MMM-CalendarExt2 
	gets events to show on multiple lines*/
.CX2 .weekSlot .timeline {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
}
.CX2 .weekSlot .timelineSleeve {
	height: fit-content;
}
.CX2 .weekSlot .event:not(.fullday) .eventMain  {
	height: auto;
	flex-wrap: wrap;
	flex-grow: 2; /* <- change to 1 if no icon is used for calendar */
	overflow: visible;
}

The calendar events are created on top of the generic blank calendar (I could be wrong). These calendar events are created as rows and if you have one event in that row that requires two lines it makes the spacing for any following rows a little strange. You're experience my verify depending on other configs setup within the module.

[wiedsee]

great code but is there a option to alling all events on top instead of spreading them out over the day?

[klaernie]

great code but is there a option to alling all events on top instead of spreading them out over the day?

Do you mean the daily view?

[wiedsee]

no, I use the week view if I use this code in CSS it spreads the events out like this but I would like to have them all on top with the gap underneath all the events instead of in between

[klaernie]

I think what you're trying to explain needs a separate issue . Could you then maybe explain using a quick and dirty mockup with gimp/photoshop?

[wiedsee]

like this

NOT this

now it is that the more events there are the closer they get

.CX2 .weekSlot .timeline {
	display: flex;
	flex-wrap: wrap;
}`
`.CX2 .weekSlot .timelineSleeve {
	height: fit-content;
}`
`.CX2 .weekSlot .event:not(.fullday) .eventMain  {
	height: auto;
	flex-wrap: wrap;
	flex-grow: 0;
	overflow: visible;
}

[klaernie]

@wiedsee : If I understand correctly, your changes are on top of the ones proposed by @mpoxberry. It was always part of the design, that if you have a need that doesn't fit everybody (and the default behaviour of MMM-CX2 is more similar to your version) that you can use the custom CSS of Magic Mirror to make it fit to your needs. And from your CSS I'd say you already have everything you need.

[wiedsee]

@klaernie but I want multiple lines (at least 2 lines) per event but then aligned to the top which i couldn't figure out how to do.