MMM-CalendarExt3Agenda

[MMRIZE]

Nobody like my default color settings? :(

[BKeyport]

@MMRIZE I did, when I was on a dark background. Then I decided I wanted to go with color to tell events apart, so css work it was.

[Wenike]

@MMRIZE I did! Except I have like 6 calendars defined and I’ve long been used to telling them apart by color on my Google calendar.

[luisestrada]

@hogedir

I edited the max-width value (50% to 100%) in .CX3A .cellBody .fullday .event and solved the issue

[hogedir]

@MMRIZE how do you change the baseball icon please? which one are available to put?

[BKeyport]

@hogedir icons are changed at the calendar level by adding symbol: <some symbol> to each calendar in the calendar module.

https://fontawesome.com/v5/search is where you can look up icons to use. The system can’t use pro icons.

{
	url: "http://cal.events/VReW45.ics",
	name: "Seahawks",
	symbol: "football-ball",						
},

is https://fontawesome.com/v5/icons/football-ball?s=solid&f=classic

[hogedir]

@BKeyport I searched how to Hide the list of events diary and the AGENDA calendar with all the month with days because I just want to show the 3rd part of the module with all the events.

like this : hiding the cross part and the other part with events :

[sdetweil]

@hogedir please see this post

https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1664733698317

about using the developers window (ctrl-shift-i) to examine the web page and find the element u want to address

this content goes into ~.MagicMirror/css/custom.css

.MMM-CalendarExt3Agenda  .?????? {
      display:none;
}

where ??? is the classname of the month view

[BKeyport]

@hogedir hiding the minical is simple: showMiniMonthCalendar: false, in your config. I suggest you read the README.md - it’s all documented.

Everything other than config options is CSS - Feel free to give ideas, and @mmrize and I can help you work it out.

[BKeyport]

hey, @MMRIZE - I can’t figure out how to do something.

One of my remotely generated events has taken to advertising in it’s title.
(Washington Football vs Arizona - blah blah special event, Presented by Idiot Company)

I want to get rid of everything after the dash. Not sure how to word the transform to do it - can you explain?

Thanks.

[DDE12]

How do I change the order of information events from
___________________________________________________________
1:30 PM - 2:30 PM Event Name ________________________

to

___________________________________________________________
Event Name ________________________1:30 PM - 2:30 PM

[BKeyport]

@DDE12 refer back to https://forum.magicmirror.builders/topic/16976/mmm-calendarext3agenda/24?_=1668752794543

The combo of my work and @MMRIZE 's work results in that. Right around there is where I got all of my settings for my install. Feel free to experiment.

[cyberphox]

Running MagicMirror in Docker on Synology.
Installed this module and it looks great on my MacBook, but when I try to visit on my mirror with Raspberry Pi 3, the module doesn’t show (just default calendar module). Get a Syntax error, unexpected token.
So weird.

[sdetweil]

@cyberphox what version of MM are you running, and on pi, what version of OS and what browser?

these modules, like many newer ones, are converting to javascript ES6 idioms that don’t work on older node versions (built into browsers as well)

[cyberphox]

@sdetweil
Chromium 72.0.3626.121
Raspbian Stretch
MagicMirror: v2.21.0

[sdetweil]

@cyberphox how about node -v

stretch is really old… so probably a downlevel version of javascript…

[cyberphox]

@sdetweil
No doubt…not a huge issue as it was test install…Thanks for the help!

[sdetweil]

@cyberphox said in MMM-CalendarExt3Agenda:

72.0.3626.121

chrome 72 is march 2019… so 3.5 years old

[cyberphox]

@sdetweil Looks like I can upgrade through terminal so might give it a go over the weekend

[DDE12]

@BKeyport Thank you!
I’m using both startTime and endTime and can’t get it lined up right.

.CX3A .event .title {
  color: var(--calendarColor);
  order: 1;
  width: 120px; /* Adjust for your region width. Here I am using fixed value to make things simple */
  flex-grow: 1;
}

.CX3A .event .time.startTime {
  order: 2;
  width: 52px;  
  text-align: right;
}

.CX3A .event .startTime::after {
  content: ' -';
}

.CX3A .event .time.endTime {
  order: 2;
  width: 65px;  
  text-align: right;
}

.CX3A .event .symbol {
  order: 4;
}

.CX3A .event .headline {
  justify-content: space-between;
}

.CX3A .event .description {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 90%;
  color: orange;
  padding-left: 20px;
}