MMM-My Calendar Two Columns

[ctag]

I have installed mmm-mycalendar late last week. I have it all setup and working with two calendars, but I am trying to figure out how to have it set into two columns. I have attached my code to check… thanks in advance for any help.

{
module: “MMM-MyCalendar”,
position: “top_left”, // This can be any of the regions. Best results in left or right regions.
config: {
colored: true,
columns: true,
calendars: [
{
color: ‘#0000FF’,
url: ‘url 1.ics’,
symbol: ‘calendar’,
maximumEntries: ‘4’,
},
{
color: ‘#FF0000’,
url: ‘url 2.ics’,
symbol: ‘calendar’,
maximumEntries: ‘4’,
},

                            ],
                    }
            },

[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