@ffingers6
a86ca1d6-517e-43d5-bdd4-3d864e42c7f4-image.png
/* 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.
