MMM-CalendarExt3Agenda

[FMancuso5]

@sdetweil

{
            module: "MMM-CalendarExt3Agenda",
            position: "top_right",
            header: "Next 3 Days",
            config: {
                showMiniMonthlyCalendar: false,
                instanceId: "basicAgenda",
                locale: "en-US",
                startDayIndex: 0,
                endDayIndex: 3,
                calendarSet: ["John", "Jane", "Joe", "Jill", "Family", "Important"],
                waitFetch: 30 * 1000,
                refreshInterval: 30 * 60 * 1000,
            }
        }

[sdetweil]

@FMancuso5 one thing, for all config and logs, PLEASE use the code wrapper here in the forums…

to do this

copy the text you want to post
paste into the message editor, blank line above and below
select the text you just pasted
hit the </> button over the editor

I fixed the prior post

[sdetweil]

@FMancuso5 said in MMM-CalendarExt3Agenda:

            startDayIndex: 0,
            endDayIndex: 3,

sorry to ask dumb question, are there events in the next 3 days?
if you remove those do you get a display?

if you comment out the calendarSets does that make a difference

waitFecth, 30 seconds, then nothing til refreshInterval…(30 minutes)

make waitFetch longer, 60*1000 (1 minute)
to test

[BKeyport]

Sam: Here’s a live example of no-event item, and an event item. The count don’t show unless it’s got 1 event. Module_4 is blank, Module_5 is showing one event.

<div id="module_4_MMM-CalendarExt3Agenda" class="module MMM-CalendarExt3Agenda MMM-CalendarExt3Agenda" style="order: 0;">
    <header class="module-header" style="display: none;">undefined</header>
    <div class="module-content">
        <div class="bodice CX3A_undefined CX3A">
            <div class="agenda"></div>
        </div>
    </div>
</div>

<div id="module_5_MMM-CalendarExt3Agenda" class="module MMM-CalendarExt3Agenda MMM-CalendarExt3Agenda" style="order: 0;">
    <header class="module-header" style="display: none;">undefined</header>
    <div class="module-content">
        <div class="bodice CX3A_undefined CX3A">
            <div class="agenda">
                <div class="cell thisMonth thisYear year_2025 month_8 date_10 weekday_0 seq_0 week_32 weekend weekend_2" data-events-counts="1">
                    <div class="cellHeader">
                        <div class="cellHeaderMain">
                            <div class="cellDay relativeDay relativeNamedDay relativeDayGap_1"><span class="dateParts literal seq_0 unit_none">tomorrow</span></div>
                            <div class="cellDate"><span class="dateParts weekday seq_0">Sunday</span><span class="dateParts literal seq_1">, </span><span class="dateParts month seq_2">Aug</span><span class="dateParts literal seq_3"> </span><span class="dateParts day seq_4">10</span></div>
                            <div class="cw">32</div>
                        </div>
                        <div class="cellHeaderSub"></div>
                    </div>
                    <div class="cellBody">
                        <div class="fullday"></div>
                        <div class="single">
                            <div class="event calendar_Sounders future singleday" data-calendar-seq="1" data-calendar-name="Sounders" data-color="#5D9741" data-description="Calendar not up to date? Check https://fixtur.es/up-to-date" data-title="Los Angeles Galaxy - Seattle Sounders FC" data-full-day-event="false" data-geo="false" data-location="" data-start-date="1754877600000" data-end-date="1754883900000" data-today="false" data-symbol="fas fa-fw fa-futbol" style="--calendarColor: #5D9741; --oppositeColor: white;">
                                <div class="headline useSymbol"><span class="symbol"><span class="fas fa-fw fa-futbol"></span></span>
                                    <div class="time startTime inDay"><span class="eventTimeParts hour seq_0">7</span><span class="eventTimeParts literal seq_1">:</span><span class="eventTimeParts minute seq_2">00</span><span class="eventTimeParts literal seq_3"> </span><span class="eventTimeParts dayPeriod seq_4">PM</span></div>
                                    <div class="time endTime inDay"><span class="eventTimeParts hour seq_0">8</span><span class="eventTimeParts literal seq_1">:</span><span class="eventTimeParts minute seq_2">45</span><span class="eventTimeParts literal seq_3"> </span><span class="eventTimeParts dayPeriod seq_4">PM</span></div>
                                    <div class="title">Los Angeles Galaxy - Seattle Sounders FC</div>
                                </div>
                                <div class="description">Calendar not up to date? Check https://fixtur.es/up-to-date</div>
                                <div class="location"></div>
                            </div>
                        </div>
                    </div>
                    <div class="cellFooter"></div>
                </div>
            </div>
        </div>
    </div>
