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 Formatting questions follow-up

    Scheduled Pinned Locked Moved Solved Troubleshooting
    8 Posts 2 Posters 860 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.
    • U Offline
      UncleRoger
      last edited by UncleRoger

      Re: MMM-CalendarExt3 Formatting questions

      I added this code:

      .CX3 .event .headline.useSymbol .symbol {
        display: none;
      }
      

      (from the above discussion) to custom.css in ~/MagicMirror/css and it had no effect – I still see the colored dot. I’m hoping to remove it and just apply the color to the text instead since I have limited horizontal width and don’t want to waste it on a dot. Is there something I’m missing?

      And, as a follow-up, I think I saw something about coloring the text so I will do more research there but it would be nifty to have an option of something like “textColor: true” which would apply the color to the text. Not sure if I’m making sense though.

      Lastly, I’m trying to figure out how to get the time to be just “08:30” (for 8:30 am) or “22:15” (for 10:15pm) and am not having much luck.

      U 2 Replies Last reply Reply Quote 0
      • U Offline
        UncleRoger @UncleRoger
        last edited by

        So I don’t know what I was smoking, but I couldn’t find anything about changing event text colors. What I’d like to do is, instead of having a blue dot with white text saying “Piano Lesson”, I’d like no dot and “Piano Lesson” in blue text.

        1 Reply Last reply Reply Quote 0
        • U Offline
          UncleRoger @UncleRoger
          last edited by UncleRoger

          @UncleRoger said in MMM-CalendarExt3 Formatting questions follow-up:

          Re: MMM-CalendarExt3 Formatting questions
          I added this code:

          .CX3 .event .headline.useSymbol .symbol {
            display: none;
          }
          

          (from the above discussion) to custom.css in ~/MagicMirror/css and it had no effect – I still see the colored dot.

          I had set useSymbol to false in config.js and that was preventing this css from being applied. When I removed that from the module config, the dot disappeared as it should.

          And, as a follow-up, I think I saw something about coloring the text so I will do more research there but it would be nifty to have an option of something like “textColor: true” which would apply the color to the text. Not sure if I’m making sense though.

          I found what I had seen previously and this is what worked:

          .CX3 .calendar_<calendar>      {
            color: <color>;
          }
          

          where is the value assigned to the “name:” option of the calendar in the default calendar module. So, if you have this entry in config.js in :

          { // Family Calendar
                  name:                   "Family",
                  url:                    "https://calendar.google.com/calendar/ical/blahblahblah",
                  broadcastPastEvents:    true,
                  color:                  "#05C3DD",
          },
          

          in the calendars array of the default calendar module definition, then the CSS to change the text color in CX3 for that calendar would be:

          .CX3 .calendar_Family      {
            color: #05C3DD;
          }
          

          Lastly, I’m trying to figure out how to get the time to be just “08:30” (for 8:30 am) or “22:15” (for 10:15pm) and am not having much luck.

          I figured this one out with a little help from ChatGPT:

          eventTimeOptions: {  hour: '2-digit', minute: '2-digit', hour12: false  },
          

          Not sure if that’s the best way to do it, but it seems to work.

          The final result looks like this:
          cc76b040-21fd-46ce-973e-8894b015c3c6-image.png

          That’s viewing it on a landscape monitor but it will eventually end up on one in portrait mode, hence the need to eliminate the dot and shorten the time.

          (Just trying to document this in case someone else is looking for the same answers.)

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

            @UncleRoger All your solutions are perfect. Good job.

            U 1 Reply Last reply Reply Quote 0
            • U Offline
              UncleRoger @MMRIZE
              last edited by

              @MMRIZE

              Thanks! Now I just have to find 6 different colors that are readable, plus 3 more related to 3 of those that are also readable. 8^)

              (Family calendar, me, the wife, 3 kids, and their 3 schools. sigh Sometimes I wish I was a mantis shrimp.)

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

                @UncleRoger
                There would be a simpler solution, but your approach is not bad.

                .CX3 .singleday.event {
                  color: var(--calendarColor);
                }
                

                To use this approach; you should assign color to the calendars of the default calendar module.
                aa1f00f2-22d8-41d0-a621-e0b4d9572510-image.png

                U 1 Reply Last reply Reply Quote 0
                • U Offline
                  UncleRoger @MMRIZE
                  last edited by

                  @MMRIZE said in MMM-CalendarExt3 Formatting questions follow-up:

                  @UncleRoger
                  There would be a simpler solution, but your approach is not bad.

                  .CX3 .singleday.event {
                    color: var(--calendarColor);
                  }
                  

                  To use this approach; you should assign color to the calendars of the default calendar module.

                  Ooh, that’s perfect! Thanks! Much better, I think, to do as much setup in the config.js file as possible and, for this, to define everything about a calendar together (name, key, color, etc.).

                  One more question – I’ve noticed that multi-day events show a starting and ending time which is okay, but it’s also doing that for all-day events. That is, if it marked as “all-day”, it shows a start time of 00:00 and an end time of 23:59.

                  fff3eb9d-2e24-44ad-8594-fa917855237e-image.png
                  Is there any way to turn off the times for all-day multi-day events (or all multi-day events)?

                  Thanks!

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

                    @UncleRoger
                    You can use this;

                    .CX3 .event.fullday.multiday .headline .time {
                      display:none;
                    }
                    

                    (I’ll add this to the next update to be the default.)

                    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