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-CalendarExt3 and EventTransformer not transformering....

    Scheduled Pinned Locked Moved Solved Troubleshooting
    6 Posts 2 Posters 883 Views 2 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.
    • J Offline
      justme2024
      last edited by sdetweil

      Hello and thanks in advance to anyone who can help as I am at the end of my rope on this.

      I am a simple man, and i want to change the text in the google calendar i am pulling from to Blue for certain events based on the title.

      The calendar however only defaults to the usual white text.

      I have previously attempted to use the transform function with a custom css however that did not work either. I used the ctrl-shift-I to inspect the items, which…well showed they were white so maybe i didnt understand what to look for.

      Here is a view of my config file - any help would be much appreciated

       module: "MMM-CalendarExt3",
       position: "bottom_bar",
      	eventTransformer: (ev) => {
        if (ev.title.search('Owen') > -1) ev.color = 'blue'
        return ev
      }
      },
      
      S 1 Reply Last reply Reply Quote 0
      • J Offline
        justme2024 @sdetweil
        last edited by sdetweil

        @sdetweil

        Thanks so much - this documentation fell a little bit flat - it was only changing the symbol and not the font itself… however… at this link https://forum.magicmirror.builders/topic/18528/calendar-calendarext3-font-color-and-symbol/12?page=2 it outlined a font change option

        now, im not great at all of this (clearly) however after some well thought out trial and error i was able to get this code to adjust for the font change, appreciate the help!!
        Hopefully they add some updates to the documentation

         module: "MMM-CalendarExt3",
         position: "bottom_bar",
        config: {
        	eventTransformer: (ev) => {
          if (ev.title.search('Owen') > -1) ev.color = 'blue'
          ev.title=ev.title.replace ('Owen','<font color=blue>Owen</font>')  
        return ev
        }
        }
        },
        

        apologies for the formatting

        S 1 Reply Last reply Reply Quote 0
        • S Away
          sdetweil @justme2024
          last edited by sdetweil

          @justme2024

          that transformer has to be in the module config:{} section

          everything outside the config section belongs to MagicMirror, inside belongs to the module

          https://docs.magicmirror.builders/modules/configuration.html#animated

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          J 1 Reply Last reply Reply Quote 0
          • J Offline
            justme2024 @sdetweil
            last edited by

            @sdetweil Thanks - this worked for the icon itself - Is there documentation for the eventtransformer? looking to change the text not so much the icon, but assumptions such as using color-text: ‘blue’ hasnt worked

            i will say the example in the module around eventtransformer should likely be updated to include the config needs, although i appreciate the link to better understand when its needed

            S 1 Reply Last reply Reply Quote 0
            • S Away
              sdetweil @justme2024
              last edited by

              @justme2024 not my module but the doc lists the event fields

              IMG_0605.png IMG_0606.png

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              J 1 Reply Last reply Reply Quote 0
              • J Offline
                justme2024 @sdetweil
                last edited by sdetweil

                @sdetweil

                Thanks so much - this documentation fell a little bit flat - it was only changing the symbol and not the font itself… however… at this link https://forum.magicmirror.builders/topic/18528/calendar-calendarext3-font-color-and-symbol/12?page=2 it outlined a font change option

                now, im not great at all of this (clearly) however after some well thought out trial and error i was able to get this code to adjust for the font change, appreciate the help!!
                Hopefully they add some updates to the documentation

                 module: "MMM-CalendarExt3",
                 position: "bottom_bar",
                config: {
                	eventTransformer: (ev) => {
                  if (ev.title.search('Owen') > -1) ev.color = 'blue'
                  ev.title=ev.title.replace ('Owen','<font color=blue>Owen</font>')  
                return ev
                }
                }
                },
                

                apologies for the formatting

                S 1 Reply Last reply Reply Quote 0
                • S Away
                  sdetweil @justme2024
                  last edited by

                  @justme2024 Documentation cannot cover every idea. (people don’t read them now anyhow, me included)

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • S sdetweil has marked this topic as solved on
                  • 1 / 1
                  • 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