• 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-CalendarExt3 show color

Scheduled Pinned Locked Moved Solved Troubleshooting
12 Posts 4 Posters 2.9k Views 4 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
    Fuzzy
    last edited by Dec 31, 2023, 3:17 PM

    Hello,

    I want to develop a Magic Mirror for my kitchen. The main purpose is to show my google calendar. Therefore I tried the module MMM-CalendarExt3 and MMM-CalendarExt3Agenda. Both work fine for me, but I miss the colors for each entry from the google calendar. For example, when I create an entry for my son I give the color blue, when I create an event for my daughter I give the color green. Is there a possibility to show this colors from google calendar in the MMM-CalendarExt3 module? Maybe there is a color parameter transferred from google calendar to get the color?

    Thanks a lot for help and all the best for the year 2024 :thumbs_up:

    M 1 Reply Last reply Jan 8, 2024, 11:48 PM Reply Quote 0
    • M Offline
      MMRIZE @greedyvegan
      last edited by MMRIZE Feb 27, 2024, 8:25 AM Feb 27, 2024, 8:22 AM

      @greedyvegan

      .CX3 .week:nth-child(2) .cell:first-child .cellDate .dateParts.month {
        display: none; 
        /* Intentionally, I showed the month in the first cell of the calendar */
      }
      
      .CX3 .cellDate .dateParts.day {
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        width: 22px; /* Fixed width */
        height: 22px; /* W/H ratio should be 1 for circle not oval */
        line-height: 22px; /* vertical centering */
        border-radius: 50%;
        border: 1px solid #fff;
      }
      

      34fad96d-1eed-4ea7-aa42-283a5b64a70f-image.png

      G 1 Reply Last reply Feb 27, 2024, 10:55 PM Reply Quote 0
      • F Offline
        Fuzzy
        last edited by Dec 31, 2023, 6:45 PM

        Oh, I think it’s the wrong Category. Can one of the moderators please move the posting to “modules/Development”

        Thanks a lot :-)

        S 1 Reply Last reply Dec 31, 2023, 9:17 PM Reply Quote 0
        • S Offline
          sdetweil @Fuzzy
          last edited by Dec 31, 2023, 9:17 PM

          @Fuzzy development is actually about developing a module. you are just asking about configuration

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          F 1 Reply Last reply Jan 8, 2024, 6:37 PM Reply Quote 0
          • F Offline
            Fuzzy @sdetweil
            last edited by Jan 8, 2024, 6:37 PM

            @sdetweil Because nobody is answering. Is this the correct folder?

            S 1 Reply Last reply Jan 8, 2024, 6:44 PM Reply Quote 0
            • S Offline
              sdetweil @Fuzzy
              last edited by Jan 8, 2024, 6:44 PM

              @Fuzzy no idea. the author is here every day.

              the ICS data that is used to transfer from one cal system to another does not expose the colors used on the Google app side.

              best you can do is two part

              everything for A Calendar to a color
              add
              color:…
              to the default module csl config, in the same place as url

              second, you could write a filter in Ext3 to add color by title

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • M Offline
                MMRIZE @Fuzzy
                last edited by Jan 8, 2024, 11:48 PM

                @Fuzzy
                I missed this question, sorry.

                Importing color of the specific events from Google calendar directly is not possible. That’s not this module’s job. Rather, the event provider(e.g. default calendar module, or mmm-googlecalendar) doesn’t support it. Usually that kind of data is not sharable outside of Google Calendar. And standard ics format doesn’t have “color” property of an event.

                Instead, you can assign color manually to the calendar itself or the specific events. But it should be done by yourself.

                F 1 Reply Last reply Jan 9, 2024, 7:03 PM Reply Quote 0
                • F Offline
                  Fuzzy @MMRIZE
                  last edited by Jan 9, 2024, 7:03 PM

                  @MMRIZE Thanks for your quick answer. Before I installed MagicMirror I tried DAKBord and in this calander I can see the colors of the google calendar.

                  Bildschirmfoto vom 2024-01-09 19-52-17.png

                  Therefore I thought it is also possible in your module. But this is not a problem. Thanks a lot for your effort to design it how it is :thumbs_up:

                  G 1 Reply Last reply Feb 25, 2024, 4:43 AM Reply Quote 0
                  • G Offline
                    greedyvegan @Fuzzy
                    last edited by Feb 25, 2024, 4:43 AM

                    I’ve been looking to no avail…
                    is it possible to change the colors of JUST the days of the week and not the dates?
                    I want to separate the colors of the sunday - saturday and the numbers, individually.

                    every time I change the css it changes the color of the whole column.

                    M 1 Reply Last reply Feb 26, 2024, 10:54 AM Reply Quote 0
                    • M Offline
                      MMRIZE @greedyvegan
                      last edited by Feb 26, 2024, 10:54 AM

                      @greedyvegan

                      3e3ed5d8-5ef3-47ab-9e49-451d3ac9fc2c-image.png

                      /* In your css/custom.css */
                      
                      .CX3 .headerContainer .weekday_0 {
                        color: red;
                      }
                      
                      .CX3 .headerContainer .weekday_1 {
                        color: orange;
                      }
                      
                      .CX3 .headerContainer .weekday_2 {
                        color: yellow;
                      }
                      
                      .CX3 .headerContainer .weekday_3 {
                        color: green;
                      }
                      
                      .CX3 .headerContainer .weekday_4 {
                        color: blue;
                      }
                      
                      .CX3 .headerContainer .weekday_5 {
                        color: indigo;
                      }
                      
                      .CX3 .headerContainer .weekday_6 {
                        color: violet;
                      }
                      
                      
                      G 1 Reply Last reply Feb 27, 2024, 3:17 AM Reply Quote 0
                      • G Offline
                        greedyvegan @MMRIZE
                        last edited by Feb 27, 2024, 3:17 AM

                        @MMRIZE

                        got it!

                        thanks again.

                        lol, last two requests
                        I got rid of the current and next months"Feb" & “Mar”
                        using dateParts.month.seq_0
                        but Jan wont leave, what do I do?

                        Screenshot 2024-02-26 at 10.10.10 PM.png

                        with the border radius and box shadow, I was able to give the calendar day numbers a circle behind them, the double digit numbers are circles, but the single digits are ovals; do you know how to keep it a circle?

                        M 1 Reply Last reply Feb 27, 2024, 8:22 AM 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