• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

MMM-MonthlyCalendar, config and .css

Scheduled Pinned Locked Moved Unsolved Troubleshooting
11 Posts 3 Posters 3.6k Views 3 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    bicolorbore586
    last edited by Oct 31, 2022, 1:02 PM

    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.

    S 1 Reply Last reply Oct 31, 2022, 1:24 PM Reply Quote 0
    • S Away
      sdetweil @bicolorbore586
      last edited by Oct 31, 2022, 1:24 PM

      @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

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      B 1 Reply Last reply Oct 31, 2022, 3:42 PM Reply Quote 0
      • B Offline
        bicolorbore586 @sdetweil
        last edited by bicolorbore586 Oct 31, 2022, 3:43 PM Oct 31, 2022, 3:42 PM

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

        S 1 Reply Last reply Oct 31, 2022, 3:56 PM Reply Quote 0
        • S Away
          sdetweil @bicolorbore586
          last edited by sdetweil Oct 31, 2022, 3:57 PM Oct 31, 2022, 3:56 PM

          @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

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • F Offline
            Fuergrissa
            last edited by Nov 4, 2022, 9:46 PM

            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);
            }
            
            S 3 Replies Last reply Nov 4, 2022, 10:26 PM Reply Quote 0
            • S Away
              sdetweil @Fuergrissa
              last edited by Nov 4, 2022, 10:26 PM

              @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

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • S Away
                sdetweil @Fuergrissa
                last edited by Nov 4, 2022, 10:27 PM

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

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • S Away
                  sdetweil @Fuergrissa
                  last edited by Nov 4, 2022, 10:29 PM

                  @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

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • F Offline
                    Fuergrissa
                    last edited by Nov 4, 2022, 11:19 PM

                    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;
                                }
                              }
                    
                    S 2 Replies Last reply Nov 4, 2022, 11:58 PM Reply Quote 0
                    • S Away
                      sdetweil @Fuergrissa
                      last edited by Nov 4, 2022, 11:58 PM

                      @Fuergrissa don’t know this module’s workings

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        2/11
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy