Turn on/off event location based on calendar

[slodub]

I know there is a way to turn on event location and/or event time in the month view, but that is global to the view. Is there any way to turn off and on event locations in each calendar?

[eouia]

I think it's possible. 1) Give the styleName to the calendar.

calendar: [
  {
    name: 'mlb mariners',
    styleName:"hideLocation",
    symbol:"baseball@em",
    url: "http://mlb.am/tix/mariners_schedule_full",
  },
]

2) Add this to your ~/MagicMirror/css/custom.css.

.CALEXT .hideLocation .eventLocation {
  display:none;
}

[slodub]

That worked!! But it killed the custom style I was using for that calendar. Can a new variable be created like 'locationOn' so that styles can be used along side it?

[eouia]

calendar: [
  {
    name: 'mlb mariners',
    styleName:"YOUR_CLASSNAME", // Or you might be using `classPattern`, leave it.
    symbol:"baseball@em",
    url: "http://mlb.am/tix/mariners_schedule_full",
  },
]

.CALEXT .YOUR_CLASSNAME .eventLocation {
  display:none;
}

[slodub]

So this will tie location hidden to any calendar using that style (classPattern)? I'll give it a try later today, I'm at work and can't test right now.

[eouia]

Yes, right. If you are sharing same style to several calendars, hmmmm.. There could be many trick. If you can understand CSS rules, it will not be difficult.

By example. When calendar A, B, C have the same class as their classPattern or styleName, And you just want to hide eventLocation of calendar A. Then, I think you can do that like belows;

calendar: [
  {
    name: 'calendar A',
    styleName:"style01 no_location",
  },
  {
    name: 'calendar B',
    styleName:"style01",
  },
  {
    name: 'calendar C',
    styleName:"style01",
  },
]

.CALEXT .no_location  .eventLocation {
  display:none;
}

[slodub]

That worked! Thanks again for the support as I am still a total css newb...

[eouia]

Good to you. I'll close this.

[slodub]

I know this is closed but I tried to add a second calendar with no location and its not working. In custom.css I tried the following:

.CALEXT .style5.no_location .eventLocation { display:none; }

.CALEXT .style9.no_location .eventLocation { display:none; }

This only applies to the first calendar using style5...

and:

.CALEXT .style5.no_location, style9.no_location, .eventLocation { display:none; }

This turned off location for all calendars.

Any help is appreciated, thanks!

[eouia]

@slodub interesting. npm start dev or Ctrl+shift+i on browser can show you the development window, You can see the HTML & CSS stuffs of MM there. I think you'd missed something to assign proper class name.

[eouia]

Have you still got this problem? I’ll close this issue.