MMM-CalendarExt3Agenda

[MMRIZE]

@ffingers6
I’ll try soon.

[MMRIZE]

@ffingers6

/* config/config.js */
{
  module: "calendar",
  config: {
    broadcastEvents: true,
    defaultSymbolClassName: "", // This is needed to use the iconify icons instead of the font-awesome icons
      calendars: [
        {
          symbol: "noto:calendar",
          url: "...",
          color: "violet",
    ...
  }
},
{
  module: "MMM-CalendarExt3Agenda",
  position: "bottom_bar",
  config: {
    showMiniMonthCalendar: false,
    locale: "en-US",
    startDayIndex: 0,
    endDayIndex: 2,
    useIconify: true,
  }
},

/* css/custom.css */
.CX3A {
  max-width: 100%;
}

.CX3A .agenda {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: 10px;
  mask-image: none;
}

.CX3A .agenda .cell {
  flex-grow: 1;
  flex-basis: 0;
  border-bottom: none;
}

.CX3A .agenda .cell .cellHeader {
  border-bottom: 2px solid gray;
  margin-bottom: 5px;
}

.CX3A .agenda .cell .cellHeaderMain {
  justify-content: space-between;
  flex-grow: 1;
  padding: 5px;
}

.CX3A .event.singleday {
  border-left: 2px solid var(--calendarColor);
  padding-left: 3px;
  margin-bottom: 1px;
  background-color: color-mix(in srgb, var(--calendarColor), transparent 75%);
}

.CX3A .event .time {
  order: 2;
}

.CX3A .event .title {
  flex-grow: 2;
}

.CX3A .cellBody {
  line-height: 120%;
}

.CX3A .cellBody .fullday {
  padding-bottom: 5px;
}

.CX3A .cellBody .fullday .event {
  max-width: 100%;
}

For the size, you may need some manual adjustment for your view.

[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

1. only show MiniMonthCalendar
2. 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