MMM-My Calendar Two Columns

[j.e.f.f]

@ctag that parameter no longer works. I used to be in place when I was using the nunjucks templated version, but that gave me many issues so I reverted back to the old javascript generated DOM version, which unfortunately uses tables for layout and is therefore not flexible enough to be forced into columns.

I’ll get around to visiting this again in the future… stay tuned.

[ctag]

Thank you very much @j-e-f-f . Is there a way to utilize more space for the titles then? A lot of the titles get cut off even though the column is much larger than the titles.

[j.e.f.f]

@ctag yep. that can all be done in CSS. here is the rule that currently handles that:

.MMM-MyCalendar .title {
  color: #FFF;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  line-height: 1.25;
  margin-top: 4px;
}

in particular, you can turn on word wrap by setting white-space to wrap and you can turn off truncation by setting overflow to visible and tex-overflow to initial

Also, you can make the entire module wider with this rule:

.MMM-MyCalendar {
  max-width: 500px; /* adjust this to your desired width */
}

do all this in your custom.css file.

[ctag]

@j-e-f-f , I tried putting that in MagicMirror/css/custom.css and it didn’t work. I tried each with nothing else in there and it still had … instead of finishing the title. If it matters, I have this on a raspberry pi 7" touch screen in landscape. It shows the divider lines going 3/4 across the screen, but the text only goes 1/3 or so.

[j.e.f.f]

@ctag I don’t have time right now, but I’ll look into this and give you some more specific CSS you can use. I know this is 100% possible because I have done exactly this on my kitchen display.

[ctag]

Thank you!! I appreciate your time and effort in this.

[j.e.f.f]

@ctag Here is the CSS I used to make my calendar wider:

.MMM-MyCalendar {
  max-width: none; /* this will allow the calendar to expand to the full width of the column */
}

.MMM-MyCalendar .calendar-event .title,
.MMM-MyCalendar .calendar-event .time,
.MMM-MyCalendar .calendar-event .location {
  padding-left: 0px; /* you may want to omit this if you get unexpected overlapping... */
  white-space: normal;
}

My mistake was suggested white-space:wrap when it should have been white-space:normal.

[ctag]

@j-e-f-f , thanks! That did make the module full screen, however, the text still only goes 1/3 so it cuts off the event and puts …
Sorry, I am pretty much a newbie to all of this. Just trying to learn as much as I can.

[j.e.f.f]

@ctag there may be a max-width setting going on for the title. Try something like this:

.MMM-MyCalendar .calendar-event .title {
  max-width: none;
  width: 100%;
}

To get rid of the full-screen effect, remove this rule, or set it to a specific pixel width:

.MMM-MyCalendar {
  max-width: none; /* remove this, or set it to something like 400px */
}

Also, if you have time have a read through my CSS 101 thread which will teach you how to inspect elements to see what CSS is applied so that you can effectively override it with your own preferred style:

https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works

[ctag]

@j-e-f-f said in MMM-My Calendar Two Columns:

.MMM-MyCalendar .calendar-event .title {
max-width: none;
width: 100%;
}

Thanks @j-e-f-f , unfortunately that did not work. I do appreciate your willingness to help. And thank you for the link. I will definitely have to take a look at that!

[j.e.f.f]

@ctag something else is restricting the width of the title then. After you have had a read through CSS 101, try to inspect the parent elements of the title element one at a time to see if you can determine what is restricting the width.

[ctag]

@j-e-f-f I will… thanks again for all of your help. When you say go through all of the parent elements, are you referring in the custom css file, or the config.js file. The code you gave me is all that is in the css file. Hopefully I can find this.

[j.e.f.f]

@ctag My guide explains how to use the dev tools to inspect the various HTML elements to see what CSS is applied. HTML is arranged in a nested format, with some within others. These outer elements are what I refer to as parent elements. Since our attempt to change the with of the title element of the calendar entry directly failed, it means that something else is restricting the width of the title. This usually means some CSS is being applied to a parent HTML element of the title element that is influencing the size of the title element. Have a read through the article I shared, and then try to familiarize yourself with the dev tools inspector. You’ll be using that to try and figure out what is restricting the size of the title.