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-Calendar Ext2 google calendar colors

    Scheduled Pinned Locked Moved Custom CSS
    6 Posts 5 Posters 1.9k Views 5 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.
    • F Offline
      fedale
      last edited by

      Is it possible to have the same color as set in my google calendar in MMM-Calendar Ext2.
      As of now it´s all showing the same color for an event. Even when i change the color in my google calendar still doesn´t change in mm.

      Or could i have words that would prompt another color in my calendar depending on the word in the calendar?
      example:
      Work would always show as blue
      Holiday would show as yellow.

      Or names.

      Without creating extra calendars. Today i have a family calendar that i would like to have the different colors that we are using or the words showing up as differnt colors.

      M 1 Reply Last reply Reply Quote 0
      • M Offline
        MMRIZE @fedale
        last edited by

        @fedale

        1. Impossible to inherit Google’s colour setting (The event itself has no information about how it shows in Google calendar)

        2. You can transform your event to get a different CSS className by the condition of events.
          See the Sort, Filter, Transform parts of MMM-CalendarExt2 documents.

        F 1 Reply Last reply Reply Quote 0
        • F Offline
          fedale @MMRIZE
          last edited by

          @MMRIZE thanks i try that.

          1 Reply Last reply Reply Quote 0
          • F Offline
            fedale
            last edited by sdetweil

            @MMRIZE thanks for helping me in the right direction. This worked for me

            In config.js
            Under views:

            transform: function(event) {
            			if (event.title.search("Holiday") > -1) {
            			event.className = "Holiday";
            			} 
              		       else if(event.title.search("Work") > -1) { 
            		       event.className = "Work" 
            			} 
            			return event;
            			},							
            		},
            
            

            In the custom.css

             .CX2 .Holiday.fullday {
                background-color:rgba(0,0,255);
                color:#000;
            
             }
             .CX2 .Work.fullday {
                background-color:rgba(0,128,128);
                color:#000;
            
            S F 2 Replies Last reply Reply Quote 0
            • S Offline
              sdetweil @fedale
              last edited by sdetweil

              @fedale always put your code or config or css entries in a code wrapper

              paste, select the text you just pasted
              and hit the </> button above the edit window

              fixed for u this time

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • F Offline
                fedale @fedale
                last edited by

                @sdetweil Sorry about that, thank you

                1 Reply Last reply Reply Quote 0
                • 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