MMM-CalendarExt3Agenda

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

BKeyport

@DDE12 I still don’t get them all lined up right - thanks to advertising in one of my schedules (Washington State Cougars @ Washington Huskies - presented by blah blah blah blah)

But I’ve tweaked it enough to get it right most of the time. Just keep tweaking it.

DDE12

@BKeyport Thank you!

Event align.png

BKeyport

@DDE12 wanna post back your related CSS? I’m curious about something.

DDE12

@BKeyport
I think I need to use something other than width: ##px so that it adjusts based on how much space the time takes. Is there a way to make startTime " - " endTime into a string or something and then align that to the right?

.CX3A {
  font-size: 16px;
  min-width: 300px;
  max-width: 400px;
  text-align: left;
  color: lightgray;
  --saturdayColor : white;
  --sundayColor: white;
  --todayColor: gold;
}
/* +++  Colored dot before event +++ */
.CX3A .event .headline .symbol {
  color: var(--calendarColor);
  font-size: 75%;
  vertical-align: text-bottom;
}

.CX3A .event .headline .symbol.noSymbol::after {
  content: '|';
  font-weight: bold;
}  
/*  ++++ Divider Lines +++ */
.CX3A .agenda .cell {
  padding-top: 2px;
  border-top: 1px solid gray;
  margin-top: 2px;
}

.CX3A .cellHeaderMain {
  display: flex;
  gap: 3px;
  text-transform: capitalize;
}

/* +++ Show/Hide event description or location +++ */
/*.CX3A .agenda .event .description, */
.CX3A .agenda .event .location {
  display: none;
}

/* +++ Change order of info displayed +++ */
/* to test text-wrapping */
/*.CX3A {
  width: 300px; 
}/**/
*.CX3A .cellBody .fullday .event {
  width: 100%;
}
/* +++  Event title +++ */ 
.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: 3;
}

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

BKeyport

@DDE12

Well… I believe you can tell it to take up a percentage of space rather than an absolute of space, but don’t quote me on that. I’m not a wizard on how the CSS works, the original stuff I used was MMRize’s, and just tweaked from there.

Also, that’s not the entire CSS for CX3A - what I was curious about was your long text work - it’s what is still causing me issues today.

:)

DDE12

@BKeyport
Maybe someone with CSS Wizard skills can help us out. I am far from a wizard with any of this stuff, I just come up with impossible ideas.

Do you know what css your are looking for specifically? I might have changed something in the module’s css and forgot to move it over to mine. “Is it the Test 8 with a lot of words to test wrapping and such” that you are interested in?

BKeyport

@DDE12 yeah, I was referring to Test 8…

as for changing the module’s CSS. Please go through and move everything to custom.css and restore the default file. When @MMRize updates, it’ll break things to leave your changes in the module’s CSS file. git restore is the command you need to back out your changes…

Honestly, if you’ve made changes to his file, what I’d do is:

cp MMM-CalendarExt3Agenda.css mine.css
git restore MMM-CalendarExt3Agenda.css

then compare MMM-CalendarExt3Agenda.css with mine.css to remember what you’ve changed.

Easiest way.

DDE12

@BKeyport
I have been working on a new install of MM to clean everything up. I worked on CalExt3Ag today and I hope this helps you. Here is my entire custom Css. I am using Firefox in Windows 10.

.CX3A_MAGIC {
  display:none;
}

.CX3A {
  font-size: 16px;
  min-width: 300px;
  max-width: 400px;
  text-align: left;
  color: lightgray;
  --saturdayColor : white;
  --sundayColor: white;
  --todayColor: gold;
}

/* +++  Colored symbol before event +++ */
.CX3A .event .headline .symbol {
  color: var(--calendarColor);
  font-size: 75%;
  vertical-align: text-bottom;
}
.CX3A .event .headline .symbol.noSymbol::after {
  /*content: '⬤';/**/
  content: '|';
  font-family: Impact;
  font-weight: bold;
  /*display: inline-block;
  /*padding-right: 2px;/**/
} 
 /**/
 
/*  ++++ Divider Lines +++ */
.CX3A .agenda .cell {
  padding-top: 2px;
  border-top: 1px solid gray;
  margin-top: 2px;
}

.CX3A .cellHeaderMain {
  display: flex;
  gap: 3px;
  text-transform: capitalize;
}

/* +++ Show/Hide event description or location +++ */
.CX3A .agenda .event .description, 
.CX3A .agenda .event .location {
  display: none;
}

/*  +++  Change order of info displayed  +++  */

/* to test text-wrapping */
/*.CX3A {
  width: 300px; 
}/**/
*.CX3A .cellBody .fullday .event {
  width: 100%;
}/**/

/* +++  Event title +++ */ 
.CX3A .event .title {
  color: var(--calendarColor);
  order: 1;
  width: 135px; /* Adjust for your region width. Here I am using fixed value to make things simple */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;/**/
  padding-left: 2px;
  flex-grow: 1;
}

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

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

.CX3A .event .time.endTime {
  order: 3;
  width: 45px;  
  text-align: left;
}/**/

.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;

Looks like:

Changing only .CX3A .event .title.

/* +++  Event title +++ */ 
.CX3A .event .title {
  color: var(--calendarColor);
  order: 1;
  width: 135px; /* Adjust for your region width. Here I am using fixed value to make things simple */
  /*text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;/**/
  padding-left: 1px;
  flex-grow: 1;
}

Gives:

I think you are wanting the wrapping and I do not LOL.