MMM-CalendarExt3Agenda

[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;
}