MMM-MonthlyCalendar, config and .css

[sdetweil]

@bicolorbore586 said in MMM-MonthlyCalendar, config and .css:

Do all modules conform to the same structure?

physical layout, yes
operational process, no

CalExt/Ext2 read and parse the calendar themselves, in addition to default calendar doing that
CalExt3/Ext3Agenda , take the info provided by default calendar (only download once and parse once)
MMM-MonthlyCalendar, also takes what default calendar gives, but color is an Ext3 option for default cal entry

css is

.modulename .class/element... (css selector clause) {
      styles
}

like this

.MMM-MonthlyCalendar  ???? { 
   ...
}

I use this for the css selector clause
https://www.w3schools.com/cssref/css_selectors.php

here is how to use the developers window to locate the elements u want to style and
get what would go in custom.css
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1666112801123

[bicolorbore586]

@sdetweil Ok, so will using css (which at present, seems waaaaay beyond me, so much so that I’m considering giving up) mean that each time I add an event that is under “steve” it will be green? Even watching introduction to css youtube videos is turning out to be unproductive.

[sdetweil]

@bicolorbore586 said in MMM-MonthlyCalendar, config and .css:

so will using css … mean that each time I add an event that is under “steve” it will be green

yes, if u select the right web page element and the method u select (css selector) is repeatable

some modules provide config mechanisms to specify those (css) selectable items
(in default cal, its symbolClass, titleClass and timeClass, for the 3 fields in the display)
‘YOU’ have to specify arbitrary made up names to be able to select them in css

for example
in default cal

   {  
      module: "calendar"
      config: {
             titleClass:'foo'
        ...
  }

in css

.calendar  .foo {
      color:  green;
}

this means, every time u find an element with class:“foo” inside the content with a class:“calendar” set the text color to green

the . is because u are selecting (css selector clause) a CLASS

this effects ONLY the title of the cal event row to green (because we are selecting the ‘titleClass’ to assign that effect to

[Fuergrissa]

I’m trying to work through the same issue. I have specified a titleClass in the calendars module, in the main.css I have:

.family {
     color: rgba(255,52,255,0.7);
}

and this causes events in the calandar module to show as magenta, however in the fourweeks calendar (MMM_MonthlyCalendar) thet still appear in white.

Does this imply that this module does not use the event title, but some other part of the event? or am I missing something? I also tried

.MMM-MonthlyCalendar.family {
     color: rgba(255,52,255,0.7);
}

[sdetweil]

@Fuergrissa never edit main.css it will stop upgrades. never edit any file we ship

all your config for css goes in css/custom.css

if it doesn’t exist create it

[sdetweil]

@Fuergrissa there needs to be spaces between the classes unless u mean they are in the same element

[sdetweil]

@Fuergrissa use the dev window link I posted to be able to see and fiddle w css live without file edit , try , no, edit, try, no loop

[Fuergrissa]

Thanks I did all of the things you suggest. The developer pane is really handy, but when I drill all the way down to individual calendar events there is no difference in class for events coming from different calendars (which do have the titleClass assigned). Looking in MMM-MonthlyCalendar.js there is a section at the end that looks like it is intended to inherit the color information from the event, but this doesn’t actually happen?

if (e.color) {
            var c = e.color;

            if (e.fullDayEvent) {
              div.style.backgroundColor = c;
              if (getLuminance(div.style.backgroundColor) >= self.config.luminanceThreshold) {
                div.style.color = "black";
              }
            } else {
              div.style.color = c;
            }
          }

[sdetweil]

@Fuergrissa don’t know this module’s workings

[sdetweil]

@Fuergrissa so it looks like this module gets it’s events from the base calendar
and if the base is not shown

anyhow, use multiple { url: …}
blocks in the based calendar add a name: attribute to each

that will carry forward on the event. I don’t know if this cal will use it

but then u could set styles for events by cal name