MMM-CalendarExt3Agenda

cyberphox

Got tired of looking at the update notification today. Did a git pull and npm install…module isn’t showing at all now…
Should have left it alone…sigh

MMRIZE

@cyberphox share me your config.(eouia0819@gmail.com)

cyberphox

@MMRIZE sent! thanks for having a look!

htilburgs

Is there a way to hide (not show) Yesterday, Today, Tomorrow, etc. and just show the day and date?

htilburgs

@htilburgs said in MMM-CalendarExt3Agenda:

Is there a way to hide (not show) Yesterday, Today, Tomorrow, etc. and just show the day and date?

Found it:
in custom.css change

.CX3A .relativeDay {
display: none;
}

htilburgs

Is there a way to only show MiniMonthCalendar and no calendars? I would like to run 2 instances of MMM-CalendarExt3 Agenda

only show MiniMonthCalendar
only show Calendar (no problem)

MMRIZE

@htilburgs

htilburgs

@MMRIZE
I know this, but I like to have 2 instances running.
1 Calendar on the left and 1 MiniMonth on the right.
On this way the CSS wil override the Calendar part of both parts.

MMRIZE

@htilburgs
You can give instanceId for each instance. Then you can specify CSS selector with that instanceId.

/* config/config.js */
module: 'MMM-CalendarExt3Agenda',
position: 'top_left',
config: {
  instanceId: 'mymodule1',
  ...

/* css/custom.css */
.CX3A_mymodule1 .agenda { // You can select a specific instance like this.
  display: none;
}

MMRIZE

@htilburgs
But I’m sorry, I forgot to implement that feature until now. :D.(nobody found it was not implemented )I fix it now. You can update the module and use that instanceId selector. Sorry again. :D

htilburgs

@MMRIZE
I didn’t see it either in the documentation, my mistake. Thanks for the quick reply and fix. I’ll try when I’m at home.

sdetweil

@htilburgs if you have 2 instance and want different css behavior, then you need to add more entries to custom.css using another selector prefix

you can add a fake name to the classes property (at same level as module and position) and use that name instead of .CX3A.
note the dot in front means classname

htilburgs

@sdetweil thanks Sam for the extra explanation.

sdetweil

@htilburgs so an example

in the second instance of agenda

add

  classes:"agenda2",

after the

  module:"MMM-CalendarExt3Agenda",

and in the css
copy all the .CX3A settings you have
and add

.agenda2

and a space after .agenda2
as the start of the line w .CX3A

.agenda2 .CX3A ....

on all the newly duplicated lines
leave out the ones you don’t want on the second instance of course

htilburgs

@MMRIZE I’ve tried, but no luck

htilburgs

@sdetweil Yes! This works. Thanks

danny607

@ffingers6 how do you get that view? can you post out the config.js and or relevant module JS thanks.

MMRIZE

@danny607
https://forum.magicmirror.builders/topic/16976/mmm-calendarext3agenda/152?_=1725781945711

Dr8ke

This is a great module thank you!

It may be something obvious but I’ve been searching without any luck. I’m trying to see how I can get more events to appear in the agenda. But I can seem to go beyond what’s in the screenshot. I’ll be using portrait mode so I have lots of room. I’ve include my config file and CSS file if that helps. Any help would be much appreciated, thank you!

Config.js

	module: 'calendar',
			header: "Calendar",
			//position: 'top_center',   *Calendar is needed for the MMM-CalendarExt3Agenda but taking away it's position hides it.
						config: {
						wrapEvents: true,
						fetchInterval: 300000, 
						maximumEntries: 100,
						displaySymbol: true,
						calendars: [

Custom.css


/******** CX3-Agenda ********/

/*Remove CW from the miniMonth*/
.CX3A .miniMonth .cw {
  display: none;
}

/*show/hide event description or location*/
.CX3A .agenda .event .description,
.CX3A .agenda .event .location {
  display: none;
}

.CX3A .cellBody .fullday .event .headline .symbol,
.CX3A .cellBody .fullday .event .headline .symbol * {
  display: inline-block;
  color: var(--oppositeColor);
}

sdetweil

@Dr8ke here is the full size

.CX3A .agenda {
  position: relative;
  max-height: 600px;
  overflow-y: hidden;  // if it gets bigger, truncate and hide
  mask-image: linear-gradient(to bottom, transparent, black 10%);
  -webkit-mask-image: -webkit-linear-gradient(90deg, transparent, black 10%);
}