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

      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 Reply Quote 0
      • S Away
        sdetweil @bicolorbore586
        last edited by

        @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 Reply Quote 0
        • B Offline
          bicolorbore586 @sdetweil
          last edited by 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.

          S 1 Reply Last reply Reply Quote 0
          • S Away
            sdetweil @bicolorbore586
            last edited by 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

            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

              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 Reply Quote 0
              • S Away
                sdetweil @Fuergrissa
                last edited by

                @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

                  @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

                    @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

                      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 Reply Quote 0
                      • S Away
                        sdetweil @Fuergrissa
                        last edited by

                        @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
                        • First post
                          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