MMM-CalendarExt3Agenda

[ffingers6]

I was curious if it was possible to get a row view similar to the way MMM-CalendarExt2 worked. I have a good setup that works well for our use case, but want to move to CX3 if possible for some additional features and the reliance on the default calendar module for parsing.

This is my current setup…is it possible to adjust agenda to look like this? I can deal with the styling, but changing to a row format is the big question for me.

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