</div>

[sdetweil]

@BKeyport you want the whole module gone. right?

[BKeyport]

@sdetweil correct.

[sdetweil]

@BKeyport my previous has() should have worked…

let me see how to get empty instance

[sdetweil]

@BKeyport

note the CX3A class is NOT added to the module entry

div id="module_4_MMM-CalendarExt3Agenda" class="module **MMM-CalendarExt3Agenda** MMM-CalendarExt3Agenda" style="order: 0;">

but to the bodice entry

        <div class="bodice CX3A_undefined CX3A">

so the outer div still took up space

this works,

.MMM-CalendarExt3Agenda:has(.agenda:empty){
        /* background-color: red;*/
        display: none;
}

[FMancuso5]

@sdetweil

My apologies! I’ll make sure I format correctly going forward.

Not a dumb question at all, that was the first thing I checked. I wish my life would go three days without an event. But I’ve tried setting endDayIndex to 10, eliminating the indexes completely, eliminating the calendarSet, stripping the entire module down to just the header, the position, the waitFetch and refreshInterval, and it’s still blank. The only way I know that there’s something happening is the header is still there. I tried commenting out the other modules and positioning CX3A top left to see if it was a graphics issue but it’s the same empty header. Yet when I fire up all the modules, CX3 weekly is still showing every event perfectly from the first fetch. I’m stumped. And then when I quit out, the terminal shows no issues, and lists all the events that are successfully being broadcasted by each calendar.

[sdetweil]

@FMancuso5 can you try this
https://forum.magicmirror.builders/post/127456

[BKeyport]

@sdetweil Nope. Not working. I give up. Just turning off that mirror completely… will find something else to do my calendar on.

[sdetweil]

@BKeyport can you see it in the developers window style list on the right?

then you can see if its even noticed

i used the color to prove it was being selected,
you could uncomment that and comment out display none

i added a header to make sure there was something to hide

[sdetweil]

@BKeyport

i would start w the module name as class

.MMM-CalendarExt3Agenda  {
       bsckground-color: red;
}

then i would add the header to the module config

then i would add .agenda to the css selector
and the header should not have the background color
spaces are important. without a space it means an element must have ALL the selector elements itself

[BKeyport]

@sdetweil Nothing works, like everything else with MagicMirror. I can’t get what I want due to CSS and it’s stupidity in general.

One less device to maintain. I’ve not decided if I’m gonna abandon my other modules yet or not, but I’m tired of fighting everything opensource in general - and I’m slowly abandoning everything that is that way.

I’m just done…

[merrymerry2]

@FMancuso5 Make the max entries 10000. I had a similar problem where I noticed the same, only some calendars would have events. My hypothesis is that the max entries field is the number of calendar entries it will capture for each calendar but not based on today going into the future, but of all time.

[benhmin]

I have been working on setting up a magic mirror for my household, and I love the look of this module. Overall it’s been great and I have almost all the options I could need especially with some reasonable CSS editing.

I was finding that there was this persistent “fade” at the bottom of the agenda view

I read this thread which seemed to discuss how to remove the fade at the bottom with CSS targeting .CX3A::after. However, after trying all of those custom.css mods listed in the next few posts I wasn’t able to get that darn fade to go away.

In the end I added the following to my custom.css (assisted by ChatGPT) which produced the desired output in the attached screenshot:

.CX3A .agenda {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

It looks like this is counteracting these lines in the MMM-CalendarExt3Agenda.css file:

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

I don’t think I’m quite at the level where I’d attempt to make a pull request to add a parameter to the config for this, but I wonder if you agree that it might be worth putting on the roadmap? I also wanted to get this in the forum in case someone else needs it later.

Thanks for all your work on this module!

[BKeyport]

@benhmin for once, ChatGPT put you on the right path.

We’ve had this conversation before- the result is that it’s better to leave it CSS than overload the config.

cheers