MMM-MonthlyCalendar, config and .css

bicolorbore586

Hi all,

Do all modules conform to the same structure?

The reason I ask… Currently using the default calendar, and ext3, it displays the event, along with a symbol and the text in a color associated with a persons name. I’ve recently found that mmm-monthlycalendar suits the layout of my magicmirror better, however the color isn’t copying across.

I’ve tried eventTransformer: (ev) => in the config for monthlycalendar, along with the default calendars, I’ve tried to get my head around css but can’t figure it out.

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